Radio Component
CSS-only Tailwind CSS radio buttons with primary, secondary, accent, and semantic color variants. Sizes xs–xl. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
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
html
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
html
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
html
1 2 | <input type="radio" class="radio" disabled=""> <input type="radio" class="radio" disabled="" checked="checked"> |
Formes radio
Radio carrée
html
<input type="radio" name="shape-demo" class="radio radio-square" checked="checked"> |
Radio arrondie ou circulaire
html
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
html
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> |