InputSelect
A select field with label, options, sections, search, and status states.
Usage
import {
InputSelect,
InputSelectField,
InputSelectLabel,
InputSelectTrigger,
InputSelectValue,
InputSelectContent,
InputSelectSearch,
InputSelectGroup,
InputSelectSection,
InputSelectSectionLabel,
InputSelectItem,
InputSelectExpander,
InputSelectDescription,
InputSelectError,
InputSelectStatus,
useInputSelectFilter,
} from '@acronis-platform/ui-react';InputSelect is a compound select built on Base UI's Select primitive —
keyboard navigation, typeahead, focus management, and ARIA come from Base UI.
InputSelect owns the value; InputSelectField wraps the label/trigger/
description/error furniture, and InputSelectContent holds the
InputSelectItem options (optionally grouped into InputSelectSections, with an
InputSelectSearch filter). Themed by the --ui-input-select-* tokens.
Examples
A labeled select with a description:
<InputSelect items={fruitItems}>
<InputSelectField>
<InputSelectLabel>Fruit</InputSelectLabel>
<InputSelectTrigger>
<InputSelectValue placeholder="Select an option" />
</InputSelectTrigger>
<InputSelectDescription>Pick your favourite</InputSelectDescription>
</InputSelectField>
<InputSelectContent>
<InputSelectItem value="apple">Apple</InputSelectItem>
<InputSelectItem value="banana">Banana</InputSelectItem>
<InputSelectItem value="grapes">Grapes</InputSelectItem>
</InputSelectContent>
</InputSelect>Required, with an error message:
<InputSelect items={fruitItems}>
<InputSelectField>
<InputSelectLabel required>Fruit</InputSelectLabel>
<InputSelectTrigger>
<InputSelectValue placeholder="Select an option" />
</InputSelectTrigger>
<InputSelectError>Please choose a fruit</InputSelectError>
</InputSelectField>
<InputSelectContent>{/* …items… */}</InputSelectContent>
</InputSelect>A searchable, sectioned list:
<InputSelectContent>
<InputSelectSearch aria-label="Filter" placeholder="Search" />
<InputSelectSection>
<InputSelectSectionLabel>Fruits</InputSelectSectionLabel>
<InputSelectItem value="apple">Apple</InputSelectItem>
<InputSelectItem value="banana">Banana</InputSelectItem>
</InputSelectSection>
</InputSelectContent>A tree / hierarchy, with icons and indentation. InputSelectExpander is a
non-selectable row that expands or collapses a group; InputSelectItem's
indent reserves the leading nesting spacer (levels 1–3 → 16 / 40 / 64 px) and
icon renders a leading glyph:
<InputSelectContent>
<InputSelectExpander
expanded={open}
onToggle={() => setOpen((o) => !o)}
icon={<BriefcaseIcon size={16} />}
>
DataBridge Systems
</InputSelectExpander>
<InputSelectItem value="eu" indent={2} hidden={!open}>
EU region
</InputSelectItem>
</InputSelectContent>Keep collapsed children mounted and toggle hidden (rather than unmounting
them) so Base UI's selection-by-index stays stable. When a search query is
active, flat InputSelectItems auto-hide against it; a tree that computes its
own visibility reads the live query with useInputSelectFilter(). Pass
textValue on an item whose children aren't plain text so it can still be
matched, and value/onChange on InputSelectSearch to control the query
externally.
A loading / empty / error status inside the content:
<InputSelectContent>
<InputSelectStatus
variant="error"
action={<Button variant="ghost">Try again</Button>}
>
Couldn't load options
</InputSelectStatus>
</InputSelectContent>API Reference
InputSelectStatus
Prop
Type
The other parts (InputSelect, InputSelectField, InputSelectLabel,
InputSelectTrigger, InputSelectValue, InputSelectContent,
InputSelectSearch, InputSelectGroup, InputSelectSection,
InputSelectSectionLabel, InputSelectDescription, InputSelectError) extend
the corresponding Base UI Select primitive props. InputSelect accepts
items, defaultValue / value, and Base UI Select root props;
InputSelectContent adds side / align for positioning. See the
Base UI Select docs for the full
prop surface.
InputSelectItem extends the Base UI Select.Item props and adds icon,
indent, and textValue. InputSelectExpander is a plain button (not a
Select.Item) with expanded, onToggle, icon, and indent.
useInputSelectFilter() returns the live { query, setQuery } and must be
called inside an InputSelect.