Select
A select displays a collapsible list of options and allows a user to select one of them.
Select
isDisabled
isInvalid
Example
Select.tsx
Select.css
theme.css
Example
Select.tsx
Select.css
theme.css
import {Select} from './Select';
<Select label="Select">
<SelectItem>Test</SelectItem>
</Select>
Features
A select can be built using the <select>
and <option> HTML elements, but this is
not possible to style consistently cross browser, especially the options. Select helps achieve accessible
select components that can be styled as needed without compromising on high quality interactions.
- Flexible – Support for controlled and uncontrolled state, async loading, disabled items, validation, sections, complex items, and more.
- Keyboard navigation – Select can be opened and navigated using the arrow keys, along with page up/down, home/end, etc. Auto scrolling, and typeahead both in the listbox and on the button, are supported as well.
- Accessible – Follows the ARIA listbox pattern, with support for items and sections, and slots for label and description elements within each item for improved screen reader announcement.
- HTML form integration – A visually hidden
<select>element is included to enable HTML form integration and autofill. - Validation – Support for native HTML constraint validation with customizable UI, custom validation functions, and server-side validation errors.