Bouton radio

Choix unique parmi plusieurs options mutuellement exclusives.

Exemple

Type de demande
Civilité
Tarif
<fieldset class="bj-radio-group">
  <legend class="bj-radio-group__legend">Type de demande</legend>
  <label class="bj-radio">
    <input type="radio" name="demande" value="nouvelle" checked />
    <span class="bj-radio__label">Nouvelle demande</span>
  </label>
  <label class="bj-radio">
    <input type="radio" name="demande" value="renouv" />
    <span class="bj-radio__label">Renouvellement</span>
  </label>
</fieldset>

<fieldset class="bj-radio-group bj-radio-group--inline">
  <legend class="bj-radio-group__legend">Civilité</legend>
  <label class="bj-radio">
    <input type="radio" name="civ" value="m" />
    <span class="bj-radio__label">M.</span>
  </label>
  <label class="bj-radio">
    <input type="radio" name="civ" value="f" />
    <span class="bj-radio__label">Mme</span>
  </label>
</fieldset>

<code>name</code>, <code>value</code> et choix sélectionné

Toutes les options d’un même ensemble partagent le même name. Chaque option a un value distinct. L’option sélectionnée porte checked.

Mode de réception

Variantes

bj-radio-group--inline pour aligner les options sur une ligne lorsque les libellés sont courts.

Classes CSS

ClasseDescription
bj-radio-groupGroupe vertical.
bj-radio-group--inlineGroupe horizontal.
bj-radio-group__legendQuestion posée.
bj-radioLabel englobant.
bj-radio__labelTexte du choix.
bj-radio__hintAide.
(input radio)Bouton : <code>type="radio"</code>, <code>name</code>, <code>value</code>, <code>checked</code>, <code>disabled</code>.

Accessibilité

Même attribut name pour toutes les options d’un ensemble.