Select groups organization
Use SelectGroup, SelectLabel, and SelectSeparator components to organize items into grouped sections within the select dropdown.
shadcn/ui · Components · all subjects
select/variants
10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Select scrollable variant
The Select component supports a scrollable variant for handling many items that exceed the visible area.
Select searchable implementation
To add search support to the Select component, use the Autocomplete component from React Aria instead, as documented in the React Aria Autocomplete component.
Select disabled state
The Select component supports a disabled state.
Select scrollable variant
A Select can display many items that scroll when the list exceeds the available space.
Select invalid state implementation
Here is how to implement an invalid state on a Select: ```tsx <Field data-invalid> <FieldLabel>Fruit</FieldLabel> <SelectTrigger aria-invalid> <SelectValue /> </SelectTrigger> </Field> ``` This example wraps the SelectTrigger in a Field component with the data-invalid attribute and adds aria-invalid to the SelectTrigger to indicate an error state.
Select item alignment variants
Two alignment positions are available: item-aligned (default) positions the popup so the selected item appears over the trigger, and popper positions the popup to align with the trigger edge.
Select scrollable variant
A Select component can be configured to scroll when it contains many items, allowing users to browse through a long list of options.
Select disabled state
A Select component can be rendered in a disabled state.
Select invalid error state
To show an error state on a Select, add the data-invalid attribute to the Field component wrapper and add the aria-invalid attribute to the SelectTrigger component.