shadcn.io is an independent project built on shadcn/ui
One switch is on screen and it starts on. There is no visible label. Its accessible name is Wi-Fi.
Use it when the setting should begin enabled, such as a connection that is already on. A later form submit fits a Checkbox. In Vue, Ark UI toggles it with Space and with Enter.
Installation
Anatomy
Usage
<Switch aria-label="Wi-Fi" :defaultChecked="true" />FAQ
How do I control this switch in Vue?
The switch starts on through its default prop, which only sets the starting state; after that it keeps its own state. To control it, keep the on or off state in your own state and pass it back.
The prop is defaultChecked.
Bind it with v-model:checked, or listen to @checked-change, which receives details.checked.
What do screen readers call this switch?
It has no visible label, so the demo passes aria-label (Wi-Fi). Change it to the setting the switch controls, or use a visible FieldLabel instead.
How do I stop people from toggling it?
Disable it. The switch then matches data-disabled, which fades it to half opacity and sets cursor-not-allowed.
Pass disabled.
How do I make this switch smaller?
Set size="sm". The default size is default. For a different track or thumb, edit those classes in the Switch file in your ui folder.
API Reference
Switch
Sets aria-label="Wi-Fi" and defaultChecked. The rest is on the Switch page.
