Select produces a prettier HTML select. It supports arrays of strings, numbers, or objects, and offers customization for value, label, color, size, and more. Easily integrates with forms and supports disabled states, custom option rendering, and grouped styles.
The Select components include the following:
The Select component provides a styled dropdown input supporting arrays of strings, numbers, or objects, with flexible value and label customization, color and size variants, and disabled and ghost states.
| Select Props | Type | Description |
|---|---|---|
modelValue | any | |
options | Array | An array of strings, numbers, or objects to display as options. |
value | function | Function to extract the value from each option object. |
label | function | Function to extract the label from each option object. |
resultAsObject | boolean | Emits the entire object instead of just the value. |
join | boolean | Use inside Join to group items together. |
ghost | boolean | Makes the select transparent until focused. |
disabled | boolean | Disables the select input. |
color | string | Sets the color theme. Options: |
| primary | boolean | Sets color to primary |
| secondary | boolean | Sets color to secondary |
| accent | boolean | Sets color to accent |
| info | boolean | Sets color to info |
| success | boolean | Sets color to success |
| warning | boolean | Sets color to warning |
| error | boolean | Sets color to error |
size | 'xl' | 'lg' | 'md' | 'sm' | 'xs'
| Sets the select size. Options: |
| xl | boolean | Sets size to xl |
| lg | boolean | Sets size to lg |
| md | boolean | Sets size to md |
| sm | boolean | Sets size to sm |
| xs | boolean | Sets size to xs |
validator | boolean | Adds the |
| Select Events | Arguments | Description |
|---|---|---|
update:modelValue |
The ValidatorHint component provides a styled container for validation messages or hints, often used in conjunction with form validation.
| ValidatorHint Slots | Description |
|---|---|
default | Displays the validation message or hint text. |
Select components with different color variants.
Using custom value and label extraction functions.
A disabled select component.
A select with ghost (transparent) style.
Handling null and disabled option values.
{
"value": null,
"label": "No Song Selected"
}Options as objects with custom value and label.
Emitting the entire object as the value.
{
"value": "1",
"label": "Homer"
}Different select sizes.