Multi Select API

The child components (Trigger, Content, etc.)

Controlled value of selected items

Initial selected values when uncontrolled

Callback fired when selected values change

Controlled open state of the content panel

Initial open state when uncontrolled

Callback fired when open state changes

Disables the entire multi-select

Marks the input as required

Enables search input to filter options

Controlled search input value

Initial search value when uncontrolled

Callback fired when search input changes

Custom filter function for search; defaults to text/value matching

Callback when a new option is created from search input

Label or function returning label for the create option item

Clear search input when content closes

Text direction

HTML name attribute for form submission

HTML autoComplete attribute

Render as child element instead of button

CSS class names to apply

Trigger content (typically Value and Icon)

Disables the trigger button

Click event handler

Pointer down event handler

Keyboard event handler

Text shown when no items selected (primitives only)

Array of options to map selected values (primitives only)

Separator between items when rendering text (primitives only)

Custom render function or static content

Render as child element instead of span

CSS class names to apply

CSS class names for each selected item badge (styled only)

CSS class names for overflow indicator (styled only)

Maximum visible items before showing +N overflow (styled only)

Render as child element instead of span

CSS class names to apply

Icon content (text or SVG)

Render as child element instead of input

CSS class names to apply

Input placeholder text (styled only)

Accessibility label

Disables the search input

Change event handler

Keyboard event handler

Render as child element instead of div

CSS class names to apply

Force mount the content even when closed

Positioning strategy

Preferred side for popper positioning

Distance from trigger when using popper

Alignment relative to trigger

Fine-tune alignment distance

Reposition to avoid viewport collisions

Space to maintain from viewport edges

Callback when content closes; focus normally returns to trigger

Callback when Escape key pressed

Callback when pointer down outside content

Option items (Item, Group, etc.) or custom content

Array of options to virtualize; auto-renders with Options component (styled only)

Height of each virtualized option in pixels (styled only)

Extra items to render outside viewport (styled only)

Message shown when no options match search (styled only)

Custom render function for each option (styled only)

Show create option item; requires Root onCreateOption (styled only)

Unique value for this option

Disables selection of this item

Text used for search filtering; defaults to extracted text from children

Render as child element instead of div

CSS class names to apply

Item content/label

Click event handler

Pointer move event handler

Pointer leave event handler

Keyboard event handler

Render as child element instead of span

CSS class names to apply

Item text content

Render as child element instead of span

CSS class names to apply

Indicator icon content; only renders when item is selected

Override the create item value (defaults to current search value)

Render as child element instead of div

CSS class names to apply

Custom render or text; receives search value; defaults to 'Create "value"'

Click event handler

Pointer move event handler

Pointer leave event handler

Keyboard event handler

Array of options to virtualize and render

Height of each option item in pixels

Extra items to render outside visible viewport

Estimated visible items for height calculation

Message shown when no options match search

CSS class names applied to each Item

CSS class names applied to each ItemText

CSS class names applied to each ItemIndicator

Custom render function for option content

Custom render function for selection indicator

Render as child element instead of div

CSS class names to apply

Render as child element instead of div

CSS class names to apply

Label, items, and other content

Render as child element instead of div

CSS class names to apply

Label text or content

Render as child element instead of div

CSS class names to apply

DOM node to portal content into; defaults to document.body

Force mount content even when closed

Portal content (usually Content component)

Render as child element instead of div

CSS class names to apply

Option items and content