Select
Displays a list of options for the user to pick from—triggered by a button.
Was this example helpful?
Usage#
API Reference#
Select#
This component is based on Radix UI Select.
It also accepts all props of the HTML select
component.
Prop | Type | Default |
---|---|---|
size | "base" | "small" | "base" |
Was this helpful?
Select.Trigger#
The trigger that toggles the select. It's based on Radix UI Select Trigger.
Select.Value#
Displays the selected value, or a placeholder if no value is selected. It's based on Radix UI Select Value.
Select.Group#
Groups multiple items together.
Select.Label#
Used to label a group of items. It's based on Radix UI Select Label.
Select.Item#
An item in the select. It's based on Radix UI Select Item and accepts its props.
Select.Content#
The content that appears when the select is open. It's based on Radix UI Select Content.
Prop | Type | Default |
---|---|---|
position | "item-aligned" | "popper" | "popper" |
sideOffset | number | 8 |
collisionPadding | number | Partial | 24 |
Was this helpful?
Examples#
Small#
Was this example helpful?
Item-Aligned Position#
Was this example helpful?
Disabled#
Was this example helpful?
Grouped Items#
Was this example helpful?
Controlled#
Was this example helpful?