Nur CSS Tailwind CSS-Optionsfelder 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.
Mit Optionsfeldkomponenten können Benutzer genau eine Option aus einer Reihe sich gegenseitig ausschließender Optionen auswählen. Mit nativen HTML-Eingabeelementen erstellt und mit Tailwind CSS erweitert, unterstützen Optionsfelder mehrere Größen, Farben und Zustände. Radios sind zugänglich und über die Tastatur navigierbar und eignen sich ideal für die Präferenzauswahl, Filterung und Single-Choice-Formularfragen.
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 |
|---|---|---|
| radio | Base | Gestylte Optionsfeldeingabe |
| radio-circle | Stil | Vollständig kreisförmiges Radio (Standard) |
| radio-rounded | Stil | Mäßig abgerundetes Radio |
| radio-square | Stil | Quadratisches Radio ohne Rundung |
| radio-disabled | Modifikator | Deaktivierte Darstellung für Nicht-Eingabeelemente |
| radio-xs | Größe | Extra klein |
| radio-sm | Größe | Klein |
| radio-md | Größe | Mittel (Standard) |
| radio-lg | Größe | Groß |
| radio-xl | Größe | Extra groß |
| radio-2xl | Größe | 2× extra groß |
| radio-primary | Farbe | Primäre Designfarbe |
| radio-secondary | Farbe | Sekundäre Themenfarbe |
| radio-accent | Farbe | Akzentfarbe des Themas |
| radio-neutral | Farbe | Neutrale Themenfarbe |
| radio-info | Farbe | Semantische Infofarbe |
| radio-success | Farbe | Semantische Erfolgsfarbe |
| radio-warning | Farbe | Semantische Warnungsfarbe |
| radio-error | Farbe | Semantische Fehlerfarbe |
Grundlegende Verwendung
1 2 | <input type="radio" name="radio-1" class="radio" checked="checked"> <input type="radio" name="radio-1" class="radio"> |
1 2 | <input type="radio" name="radio-1" className="radio" checked="checked"> <input type="radio" name="radio-1" className="radio"> |
Radiogrößen
1 2 3 4 5 | <input type="radio" name="radio-sizes" class="radio radio-xs" checked="checked"> <input type="radio" name="radio-sizes" class="radio radio-sm" checked="checked"> <input type="radio" name="radio-sizes" class="radio radio-md" checked="checked"> <input type="radio" name="radio-sizes" class="radio radio-lg" checked="checked"> <input type="radio" name="radio-sizes" class="radio radio-xl" checked="checked"> |
Radiofarben
1 2 3 4 5 6 7 8 9 | <input type="radio" name="radio-colors" class="radio" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-primary" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-secondary" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-accent" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-info" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-success" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-warning" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-error" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-neutral" checked="checked"> |
Radio deaktiviert
1 2 | <input type="radio" class="radio" disabled=""> <input type="radio" class="radio" disabled="" checked="checked"> |
Radioformen
Quadratisches Radio
<input type="radio" name="shape-demo" class="radio radio-square" checked="checked"> |
Abgerundetes oder kreisförmiges Radio
1 2 | <input type="radio" name="shape-demo2" class="radio radio-circle" checked="checked"> <input type="radio" name="shape-demo2" class="radio radio-rounded" checked="checked"> |
Radio mit Etikett
1 2 3 4 5 6 7 8 | <input type="radio" class="radio radio-circle radio-neutral radio-sm" id="size-small" name="size" value="small"> <label for="size-small">Small</label> <input type="radio" class="radio radio-circle radio-neutral radio-sm" id="size-medium" name="size" value="medium"> <label for="size-medium">Medium</label> <input type="radio" class="radio radio-circle radio-neutral radio-sm" id="size-large" name="size" value="large"> <label for="size-large">Large</label> |
Verwenden Sie Claude Code, Cursor oder einen anderen KI-Editor?
Cherry MCP stellt Ihrem KI-Editor bei Bedarf die genauen Radio-Klassennamen und -Strukturen zur Verfügung. Keine halluzinierten Klassen mehr.