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-busybooleanNoaria—Indicates the select is busy, useful while async options are loading.
aria-describedbystringNoaria—Optional aria-describedby id reference for helper/error text.
aria-descriptionstringNoaria—Optional description text for the select element.
aria-invalidbooleanNoaria—Marks the field as invalid for assistive technology. If omitted, component logic may still infer invalid from state === "error".
aria-labelstringNoaria—Optional aria-label for screen readers. Useful when no visible label is provided.
aria-labelledbystringNoaria—Optional 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-requiredbooleanNoaria—Indicates the field is required to assistive technology.
asyncOptions((query: string) => Promise<Option[]>)Noevents—If provided, the select element will render options asynchronously. Should return a Promise resolving to Option[] based on search query.
autoCompletestringNoprops—Optional autocomplete behavior for compatible use cases.
classNamestringNostyling—Additional class name(s) for custom styling.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.