Select
Lets users select one option from a list. Ideal for forms, settings, or any interface where a single choice is required.
Default
Trigger Slots
Trigger has only Prefix and suffix slots.
Option Slot
Props
| Name | Default | Type |
|---|---|---|
size | "sm" | "sm" | "md" | "lg" Size of the select input |
variant | "subtle" | "subtle" | "outline" | "ghost" Visual style of the select input |
placeholder | "Select option" | string Placeholder text displayed when no option is selected |
disabled | - | boolean If true, disables the select input |
id | - | string Optional HTML id for the select element |
modelValue | - | ((string | number) & String) The currently selected value (controlled) |
options | - | SelectOption[] Options to display in the dropdown |
Slots
| Slot | Payload |
|---|---|
prefix | - Content rendered before the selected value (e.g., left icon or custom content) |
suffix | - Content rendered after the selected value (e.g., right icon or custom content) |
option | { option: SelectOption; } Custom rendering for each dropdown option |
footer | - Custom content at the bottom of the dropdown |
Emit Events
| Event | Payload |
|---|---|
update:modelValue | [value: String | undefined] |