Formulaires

Formulaire

nouveauClasses hb-form hb-form-full hb-fieldset hb-legend hb-label-required hb-actionsVuetify 2 v-form + v-row / v-colVuetify 3 v-form + v-row / v-col

Mise en page

hb-form pose une grille à deux colonnes de 16 px d'écart ; hb-form-full étale un champ sur les deux. Sur téléphone (moins de 600 px), tout s'empile. Les champs apparentés se groupent dans un hb-fieldset ; sa légende a exactement le style d'un libellé de champ.

Code

<form class="hb-card" style="max-width:720px" onsubmit="return false">
  <div class="hb-card-h"><h2>Réception de livraison</h2><span class="hb-card-h__sub">Bon n° 48213</span></div>
  <div class="hb-card-body hb-stack" style="gap:var(--space-5)">
    <div class="hb-form">
      <div class="hb-group"><label class="hb-label hb-label-required" for="f1">Fournisseur</label><div class="hb-select"><select id="f1" class="hb-field"><option>Pomona</option><option>Marée Océane</option></select></div></div>
      <div class="hb-group"><label class="hb-label hb-label-required" for="f2">Date de livraison</label><input id="f2" class="hb-field" value="06/11/2026"></div>
      <div class="hb-group"><label class="hb-label" for="f3">Colis</label><div class="hb-stepper"><button type="button" aria-label="Moins">−</button><input id="f3" class="hb-field" value="18" inputmode="numeric"><button type="button" aria-label="Plus">+</button></div></div>
      <div class="hb-group"><label class="hb-label" for="f4">Température à réception</label><div class="hb-suffix"><input id="f4" class="hb-field hb-field-num" value="1,8"><span>°C</span></div></div>
      <div class="hb-group hb-form-full"><label class="hb-label" for="f5">Remarque</label><textarea id="f5" class="hb-field" rows="2"></textarea><div class="hb-hint">Visible sur le bon de livraison.</div></div>
    </div>
    <fieldset class="hb-fieldset"><legend>Contrôles</legend><div class="hb-choices hb-choices--row"><label class="hb-check-label"><input type="checkbox" class="hb-check" checked> Emballages intacts</label><label class="hb-check-label"><input type="checkbox" class="hb-check" checked> Chaîne du froid</label><label class="hb-check-label"><input type="checkbox" class="hb-check"> Écart de poids signalé</label></div></fieldset>
  </div>
  <div class="hb-card-foot"><button type="button" class="hb-btn hb-btn-quiet">Annuler</button><button type="button" class="hb-btn">Brouillon</button><button type="submit" class="hb-btn hb-btn-primary"><i class="material-icons">check</i>Valider la réception</button></div>
</form>

Règles

Une hauteur : champ, liste déroulante, stepper, champ à unité et boutons du pied font tous --control (36 px, 34 px en compact, 48 px en touch). Dans un hb-group, chaque contrôle prend toute la largeur de sa colonne, stepper compris (valeur centrée, − et + aux bords).
Trois tailles de texte, pas plus : le libellé et l'aide ont la même taille (--fs-label = --fs-small) et se distinguent par la graisse et la couleur ; la valeur saisie est au corps du texte, en graisse normale, nombres compris. L'unité d'un hb-suffix suit la valeur, à sa taille, en gris.
Un alignement à gauche : titres, libellés, valeurs texte, aides, cases et le texte du bouton « Annuler » du pied partagent le même bord gauche. Seuls les nombres d'un hb-field-num s'alignent à droite, collés à leur unité.
Les champs requis portent hb-label-required (astérisque rouge) et required ; si presque tout est requis, marquer plutôt les facultatifs dans l'aide (« Facultatif »).
La validation se fait à la soumission, puis champ par champ à la perte de focus ; l'erreur s'affiche sous le champ (hb-hint-error) et le premier champ en erreur reçoit le focus. Une erreur globale (serveur) va dans une alerte en tête du formulaire.
Ordre des colonnes : de gauche à droite puis de haut en bas, l'ordre du DOM. Un champ large (remarque, adresse) prend hb-form-full.
Sur tablette, un formulaire long finit par une barre de validation collée plutôt qu'un pied de carte.