Switch

Installation

uvx django_shadcn@latest add switch

Usage

<c-switch name="notifications" checked />

The switch is a real <input type="checkbox"> wrapped in the label that draws it. It submits with the form, reaches the field through name, and answers to the keyboard without any JavaScript.

Examples

Sizes

<c-switch size="sm" />
<c-switch />

With a label

<label class="flex items-center gap-3">
    <c-switch name="marketing" />
    <span class="text-sm font-medium">Send me product updates</span>
</label>

Disabled

<c-switch disabled />
<c-switch checked disabled />

Notes

Radix renders a button and mirrors the state into data-state. Here the checked state lives in the input itself, and the styling reads it with has-[:checked] on the wrapper and group-has-[:checked] on the thumb. The practical difference is that this one is a form control: no hidden field, no JavaScript, and checked works the way it does anywhere else.