Select
Selects are fields where the user can choose from a pre-defined set up options. They are used in forms, status updates, search fields, and more. They are a fundamental component used across applications as a key user interaction point.
Examples
Default
Default Select.
Labeled Select
Add a label by passing the label prop to the component.
Add a helper by passing the helper prop to the component.
Mark as required by passing the required prop to the component.
Hint Input
Add a hint by passing the hint prop to the component.
Add an icon to the hint by passing the showHintIcon prop to the component.
Prices are low for this season
Prices are low for this season
Error Select
Display in error state by passing the error prop to the component.
Combine with the hint and showHint props to show an error message.
Hint text content
Options
Change the options shown in the select by passing the options prop to the component.
Each option takes in the value, label, description, disabled, iconLeading, suffix.
Hint text content
Installation
Properties
For more advanced usage, see https://www.radix-ui.com/primitives/docs/components/select (opens in a new tab).
Placeholder displayed when no option is selected.
Toggle whether the Select is required. Note, this only adds a visual indicator.
Label displayed above the Select.
Additional helper text displayed to the right of the label. Only shown when label is set.
Hint text, displayed to the below the Select.
Toggle whether to display info icon next to the hint. Only shown when hint is set. ======= Select placeholder,
displayed when no option is selected.
Whether the select is disabled.
Whether the select is required, note that this only adds a visual indicator.
Whether there is an error in the select, note that this only adds a visual indicator. This also affects the styling of the label and hint.
Classname to style the container of the select.
Classname to style the select trigger.
Toggle whether the Select is disabled.
Whether there is an error in the Select. Note, this only adds a visual indicator. This also affects the styling of the label and hint.
Classname to style the container of the Select.
Classname to style the select trigger.