Toggle Component
A fully accessible toggle switch component built with native HTML inputs and Tailwind CSS. Enable binary on/off settings with smooth animations and custom colors. Supports multiple sizes, disabled states, and label integration for settings panels, feature flags, and preference forms.
Toggle components are binary switches that allow users to turn features or settings on and off. Built with native HTML checkbox inputs and enhanced with Tailwind CSS animations, toggles provide an intuitive way to control boolean states. The Frutjam toggle system supports multiple colors, sizes, and disabled states—perfect for settings panels, feature flags, and preference controls.
| Class | Type | Description |
|---|---|---|
| toggle | Base | Animated on/off switch input |
| toggle-xs | Size | Extra small |
| toggle-sm | Size | Small |
| toggle-md | Size | Medium (default) |
| toggle-lg | Size | Large |
| toggle-xl | Size | Extra large |
| toggle-primary | Color | Primary theme color |
| toggle-secondary | Color | Secondary theme color |
| toggle-accent | Color | Accent theme color |
| toggle-neutral | Color | Neutral theme color |
| toggle-info | Color | Info semantic color |
| toggle-success | Color | Success semantic color |
| toggle-warning | Color | Warning semantic color |
| toggle-error | Color | Error semantic color |
Basic Usage
1 2 | <input type="checkbox" class="toggle"> <input type="checkbox" class="toggle" checked> |
1 2 | <input type="checkbox" className="toggle"> <input type="checkbox" className="toggle" checked> |
Toggle Sizes
html
1 2 3 4 5 | <input type="checkbox" class="toggle toggle-xs"> <input type="checkbox" class="toggle toggle-sm"> <input type="checkbox" class="toggle toggle-md"> <input type="checkbox" class="toggle toggle-lg"> <input type="checkbox" class="toggle toggle-xl"> |
Toggle Colors
html
1 2 3 4 5 6 7 8 | <input type="checkbox" class="toggle" checked> <input type="checkbox" class="toggle toggle-primary" checked> <input type="checkbox" class="toggle toggle-secondary" checked> <input type="checkbox" class="toggle toggle-accent" checked> <input type="checkbox" class="toggle toggle-info" checked> <input type="checkbox" class="toggle toggle-success" checked> <input type="checkbox" class="toggle toggle-warning" checked> <input type="checkbox" class="toggle toggle-error" checked> |
Disabled Toggle
html
1 2 | <input type="checkbox" class="toggle" disabled> <input type="checkbox" class="toggle" disabled checked> |
Toggle with Label
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <label class="flex items-center gap-2"> <input type="checkbox" class="toggle toggle-primary" checked> <span>Enable notifications</span> </label> <label class="flex items-center gap-2"> <input type="checkbox" class="toggle toggle-success" checked> <span>Dark mode</span> </label> <label class="flex items-center gap-2"> <input type="checkbox" class="toggle toggle-warning"> <span>Analytics</span> </label> |
Toggle States
Off
On
Disabled
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="flex gap-4 items-center"> <div> <p class="text-sm font-medium mb-2">Off</p> <input type="checkbox" class="toggle toggle-primary"> </div> <div> <p class="text-sm font-medium mb-2">On</p> <input type="checkbox" class="toggle toggle-primary" checked> </div> <div> <p class="text-sm font-medium mb-2">Disabled</p> <input type="checkbox" class="toggle toggle-primary" disabled> </div> </div> |