Formulaires

Bouton radio et interrupteur

nouveauClasses hb-radio hb-switch hb-choices hb-choices--row hb-fieldset hb-legendVuetify 2 v-radio-group + v-radio, v-switch inset denseVuetify 3 v-radio-group + v-radio, v-switch inset

Quand l'utiliser

Radio : un choix exclusif parmi deux à six options visibles, dans un formulaire validé ensuite. Au-delà, une liste déroulante ; si le choix doit se voir en permanence et tient sur une ligne, un contrôle segmenté.
Interrupteur : un réglage qui s'applique immédiatement, sans bouton Enregistrer (alertes, synchronisation automatique). Dans un formulaire validé par un bouton, une case à cocher.

Mode de réception

Pesée à la réception Poids du bon de livraison Import ERP

Alertes

Prévenir quand une DLC approche activé Résumé du soir par e-mail Synchronisation automatique

kg pièce colis

Code

<div class="hb-row" style="align-items:flex-start;gap:var(--space-6)">
  <fieldset class="hb-fieldset">
    <legend>Mode de réception</legend>
    <div class="hb-choices">
      <label class="hb-check-label"><input type="radio" class="hb-radio" name="d-mode" checked> Pesée à la réception</label>
      <label class="hb-check-label"><input type="radio" class="hb-radio" name="d-mode"> Poids du bon de livraison</label>
      <label class="hb-check-label"><input type="radio" class="hb-radio" name="d-mode" disabled> Import ERP</label>
    </div>
  </fieldset>
  <fieldset class="hb-fieldset">
    <legend>Alertes</legend>
    <div class="hb-choices">
      <label class="hb-check-label"><input type="checkbox" class="hb-switch" checked> Prévenir quand une DLC approche <span class="hb-small">activé</span></label>
      <label class="hb-check-label"><input type="checkbox" class="hb-switch"> Résumé du soir par e-mail</label>
      <label class="hb-check-label"><input type="checkbox" class="hb-switch" checked disabled> Synchronisation automatique</label>
    </div>
  </fieldset>
</div>
<div class="hb-choices hb-choices--row">
  <label class="hb-check-label"><input type="radio" class="hb-radio" name="d-unit" checked> kg</label>
  <label class="hb-check-label"><input type="radio" class="hb-radio" name="d-unit"> pièce</label>
  <label class="hb-check-label"><input type="radio" class="hb-radio" name="d-unit"> colis</label>
</div>

Accessibilité

Un groupe de radios est un <fieldset> avec sa <legend> (hb-fieldset) ; tous les radios du groupe partagent le même name. L'interrupteur est un <input type="checkbox"> dans un <label> ; son état se lit aussi en texte (« activé ») quand il change quelque chose d'important. Tailles : 22 px, 28 px en touch ; l'interrupteur fait 40 × 22 px, 52 × 28 px en touch.