select

The Select component provides a styled dropdown menu with async options support.

Usage & Examples

Default

default.tsx

<Select
  placeholder="Choose an option"
  options={[
    { label: "Option A", value: "a" },
    { label: "Option B", value: "b" },
    { label: "Option C", value: "c" },
  ]}
  value="a"
  onChange={(value) => console.log("Selected:", value)}
/>

Props API

39 props
Columns
select props API
Default
Description
aria-busybooleanNoariaIndicates the select is busy, useful while async options are loading.
aria-describedbystringNoariaOptional aria-describedby id reference for helper/error text.
aria-descriptionstringNoariaOptional description text for the select element.
aria-invalidbooleanNoariaMarks the field as invalid for assistive technology. If omitted, component logic may still infer invalid from state === "error".
aria-labelstringNoariaOptional aria-label for screen readers. Useful when no visible label is provided.
aria-labelledbystringNoariaOptional aria-labelledby id reference. Prefer this when an external label element exists.
aria-live"off" | "polite" | "assertive"Noaria"polite"Optional aria-live setting for async status messaging.
aria-requiredbooleanNoariaIndicates the field is required to assistive technology.
asyncOptions((query: string) => Promise<Option[]>)NoeventsIf provided, the select element will render options asynchronously. Should return a Promise resolving to Option[] based on search query.
autoCompletestringNopropsOptional autocomplete behavior for compatible use cases.
classNamestringNostylingAdditional class name(s) for custom styling.
data-testidstringNotestingBackward-compatible alias for test ID attributes.