Select
Displays a list of options for the user to pick from.
components
UiSelect
The select component root.
Example
Props
Name | Type | Description |
---|---|---|
placeholder | ?string | The content that will be rendered when no option is selected |
triggerLeft | ?React.ReactNode | The content that will be rendered on the left side |
variant | ?('default') | The select’s variant |
inputSize | ?('sm' | 'lg' | 'default') | The select’s size. Default is default |
position | ?('item-aligned' | 'popper') | The positioning mode to use, item-aligned is the default and behaves similarly to a native MacOS menu by positioning content relative to the active item. popper positions content in the same way as the <select> element. |
UiSelect.Option
The component that contains the select option.
Example
Props
Name | Type | Description |
---|---|---|
value | string | The option’s value |
disabled | ?boolean | Prevents the user from interacting with the item when it’s true |
UiSelect.Group
Used to group multiple options.
Example
UiSelect.Label
Used to render the label of a group.
UiSelect.Separator
Used to visually separate items in the select.
Example