Django Toggle Component

Toggle renders a styled <input type='checkbox'> as an on/off switch. Use it for boolean settings or feature flags — it reads and submits as a normal checkbox in Django forms.

Basic Toggle

Preview

Code

<c-lb.toggle />

Checked Toggle

Preview

Code

<c-lb.toggle checked />

Toggle Sizes

Preview

Code

<div class="flex flex-col gap-4">
  <div class="flex items-center gap-2">
    <c-lb.toggle size="xs" />
    <span class="text-sm">Extra Small</span>
  </div>
  <div class="flex items-center gap-2">
    <c-lb.toggle size="sm" />
    <span class="text-sm">Small</span>
  </div>
  <div class="flex items-center gap-2">
    <c-lb.toggle size="md" />
    <span class="text-sm">Medium (default)</span>
  </div>
  <div class="flex items-center gap-2">
    <c-lb.toggle size="lg" />
    <span class="text-sm">Large</span>
  </div>
  <div class="flex items-center gap-2">
    <c-lb.toggle size="xl" />
    <span class="text-sm">Extra Large</span>
  </div>
</div>

Color Variants

Preview

Code

<div class="flex flex-col gap-4">
  <div class="flex items-center gap-2">
    <c-lb.toggle variant="primary" checked />
    <span class="text-sm">Primary</span>
  </div>
  <div class="flex items-center gap-2">
    <c-lb.toggle variant="secondary" checked />
    <span class="text-sm">Secondary</span>
  </div>
  <div class="flex items-center gap-2">
    <c-lb.toggle variant="accent" checked />
    <span class="text-sm">Accent</span>
  </div>
  <div class="flex items-center gap-2">
    <c-lb.toggle variant="neutral" checked />
    <span class="text-sm">Neutral</span>
  </div>
  <div class="flex items-center gap-2">
    <c-lb.toggle variant="info" checked />
    <span class="text-sm">Info</span>
  </div>
  <div class="flex items-center gap-2">
    <c-lb.toggle variant="success" checked />
    <span class="text-sm">Success</span>
  </div>
  <div class="flex items-center gap-2">
    <c-lb.toggle variant="warning" checked />
    <span class="text-sm">Warning</span>
  </div>
  <div class="flex items-center gap-2">
    <c-lb.toggle variant="error" checked />
    <span class="text-sm">Error</span>
  </div>
</div>

Disabled States

Preview

Disabled (unchecked)

Disabled (checked)

Code

<div class="flex flex-col gap-4">
  <div class="flex items-center gap-2">
    <c-lb.toggle disabled />
    <span class="text-sm">Disabled (unchecked)</span>
  </div>
  <div class="flex items-center gap-2">
    <c-lb.toggle disabled checked />
    <span class="text-sm">Disabled (checked)</span>
  </div>
</div>

API Reference

`c-lb.toggle`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply
variant	primary secondary accent neutral info success warning error	-	No	Toggle color variant
size	xs sm md lg xl	`md`	No	Toggle size
checked	boolean	`False`	No	Whether the toggle is initially checked
disabled	boolean	`False`	No	Whether the toggle is disabled
validate	boolean	`False`	No	Enable validation styling