shadcn.io is an independent project built on shadcn/ui
A bordered card shows a bell emoji, the label Notifications, the line A short description goes here, and a switch that starts off.
The emoji gives each setting its own cue when you have a stack of cards. A divided list is lighter. Submit-later choices fit a Checkbox. In Svelte, Ark UI keeps this switch off until someone turns it on.
Installation
Anatomy
Usage
<div class="flex items-start gap-3 rounded-lg border bg-background p-4"><div class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-linear-to-br from-primary to-primary/60"><span aria-hidden="true" class="text-lg">🔔</span></div><Field class="flex-1" orientation="horizontal"><FieldContent><FieldLabel class="font-medium">Notifications</FieldLabel><FieldDescription>A short description goes here.</FieldDescription></FieldContent><Switch /></Field></div>FAQ
How is the bell drawn on the card?
A span with text-lg shows the bell emoji inside a size-10 rounded-lg tile with bg-linear-to-br from-primary to-primary/60. The emoji has aria-hidden, since the label already says Notifications. The card is flex items-start gap-3 rounded-lg border bg-background p-4.
How is Notifications tied to the switch?
A horizontal Field holds a FieldContent, with the FieldLabel and the FieldDescription, and then the Switch.
The Field links the label to the switch, so this file sets no ids.
How do I control this switch in Svelte?
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.
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.
