Toggle is a flexible switch component for boolean values. It supports color and size variants, and integrates easily with forms and v-model. Use it for enabling or disabling settings, preferences, or features.
The Toggle components include the following:
The Toggle component provides a styled switch for boolean values, supporting color and size variants, and easy v-model integration.
| Toggle Props | Type | Description |
|---|---|---|
modelValue | any | |
disabled | boolean | Disables the toggle. |
validator | boolean | Adds the |
theme-controller | boolean | When checked, the page's theme will match the toggle's |
color | string | Sets the color theme. Options: |
| neutral | boolean | Sets color to neutral. |
| primary | boolean | Sets color to primary. |
| secondary | boolean | Sets color to secondary. |
| accent | boolean | Sets color to accent. |
| success | boolean | Sets color to success. |
| info | boolean | Sets color to info. |
| warning | boolean | Sets color to warning. |
| error | boolean | Sets color to error. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
| Sets the toggle size. Options: |
| xs | boolean | Sets size to xs. |
| sm | boolean | Sets size to sm. |
| md | boolean | Sets size to md. |
| lg | boolean | Sets size to lg. |
| xl | boolean | Sets size to xl. |
| Toggle 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. |