Toggle

A two-state button that can be on or off.

Installation

uvx django_shadcn@latest add toggle

Usage

<c-toggle aria-label="Toggle italic">
    <span class="italic">I</span>
</c-toggle>

The pressed state lives in Alpine and is published as data-state="on" and aria-pressed, so the styling and assistive technology read the same source. Start it pressed with pressed="true".

Examples

Variants

<c-toggle>Default</c-toggle>
<c-toggle variant="outline">Outline</c-toggle>

Sizes

<c-toggle size="sm">Small</c-toggle>
<c-toggle>Default</c-toggle>
<c-toggle size="lg">Large</c-toggle>

Pressed by default

<c-toggle variant="outline" pressed="true">Pressed</c-toggle>

Disabled

<c-toggle variant="outline" disabled>Disabled</c-toggle>