Basic
Basic component usage.
Choose one option.
formsstable
Select
Composable single and multiple selection with search, groups, and virtualization.
Choose one option.
Size
Color
Variant
Options
Usage
Import the component and configure it with the same props used in the playground.
Examples
Common patterns and practical usage examples.
Searchable
Filter options by typing a search query.
Choose one option.
Multiple
Select more than one option.
Choose one option.
Error
Validation error state.
Choose one option.
Please review this option.
Disabled
Disabled select state.
Choose one option.
Loading
Loading state while options are being resolved.
Choose one option.
API
Props available for the React Select.
Select
| Prop | Type | Default | Description |
|---|---|---|---|
required | boolean | false | Marks the field and compatible child controls as required. |
disabled | boolean | false | Disables the field and compatible child controls. |
multiple | boolean | false | Enables multiple selection when true. |
placeholder | string | 'Select...' | Placeholder shown when no value is selected. |
size | 'sm' | 'md' | Controls the overall select size. |
color | 'primary' | 'primary' | Semantic color palette for the control. |
variant | 'outline' | 'outline' | Visual variant for the select trigger. |
invalid | boolean | false | Shows invalid styling without requiring error text. |
loading | boolean | false | Shows the select in a loading state. |
clearable | boolean | false | Shows a clear action when the select has a value. |
searchable | boolean | false | Enables option filtering through a search field. |
maxSelected | number | - | Maximum number of values that can be selected. |
closeOnSelect | boolean | false | Controls whether the overlay closes after selecting an option. |
virtual | boolean | - | Enables virtualization for large option collections. |
avoidCollisions | boolean | true | Adjusts floating content placement to avoid viewport collisions. |
modal | boolean | false | Uses modal interaction semantics for the overlay. |
command | boolean | false | Enables command-style interaction behavior. |
children | ReactNode | - | Custom option elements rendered inside the select. |
label | ReactNode | - | Visible field label. |
description | ReactNode | - | Supporting text linked to the control. |
id | string | - | Unique id applied to the select trigger. |
name | string | - | Form field name submitted with the selected value. |
aria-label | string | - | Accessible name for the select trigger when no visible label is used. |
aria-describedby | string | - | Ids of elements that describe the select trigger. |
aria-labelledby | string | - | Ids of elements that label the select trigger. |
error | ReactNode | - | Error message linked to the control. Also implies invalid state. |
empty | ReactNode | - | Content shown when no options match the current query. |
loadingText | ReactNode | - | Content shown while options are loading. |
placement | 'top' | 'bottom' | Floating content placement relative to the trigger. |
matchTriggerWidth | boolean | true | Matches dropdown width to the trigger width. |
portal | boolean | true | Renders dropdown content through a portal. |
open | boolean | - | Controlled open state. |
defaultOpen | boolean | false | Initial open state for uncontrolled usage. |
onOpenChange | ( | - | Called when the open state changes. |
onSearch | ( | - | Called when the search query changes. |
onClear | ( | - | Called when the clear action is activated. |
startIcon | ReactNode | - | Icon rendered before the selected value. |
endIcon | ReactNode | - | Icon rendered after the selected value. |
prefix | ReactNode | - | Content rendered before the trigger value. |
suffix | ReactNode | - | Content rendered after the trigger value. |
renderValue | ( | - | Custom renderer for the trigger value. |
renderOption | ( | - | Custom renderer for each dropdown option. |
onBlur | FocusEventHandler< | - | Called when the select trigger loses focus. |
onFocus | FocusEventHandler< | - | Called when the select trigger receives focus. |
className | string | - | Class name applied to the root element. |
triggerClassName | string | - | Class name applied to the trigger element. |
dropdownClassName | string | - | Class name applied to the dropdown element. |
value | string | - | Controlled selected value or values. |
defaultValue | string | - | Initial selected value or values for uncontrolled usage. |
onValueChange | ( | - | Called when the selected value or values change. |
Select.Item
| Prop | Type | Default | Description |
|---|---|---|---|
valueRequired | string | - | Controlled selected value or values. |
children | ReactNode | - | Option label or custom option content. |
asChild | boolean | - | Composes item behavior onto a single child element. |
label | string | - | Text label used when children are custom content. |
disabled | boolean | false | Disables selection for this option. |
description | ReactNode | - | Supporting text shown with the option. |
icon | ReactNode | - | Icon shown before the option label. |
badge | ReactNode | - | Badge content shown after the option label. |
shortcut | string | - | Keyboard shortcut hint shown after the option label. |
color | 'primary' | 'primary' | Semantic color palette for the option. |
Select.Trigger
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Custom trigger content. |
className | string | - | Class name applied to the trigger element. |
Select.Value
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Custom value content; defaults to the current selected value text. |
className | string | - | Class name applied to the value wrapper. |
Select.Content
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Custom dropdown content slots. |
className | string | - | Class name applied to the dropdown content. |
Select.Search
| Prop | Type | Default | Description |
|---|---|---|---|
placeholder | string | 'Select...' | Placeholder shown in the search input. |
className | string | - | Class name applied to the search input. |
Select.Group
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Option items rendered inside the group. |
labelRequired | ReactNode | - | Visible group label. |
selectable | boolean | - | Allows selecting all options in the group from the group header. |
selectLabel | ReactNode | - | Accessible label for the group-level select action. |
Select.Label
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Label content for a select group. |
Select.Separator
| Prop | Type | Default | Description |
|---|---|---|---|
children | undefined | - | Select separators do not render children. |
Select.Empty
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Empty state content shown when no options match. |
Select.Loading
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Loading state content shown while options are loading. |
Accessibility
Guidance for accessible usage and interaction.
Accessible naming
Provide a visible label or another accessible name for the select trigger.
labeldescriptionKeyboard interaction
Preserve expected keyboard navigation, focus management, and option selection behavior.
opendefaultOpensearchableSelection state
Keep selected values and expanded state synchronized with the visual interface.
valuedefaultValuemultipleValidation feedback
Associate validation feedback with the control and expose invalid and required state.
errorinvalidrequireddisabled