Select
A dropdown for displaying choices.
Examples
Use as a component
Basic example
Initial state set to open
Item 1
Item 2
Item 3
Initial value set to the first option
Disabled example
Trigger an alert on value change
Ignore the internal logic with static property
Use as a composable
Component API
Select
| Prop | Description | Type | Default |
|---|---|---|---|
| component | If the value is false only children of the main component will be rendered | boolean | false |
| isStatic | If true the components becomes a shell and ignores all the internal logic | boolean | false |
| options | Select options | { id: string | number, value: string }[] | [] |
| open | Whether the select dropdown is visible or not | boolean | false |
| disabled | Whether the select is disabled | boolean | false |
| valueProp | Selected value | { id: string | number, value: string } | undefined |
| defaultValue | Initial value | { id: string | number, value: string } | undefined |
| onChange | Triggers when the value is changed | function | (value: { id: string | number, value: string }) => {} |
| onInputClick | Triggers when the input is clicked | function | () => {} |
Select Input
| Prop | Description | Type | Default |
|---|---|---|---|
| value | Selected value | { id: string | number, value: string } | undefined |
| onClick | Triggers when the input is clicked | function | () => {} |
| disabled | Whether the select is disabled | boolean | false |
Select Dropdown
| Prop | Description | Type | Default |
|---|---|---|---|
| open | Whether the select dropdown is visible or not | boolean | false |
Select Option
| Prop | Description | Type | Default |
|---|---|---|---|
| onClick | Triggers when the item is clicked | function | () => {} |
| selected | Whether the option is selected | boolean | false |