Toggle Component
CSS-only Tailwind CSS toggle switch with primary, secondary, accent, and semantic color variants. Sizes xs–xl. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
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.
Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
| Klasa | Typ | Opis |
|---|---|---|
| toggle | Opierać | Animowane wejście włącznika/wyłącznika |
| toggle-xs | Rozmiar | Bardzo mały |
| toggle-sm | Rozmiar | Mały |
| toggle-md | Rozmiar | Średni (domyślny) |
| toggle-lg | Rozmiar | Duży |
| toggle-xl | Rozmiar | Bardzo duży |
| toggle-primary | Kolor | Podstawowy kolor motywu |
| toggle-secondary | Kolor | Kolor motywu drugorzędnego |
| toggle-accent | Kolor | Kolor motywu akcentującego |
| toggle-neutral | Kolor | Neutralny kolor motywu |
| toggle-info | Kolor | Kolor semantyczny informacji |
| toggle-success | Kolor | Sukces semantyczny kolor |
| toggle-warning | Kolor | Ostrzeżenie kolor semantyczny |
| toggle-error | Kolor | Błąd koloru semantycznego |
Podstawowe użycie
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> |
Przełącz rozmiary
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"> |
Przełącz kolory
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> |
Wyłączony przełącznik
html
1 2 | <input type="checkbox" class="toggle" disabled> <input type="checkbox" class="toggle" disabled checked> |
Przełącz za pomocą etykiety
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> |
Przełącz stany
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> |