A switch control for boolean settings that take immediate effect — no confirmation required.
Preview
Code
VUE
<Toggle>
Enable notifications
</Toggle>Props
Text label displayed next to the toggle
Whether the toggle is in the on state
Size of the control
Prevents user interaction
Secondary descriptive text below the label
Props API
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
label | string | "Enable notifications" | — | Text label displayed next to the toggle |
checked | boolean | false | — | Whether the toggle is in the on state |
size | select"sm" | "md" | "lg" | "md" | — | Size of the control |
disabled | boolean | false | — | Prevents user interaction |
description | string | "" | — | Secondary descriptive text below the label |
Usage
Use toggles only for settings that apply immediately without a save action. For anything requiring confirmation — or in a form that needs to be submitted — use a Checkbox instead.
Accessibility
Uses role="switch" with aria-checked to communicate state to screen readers.
Keyboard accessible — Space or Enter toggles the state.
The visible label is always associated with the control via aria-labelledby.