Select
The Select component is used to get user input.
Installation
Usage
The Select component can be used to create a basic dropdown menu.
Examples
Disabled Select
You can disable the Select component by passing the disabled prop to the SelectTrigger.
Default Value
You can set a default value for the Select component by passing the defaultValue prop to the Select component.
Scrollable
When the content in the Select component exceeds the maximum height, it becomes scrollable, adding ScrollUpButton and ScrollDownButton to help users easily navigate through the options.
Select Animation Variants
The Select component supports two animation variants: zoom, scaleBounce Etc.... You can set the animation variant by passing the variant prop to the SelectContent component.
The animation variants only work when the animation mode is turned on.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The content of the select component. |
| defaultValue | string | - | The default value of the select component. |
| disabled | boolean | false | If true, the select will be disabled. |
| value | string | - | The value of the select component. |
| onValueChange | (value: string) => void | - | Function to call when the value changes. |
| placeholder | string | - | Placeholder text for the select component. |
| variant | 'primary' | 'secondary' | 'primary' | The variant of the select component. |
The Select component is a powerful and flexible dropdown menu that can be used in a variety of scenarios. It supports customization through its various props and can be integrated seamlessly into your application.
Importing Components
The Select component is built using several subcomponents that you can import individually:
SelectSelectGroupSelectValueSelectTriggerSelectContentSelectLabelSelectItemSelectSeparatorSelectScrollUpButtonSelectScrollDownButton
This allows for fine-grained control and customization over the appearance and behavior of the select dropdown.
For more detailed information on each subcomponent and additional examples, please refer to the documentation for each individual component.