Radios
Un choix parmi plusieurs options mutuellement exclusives, toutes visibles.
Sur cette page
Playground
Disposition
État
Fond
<fieldset class="feitio-fieldset"><legend class="feitio-label">À quelle fréquence ?</legend><div class="feitio-choices"><label class="feitio-choice"><input type="radio" name="pg-r" value="Chaque jour">Chaque jour</label><label class="feitio-choice"><input type="radio" name="pg-r" value="Chaque semaine" checked>Chaque semaine</label><label class="feitio-choice"><input type="radio" name="pg-r" value="Chaque mois">Chaque mois</label></div></fieldset>Quand l'utiliser
- Pour sélectionner exactement un parmi deux à six options.
Quand ne pas l'utiliser
- Beaucoup d'options : Sélectionner.
- Plusieurs choix : Case à cocher.
- Deux ou trois options voisines qui changent l'affichage immédiatement (jour et nuit, une liste ou un grille) : SegmentedControl.
Exemples
Fréquence ?
L'une sous l'autre, dans un Fieldset avec la question.
Afficher le code
<fieldset class="feitio-fieldset">
<legend class="feitio-label">Com que frequência?</legend>
<div class="feitio-choices">
<label class="feitio-choice"><input type="radio" name="frequencia" value="uma-vez">Uma vez</label>
…
</div>
</fieldset>États
Faire et ne pas faire
Do
L'un sous l'autre, et aucun non pré-sélectionné lorsque le choix importe.
Don’t
Des options entassées sur une seule ligne : difficile de voir quel cercle appartient à quel texte.
Accessibilité
- Toujours dans un Fieldset avec un titre ; les flèches directionnelles se déplacent entre les options.
- Côté à côté uniquement pour deux options courtes, comme « Oui » et « Non ».
Attributs
| Attribut | Valeurs | Pour quoi |
|---|---|---|
class="feitio-choices" | autour | space-2 entre les options. |
class="feitio-choice" | sur la <label> | Cercle et texte cliquables ensemble. |
name | le même partout | Un choix par groupe. |
checked | — | Seulement s'il y a un défaut raisonnable. |