Zum Hauptinhalt springen
Frutjam logo Frutjam
v2.2.5
Theme

Checkbox-Komponente

Zuletzt aktualisiert:

Nur CSS-Kontrollkästchen „Tailwind CSS“ mit primären, sekundären, Akzent- und semantischen Farbvarianten. Größen xs-xl, unbestimmter Zustand. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Mit Checkbox-Komponenten können Benutzer eine oder mehrere Optionen aus einem Satz auswählen. Mit nativen HTML-Eingabeelementen erstellt und mit Tailwind CSS erweitert, unterstützen Kontrollkästchen mehrere Größen, Farben und Zustände. Vollständig zugänglich mit Tastaturnavigation und Screenreader-Unterstützung, Kontrollkästchen funktionieren nahtlos in Formularen, Filteroptionen und Berechtigungsverwaltungsschnittstellen.

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
checkboxBaseGestylte Kontrollkästcheneingabe
checkbox-circleStilVollständig kreisförmiges Kontrollkästchen
checkbox-roundedStilMäßig abgerundetes Kontrollkästchen
checkbox-squareStilQuadratisches Kontrollkästchen ohne Rundung
checkbox-disabledModifikatorDeaktivierte Darstellung für Nicht-Eingabeelemente
checkbox-xsGrößeExtra klein
checkbox-smGrößeKlein
checkbox-mdGrößeMittel (Standard)
checkbox-lgGrößeGroß
checkbox-xlGrößeExtra groß
checkbox-2xlGröße2× extra groß
checkbox-primaryFarbePrimäre Designfarbe
checkbox-secondaryFarbeSekundäre Themenfarbe
checkbox-accentFarbeAkzentfarbe des Themas
checkbox-neutralFarbeNeutrale Themenfarbe
checkbox-infoFarbeSemantische Infofarbe
checkbox-successFarbeSemantische Erfolgsfarbe
checkbox-warningFarbeSemantische Warnungsfarbe
checkbox-errorFarbeSemantische Fehlerfarbe

Grundlegende Verwendung

<input type="checkbox" checked="checked" class="checkbox">

<input type="checkbox" checked="checked" className="checkbox">

Kontrollkästchengrößen

html 
1
2
3
4
5
6
<input type="checkbox" checked="checked" class="checkbox checkbox-xs">
<input type="checkbox" checked="checked" class="checkbox checkbox-sm">
<input type="checkbox" checked="checked" class="checkbox checkbox-md">
<input type="checkbox" checked="checked" class="checkbox checkbox-lg">
<input type="checkbox" checked="checked" class="checkbox checkbox-xl">
<input type="checkbox" checked="checked" class="checkbox checkbox-2xl">

Kontrollkästchenfarben

html 
1
2
3
4
5
6
7
8
9
<input type="checkbox" checked="checked" class="checkbox">
<input type="checkbox" checked="checked" class="checkbox checkbox-primary">
<input type="checkbox" checked="checked" class="checkbox checkbox-secondary">
<input type="checkbox" checked="checked" class="checkbox checkbox-accent">
<input type="checkbox" checked="checked" class="checkbox checkbox-info">
<input type="checkbox" checked="checked" class="checkbox checkbox-success">
<input type="checkbox" checked="checked" class="checkbox checkbox-warning">
<input type="checkbox" checked="checked" class="checkbox checkbox-error">
<input type="checkbox" checked="checked" class="checkbox checkbox-neutral">

Deaktivierte Kontrollkästchen

html 
1
2
<input type="checkbox" class="checkbox" disabled="">
<input type="checkbox" class="checkbox" disabled="" checked="checked">

Kontrollkästchenformen

Quadratisches Kontrollkästchen

html 
<input type="checkbox" class="checkbox checkbox-square" checked="checked">

Kontrollkästchen Kreis/Abgerundet

Die beiden Klassen checkbox-circle und checkbox-rounded führen zu demselben visuellen Stil und ermöglichen flexible Namenskonventionen.

html 
1
2
<input type="checkbox" class="checkbox checkbox-circle" checked="checked">
<input type="checkbox" class="checkbox checkbox-rounded" checked="checked">

Kontrollkästchen mit Beschriftungen

html 
1
2
<input type="checkbox" class="checkbox checkbox-circle checkbox-sm" id="newsletter" name="newsletter" checked="checked">
<label for="newsletter">Subscribe to our newsletter</label>

Verwenden Sie Claude Code, Cursor oder einen anderen KI-Editor?

Cherry MCP stellt Ihrem KI-Editor bei Bedarf die genauen Kontrollkästchen-Klassennamen und -Strukturen zur Verfügung. Keine halluzinierten Klassen mehr.

Probieren Sie Cherry MCP