shadcn.io is an independent project built on shadcn/ui
The switch comes first and starts off. The label Airplane Mode sits beside it. Clicking the label toggles the switch, and the name is read with it.
Use a visible label for most single settings. An icon-only switch needs an accessible name instead. A choice that submits with a form fits a Checkbox. In Vue, Ark UI toggles this switch with Space and with Enter.
Installation
Anatomy
Usage
<Field class="w-fit" orientation="horizontal">
<Switch />
<FieldLabel>Airplane Mode</FieldLabel>
</Field>FAQ
Why does Airplane Mode toggle the switch?
The Switch and a FieldLabel sit in a horizontal Field with w-fit.
The Field links the label to the switch, so this file sets no ids.
How do I control this switch in Vue?
Nothing in this file sets the on state, so the switch starts off and keeps its own state. To control it, keep the on or off state in your own state and pass it back. To start it on, use the default prop.
The prop is defaultChecked.
Bind it with v-model:checked, or listen to @checked-change, which receives details.checked.
Should this be a Switch or a Checkbox?
Use a Switch for a setting that takes effect at once. Use a Checkbox for a choice that is submitted later with a form, or when several options can be picked in a list.
Does this switch submit with a form?
Give it a name. When on, it submits its value, which defaults to on. When off, it submits nothing.
API Reference
Field
Sets orientation="horizontal". The rest is on the Field page.
Switch
No extra props in this demo. The rest is on the Switch page.
