select

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

Usage

Default


<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

Data table
	Type	Description
aria-busy	boolean	Indicates the select is busy, useful while async options are loading.
aria-describedby	string	Optional aria-describedby id reference for helper/error text.
aria-description	string	Optional description text for the select element.
aria-invalid	boolean	Marks the field as invalid for assistive technology. If omitted, component logic may still infer invalid from state === "error".
aria-label	string	Optional aria-label for screen readers. Useful when no visible label is provided.
aria-labelledby	string	Optional aria-labelledby id reference. Prefer this when an external label element exists.
aria-live	"off" \| "polite" \| "assertive"	Optional aria-live setting for async status messaging.
aria-required	boolean	Indicates the field is required to assistive technology.
asyncOptions	((query: string) => Promise<Option[]>)	If provided, the select element will render options asynchronously. Should return a Promise resolving to Option[] based on search query.
autoComplete	string	Optional autocomplete behavior for compatible use cases.
className	string	Additional class name(s) for custom styling.
data-testid	string	Optional test ID for testing frameworks.
disabled	boolean	Whether the select element is disabled.
form	string	Optional form association.
id	string	Optional id for the underlying select element.
label	ReactNode	Optional visible label describing what the select is for.
labelPosition	LabelPositionType	Position of the label relative to the select.
name	string	Name for the select element.
onChange	(value: string) => void	Callback fired when the selected option changes. Receives the new value as an argument.
options	Option[]	An array of options that will be rendered as dropdown choices.
outline	boolean	If true, the select element is styled as outlined.
placeholder	string	Placeholder text to display when no option is selected.
pollInterval	number	Optional polling interval for updating options in milliseconds.
required	boolean	Whether the select element is required.
role	AriaRole	Optional role override. Usually not needed for a native select, but included for flexibility.
rounding	RoundingType	Rounding style of the select element. "none" \| "small" \| "medium" \| "large" \| "full"
shadow	ShadowType	Shadow style of the select element. "none" \| "light" \| "medium" \| "strong" \| "intense"
state	StateType	State variant for styling. "success" \| "error" \| "warning" \| "disabled" \| ""
tabIndex	number	Optional tab index for keyboard navigation control.
theme	ThemeType	Theme for styling. "primary" \| "secondary" \| "tertiary" \| "quaternary" \| "clear"
value	string	The current selected value.