shadcn.io is an independent project built on shadcn/ui
A row shows the label Push Notifications, the description Receive notifications on your device, and a switch that starts off. Clicking the label toggles the switch.
Add the description when the label alone does not say what the setting does. A choice saved on submit fits a Checkbox. In Vue, Ark UI toggles when that label is clicked.
Installation
Anatomy
Usage
<Field class="max-w-sm" orientation="horizontal">
<FieldContent>
<FieldLabel>Push Notifications</FieldLabel>
<FieldDescription>Receive notifications on your device</FieldDescription>
</FieldContent>
<Switch />
</Field>FAQ
How are the label, the description and the switch arranged?
A horizontal Field holds a FieldContent, with the FieldLabel and the FieldDescription, and then the Switch. max-w-sm keeps the row from stretching.
Is the description tied to the switch?
The label is: clicking Push Notifications toggles the switch, and screen readers read it as the switch's name.
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.
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.
