RTEToolSelect

Stable
WCAG 2.2 evidence
RTL

A compact select inside a rich-text toolbar or bubble menu, for example the block type. Built on React Aria Select: the trigger shows the selected option and is named by aria-label plus the value ("Paragraph, Block type"), with aria-haspopup="listbox" and aria-expanded; Enter, Space, ArrowDown and ArrowUp open the list, arrows, Home / End and type-ahead move in it, Enter selects, Escape closes, and focus returns to the trigger (WCAG 2.1.1, 2.4.3, 4.1.2). Inside an RTEToolbar the trigger is one of the arrow-key stops. The selected option shows a check mark (1.4.1); keyboard focus draws the focus ring (2.4.7). Consumer duties: the select's name, option wording, and keeping value in sync with the block at the caret.

import { RTEToolSelect } from "@nexera-ui/react";

Loading example…

5
examples: 31
props: 5
live controls: 1
platform: 8
WCAG criteria: 1
block uses it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

placeholder

placement

isDisabledfalse

isRequiredfalse

isInvalidfalse

Generated code

import { RTEToolSelect } from "@nexera-ui/react";

<RTEToolSelect />

Examples 4

The same examples as Storybook, rendered live. Open Code to copy one.

Open

Figma State=Open: brand/subtle fill while the list is open; the selected option has a check mark.

Loading example…

app.tsx

import { RTEToolSelect } from "@nexera-ui/react";

const BLOCKS = [
  { id: "paragraph", label: "Paragraph" },
  { id: "h1", label: "Heading 1" },
  { id: "h2", label: "Heading 2" },
  { id: "h3", label: "Heading 3" },
  { id: "quote", label: "Quote" },
  { id: "code", label: "Code block" },
];

<RTEToolSelect aria-label="Block type" options={BLOCKS} defaultValue="paragraph" defaultOpen />;

Disabled and placeholder

Figma State=Disabled (45 % opacity), and a placeholder while nothing is selected.

Loading example…

app.tsx

import { RTEToolSelect } from "@nexera-ui/react";

const BLOCKS = [
  { id: "paragraph", label: "Paragraph" },
  { id: "h1", label: "Heading 1" },
  { id: "h2", label: "Heading 2" },
  { id: "h3", label: "Heading 3" },
  { id: "quote", label: "Quote" },
  { id: "code", label: "Code block" },
];

export function DisabledAndPlaceholder() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <RTEToolSelect aria-label="Block type" options={BLOCKS} defaultValue="h2" isDisabled />
      <RTEToolSelect aria-label="Text style" options={BLOCKS} placeholder="Style" />
    </div>
  );
}

Long values right to left

Long localized values wrap inside a narrow container instead of being cut; right-to-left mirrors the chevron side.

Loading example…

app.tsx

import { RTEToolSelect } from "@nexera-ui/react";

export function LongValuesRightToLeft() {
  return (
    <div className="max-w-[10rem]">
      <RTEToolSelect
        aria-label="نوع الكتلة"
        options={[
          { id: "paragraph", label: "فقرة" },
          { id: "h2", label: "عنوان من المستوى الثاني مع سطر فرعي" },
        ]}
        defaultValue="h2"
      />
    </div>
  );
}

In editor

A realistic composed editor with a plain contenteditable element (the block-type select follows the block at the caret and changes it).

Loading example…

app.tsx

export function InEditor() {
  return <RichTextEditorDemo />;
}

Props 31

Press "Try it" on a card to load that prop into the playground.

options*Nexera

readonly RTEToolSelectOption[]

The options, in order.

placeholderNexera

string

Text shown while no option is selected. Translate it. Without it, React Aria's localized "Select an item" is used.

emptyLabelNexera

string

Text shown in the list when options is empty (with allowsEmptyCollection). Translate it.

placementNexera

"bottom" | "bottom left" | "bottom right" | "bottom start" | "bottom end" | "top" | "top left" | "top right" | "top start" | "top end" | "left" | "left top" | "left bottom" | "start" | "start top" | "start bottom" | "right" | "right top" | "right bottom" | "end" | "end top" | "end bottom"

Where the list opens; it flips to stay inside the viewport.

classNameNexera

string

Extra classes for the root, merged last so they win over the defaults.

styleNexera

CSSProperties

Inline style of the root.

aria-labelNexera

string

Accessible name ("Block type", "Font size"). The trigger shows only the value, so the name is required unless aria-labelledby is set; screen readers announce it with the value. Translate it. Accessible name; aria-labelledby wins when both are set.

aria-labelledbyNexera

string

Id(s) of element(s) that name the select; wins over aria-label. Id(s) of the visible element(s) that name the select.

validationBehaviorReact Aria

"native" | "aria"

Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.

isDisabledReact Aria

boolean

Whether the input is disabled.

autoCompleteReact Aria

string

Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).

nameReact Aria

string

The name of the input, used when submitting an HTML form.

formReact Aria

string

The <form> element to associate the input with. The value of this attribute must be the id of a <form> in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).

selectedKeyReact Aria

Key | null

The currently selected key in the collection (controlled). @deprecated

defaultSelectedKeyReact Aria

Key | null

The initial selected key in the collection (uncontrolled). @deprecated

onSelectionChangeReact Aria

(key: Key | null) => void

Handler that is called when the selection changes. @deprecated

isOpenReact Aria

boolean

Sets the open state of the menu.

defaultOpenReact Aria

boolean

Sets the default open state of the menu.

onOpenChangeReact Aria

(isOpen: boolean) => void

Method that is called when the open state of the menu changes.

shouldCloseOnSelectReact Aria

boolean

Whether the Select should close when an item is selected. Defaults to true if selectionMode is single, false otherwise.

allowsEmptyCollectionReact Aria

boolean

Whether the select should be allowed to be open when the collection is empty.

disabledKeysReact Aria

Iterable<Key>

The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.

valueReact Aria

Key | null

The current value (controlled).

defaultValueReact Aria

Key | null

The default value (uncontrolled).

onChangeReact Aria

(value: Key | null) => void

Handler that is called when the value changes.

isRequiredReact Aria

boolean

Whether user input is required on the input before form submission.

isInvalidReact Aria

boolean

Whether the input value is invalid.

validateReact Aria

(value: Key) => true | ValidationError | null

A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead.

autoFocusReact Aria

boolean

Whether the element should receive focus on render.

idReact Aria

string

The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).

aria-describedbyReact Aria

string

Identifies the element (or elements) that describes the object.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

6 direct · 2 supporting

1.3.1Info and RelationshipsLevel A · tested directly
1.4.1Use of ColorLevel A · tested directly
1.4.12Text SpacingLevel AA · supporting test
2.1.1KeyboardLevel A · tested directly
2.4.3Focus OrderLevel A · tested directly
2.4.7Focus VisibleLevel AA · tested directly
2.5.8Target Size (Minimum)Level AA · supporting test
4.1.2Name, Role, ValueLevel A · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

data-disabled
data-focus-visible
data-hovered
data-placeholder

Usage

<RTEToolSelect className="data-disabled:opacity-90 shadow-sm" />

Used in blocks

Document editorMessaging and collaboration

Theme studio

RTEToolSelect

Try every prop. Copy the code.

Examples 4

Open

Disabled and placeholder

Long values right to left

In editor

Props 31

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components