Select

Single-select dropdown field.

Examples

Default

Assignee

Clear Assignee

<SelectStory {...args} />

Searchable

Assignee

Clear Assignee

<SelectStory {...args} />

Custom Options

Assignee

<CustomOptionsStory {...args} />

Disabled

Assignee

<SelectStory {...args} />

Loading

Assignee

Clear Assignee

<SelectStory {...args} />

Many Options

Assignee

<EmptySelectStory {...args} />

Sections And Dividers

Assignee

Clear Assignee

<SelectStory {...args} />

Validation Status

Assignee

Clear Assignee

Choose an assignee before continuing.

<SelectStory {...args} />

Sizes

Small

Medium

Large

<SizesStory {...args} />

With Start Icon

Assignee

Clear Assignee

<SelectStory {...args} />

Hidden Label

Assignee

Clear Assignee

<SelectStory {...args} />

Custom Placeholder

Assignee

<EmptySelectStory {...args} />

Disabled Options

Assignee

<EmptySelectStory {...args} />

API

Select

Single-select dropdown field.

When isOptional: false, isRequired: false

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS class names applied to the field root.
`data-testid`	`string`	—	Test ID applied to the combobox button.
`description`	`ReactNode`	—	Supporting text displayed below the label.
`hasClear`	`boolean`	`false`	Whether to show a clear button when a value is selected.
`hasSearch`	`boolean`	`false`	Whether to show search input in the dropdown.
`isDisabled`	`boolean`	`false`	Whether the selector is disabled.
`isLabelHidden`	`boolean`	`false`	Whether to visually hide the label.
`isLoading`	`boolean`	`false`	Whether the selector is loading.
`label`*	`string`	—	Field label.
`labelIcon`	`IconComponent`	—	Icon shown before the label.
`labelTooltip`	`ReactNode`	—	Tooltip content shown next to the label.
`onChange`*	`(value: string \| null) => void`	—	Called when selection changes.
`options`*	`ReadonlyArray<SelectOptionDefinition>`	—	Options to display.
`placeholder`	`string`	`'Select...'`	Placeholder shown when no option is selected.
`ref`	`Ref<HTMLButtonElement>`	—	Ref forwarded to the combobox button.
`renderOption`	`(option: SelectOptionData) => ReactNode`	—	Custom render function for selectable options.
`searchPlaceholder`	`string`	`'Search...'`	Search input placeholder.
`size`	`"sm" \| "md" \| "lg"`	`'md'`	Select size.
`startIcon`	`IconComponent`	—	Start icon rendered in the trigger.
`status`	`InputStatus`	—	Validation status displayed below the selector.
`style`	`CSSProperties`	—	Inline styles applied to the field root.
`value`*	`string \| null`	—	Selected option value.
`isOptional`	`false`	—
`isRequired`	`false`	—

When isOptional: true, isRequired: false

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS class names applied to the field root.
`data-testid`	`string`	—	Test ID applied to the combobox button.
`description`	`ReactNode`	—	Supporting text displayed below the label.
`hasClear`	`boolean`	`false`	Whether to show a clear button when a value is selected.
`hasSearch`	`boolean`	`false`	Whether to show search input in the dropdown.
`isDisabled`	`boolean`	`false`	Whether the selector is disabled.
`isLabelHidden`	`boolean`	`false`	Whether to visually hide the label.
`isLoading`	`boolean`	`false`	Whether the selector is loading.
`label`*	`string`	—	Field label.
`labelIcon`	`IconComponent`	—	Icon shown before the label.
`labelTooltip`	`ReactNode`	—	Tooltip content shown next to the label.
`onChange`*	`(value: string \| null) => void`	—	Called when selection changes.
`options`*	`ReadonlyArray<SelectOptionDefinition>`	—	Options to display.
`placeholder`	`string`	`'Select...'`	Placeholder shown when no option is selected.
`ref`	`Ref<HTMLButtonElement>`	—	Ref forwarded to the combobox button.
`renderOption`	`(option: SelectOptionData) => ReactNode`	—	Custom render function for selectable options.
`searchPlaceholder`	`string`	`'Search...'`	Search input placeholder.
`size`	`"sm" \| "md" \| "lg"`	`'md'`	Select size.
`startIcon`	`IconComponent`	—	Start icon rendered in the trigger.
`status`	`InputStatus`	—	Validation status displayed below the selector.
`style`	`CSSProperties`	—	Inline styles applied to the field root.
`value`*	`string \| null`	—	Selected option value.
`isOptional`*	`true`	—
`isRequired`	`false`	—

When isOptional: false, isRequired: true

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS class names applied to the field root.
`data-testid`	`string`	—	Test ID applied to the combobox button.
`description`	`ReactNode`	—	Supporting text displayed below the label.
`hasClear`	`boolean`	`false`	Whether to show a clear button when a value is selected.
`hasSearch`	`boolean`	`false`	Whether to show search input in the dropdown.
`isDisabled`	`boolean`	`false`	Whether the selector is disabled.
`isLabelHidden`	`boolean`	`false`	Whether to visually hide the label.
`isLoading`	`boolean`	`false`	Whether the selector is loading.
`label`*	`string`	—	Field label.
`labelIcon`	`IconComponent`	—	Icon shown before the label.
`labelTooltip`	`ReactNode`	—	Tooltip content shown next to the label.
`onChange`*	`(value: string \| null) => void`	—	Called when selection changes.
`options`*	`ReadonlyArray<SelectOptionDefinition>`	—	Options to display.
`placeholder`	`string`	`'Select...'`	Placeholder shown when no option is selected.
`ref`	`Ref<HTMLButtonElement>`	—	Ref forwarded to the combobox button.
`renderOption`	`(option: SelectOptionData) => ReactNode`	—	Custom render function for selectable options.
`searchPlaceholder`	`string`	`'Search...'`	Search input placeholder.
`size`	`"sm" \| "md" \| "lg"`	`'md'`	Select size.
`startIcon`	`IconComponent`	—	Start icon rendered in the trigger.
`status`	`InputStatus`	—	Validation status displayed below the selector.
`style`	`CSSProperties`	—	Inline styles applied to the field root.
`value`*	`string \| null`	—	Selected option value.
`isOptional`	`false`	—
`isRequired`*	`true`	—

SelectOption

Helper layout for custom Select option rendering.

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS class names applied to the option layout.
`data-testid`	`string`	—	Test ID applied to the option layout.
`description`	`ReactNode`	—	Supporting text displayed below the label.
`endContent`	`ReactNode`	—	Trailing content.
`icon`	`IconComponent`	—	Icon displayed before the label.
`label`*	`ReactNode`	—	Primary label.
`ref`	`Ref<HTMLSpanElement>`	—	Ref forwarded to the layout root.
`style`	`CSSProperties`	—	Inline styles applied to the layout root.