Boutons radio CSS Tailwind uniquement en CSS avec variantes de couleurs primaires, secondaires, accentuées et sémantiques. Tailles xs-xl. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Les composants de boutons radio permettent aux utilisateurs de sélectionner exactement une option parmi un ensemble de choix mutuellement exclusifs. Construits avec des éléments d'entrée HTML natifs et améliorés avec Tailwind CSS, les boutons radio prennent en charge plusieurs tailles, couleurs et états. Accessibles et navigables au clavier, les radios sont idéales pour la sélection des préférences, le filtrage et les questions à choix unique.
CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
| Classe | Taper | Description |
|---|---|---|
| radio | Base | Entrée de bouton radio stylisé |
| radio-circle | Style | Radio entièrement circulaire (par défaut) |
| radio-rounded | Style | Radio moyennement arrondie |
| radio-square | Style | Radio carrée sans arrondi |
| radio-disabled | Modificateur | Apparence désactivée pour les éléments non saisis |
| radio-xs | Taille | Très petit |
| radio-sm | Taille | Petit |
| radio-md | Taille | Moyen (par défaut) |
| radio-lg | Taille | Grand |
| radio-xl | Taille | Très grand |
| radio-2xl | Taille | 2× très grand |
| radio-primary | Couleur | Couleur du thème principal |
| radio-secondary | Couleur | Couleur du thème secondaire |
| radio-accent | Couleur | Couleur du thème d'accentuation |
| radio-neutral | Couleur | Couleur du thème neutre |
| radio-info | Couleur | Couleur sémantique de l'information |
| radio-success | Couleur | Couleur sémantique du succès |
| radio-warning | Couleur | Couleur sémantique d’avertissement |
| radio-error | Couleur | Couleur sémantique des erreurs |
Utilisation de base
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"> |
Tailles des radios
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"> |
Couleurs radio
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 désactivée
1 2 | <input type="radio" class="radio" disabled=""> <input type="radio" class="radio" disabled="" checked="checked"> |
Formes radio
Radio carrée
<input type="radio" name="shape-demo" class="radio radio-square" checked="checked"> |
Radio arrondie ou circulaire
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 avec étiquette
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> |
Vous utilisez Claude Code, Cursor ou un autre éditeur d'IA ?
Cherry MCP donne à votre éditeur d'IA les noms et la structure exacts des classes Radio sur demande. Fini les cours hallucinés.