Nur CSS-Tailwind-CSS-Kippschalter mit primären, sekundären, Akzent- und semantischen Farbvarianten. Größen xs-xl. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.
Toggle-Komponenten sind binäre Schalter, mit denen Benutzer Funktionen oder Einstellungen ein- und ausschalten können. Mit nativen HTML-Checkbox-Eingaben erstellt und mit Tailwind-CSS-Animationen erweitert, bieten Umschalter eine intuitive Möglichkeit, boolesche Zustände zu steuern. Das Frutjam-Umschaltsystem unterstützt mehrere Farben, Größen und Deaktivierungszustände – perfekt für Einstellungsfelder, Funktionsflags und Einstellungssteuerungen.
Nur CSS, kein JavaScript erforderlich. WCAG AA zugänglich und Framework-unabhängig – funktioniert mit Django, HTMX, Laravel, React und jedem Stack.
| Klasse | Typ | Beschreibung |
|---|---|---|
| toggle | Base | Animierter Ein-/Ausschalter-Eingang |
| toggle-xs | Größe | Extra klein |
| toggle-sm | Größe | Klein |
| toggle-md | Größe | Mittel (Standard) |
| toggle-lg | Größe | Groß |
| toggle-xl | Größe | Extra groß |
| toggle-primary | Farbe | Primäre Designfarbe |
| toggle-secondary | Farbe | Sekundäre Themenfarbe |
| toggle-accent | Farbe | Akzentfarbe des Themas |
| toggle-neutral | Farbe | Neutrale Themenfarbe |
| toggle-info | Farbe | Semantische Infofarbe |
| toggle-success | Farbe | Semantische Erfolgsfarbe |
| toggle-warning | Farbe | Semantische Warnungsfarbe |
| toggle-error | Farbe | Semantische Fehlerfarbe |
Grundlegende Verwendung
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> |
Größen umschalten
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"> |
Farben umschalten
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> |
Deaktivierter Umschalter
1 2 | <input type="checkbox" class="toggle" disabled> <input type="checkbox" class="toggle" disabled checked> |
Mit Beschriftung umschalten
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> |
Zustände umschalten
Off
On
Disabled
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> |
Verwenden Sie Claude Code, Cursor oder einen anderen KI-Editor?
Cherry MCP stellt Ihrem KI-Editor bei Bedarf die genauen Umschalten-Klassennamen und -Strukturen zur Verfügung. Keine halluzinierten Klassen mehr.