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

Sortable data table
Prop	Type	Default	Description
theme	"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "clear"	Configured Default	Theme color for the select.
state	"" \| "success" \| "error" \| "warning"	-	Visual state for feedback.
outline	boolean	false	Use outlined style for the select.
rounding	"none" \| "small" \| "medium" \| "large"	Configured Default	Corner rounding for the select.
shadow	"none" \| "light" \| "medium" \| "strong" \| "intense"	Configured Default	Box shadow style for the select.
options	Array<{ label: string; value: string }>	-	Array of selectable options.
value	string	-	Currently selected value.
onChange	(value: string) => void	-	Change event handler for the select.
placeholder	string	"Select an option"	Placeholder when no value is selected.
ariaLabel	string	-	ARIA label for accessibility.
ariaDescription	string	-	ARIA description for accessibility.
disabled	boolean	false	Disable the select input.
asyncOptions	() => Promise<{ label: string; value: string }[]>	-	Async function for loading options dynamically.
pollInterval	number	0	Interval (ms) for polling async options.
className	string	-	Custom class names for the outer wrapper.
data-testid	string	"select"	Test id for querying the component in tests.