source

Select

Form-focused select dropdown with label, validation, keyboard navigation, grouped options, and form integration.

Framework

Variant

Size

Tier

Clearable

Disabled

Required

Loading syntax highlighting...

01 Examples

Grouped options

Use the groups prop to organize long option lists under section labels — typical for timezones, countries by region, or categorized data.

Timezone

Loading syntax highlighting...

Per-option disabled

Disable individual options while the rest of the list stays selectable. Keyboard navigation skips disabled options.

Plan

Loading syntax highlighting...

Helper & error

Helper and error text follow the same form-field contract as Input — `error` overrides `helper` when both are set.

Language

Choose your preferred language

Department

Please select a department

Loading syntax highlighting...

02 Customization

Form Integration

Select with hidden input for native form submission.

User Role

Form value: editor

Loading syntax highlighting...

03 Accessibility

ARIA Combobox

The trigger uses role="combobox" with aria-expanded, aria-haspopup="listbox", and aria-controls. Options use role="option" with aria-selected. Label, error, and helper text are linked via aria-labelledby and aria-describedby.

Keyboard

Enter / Space / Arrow Down opens the dropdown. Arrow Up/Down navigates options. Home/End jump to first/last. Escape closes and returns focus.

Form Submission

When the name prop is set, a hidden <input> element carries the selected value for native form submission without JavaScript.

04 API Reference

38 props

No matching properties

No matching properties

05 Installation

Import

Loading syntax highlighting...

llm.txt