shadcn.io is an independent project built on shadcn/ui
One switch is on screen, off, with square corners on the track and the thumb. There is no visible label. Its accessible name is Enable feature.
Use the square track when the rest of the surface is square too. The usual switch is fully rounded. A saved form choice fits a Checkbox. In Solid, Ark UI still toggles it with Space and with Enter.
Installation
Anatomy
Usage
<Switch aria-label="Enable feature" class="rounded-sm **:data-[slot=switch-thumb]:rounded" />FAQ
How are the corners squared off?
The Switch sets rounded-sm for the track and **:data-[slot=switch-thumb]:rounded for the thumb. The thumb is the part with data-slot="switch-thumb", so the selector reaches it on every library.
How do I make every switch square?
Edit the Switch file in your ui folder: replace rounded-full on the track and the thumb there. Then you don't repeat the classes on each switch.
How do I control this switch in Solid?
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.
Pass checked; onCheckedChange receives details.checked.
What do screen readers call this switch?
It has no visible label, so the demo passes aria-label (Enable feature). Change it to the setting the switch controls, or use a visible FieldLabel instead.
API Reference
Switch
Sets aria-label="Enable feature". The rest is on the Switch page.
