Formulaires

Champ de saisie

stableClasses hb-field hb-label hb-hint hb-hint-error hb-group hb-suffix hb-prefix hb-clear hb-select hb-field-num hb-field-mono hb-field-touchVuetify 2 v-text-field outlined dense (habillé par vuetify.scss), v-select, v-autocomplete, v-textareaVuetify 3 v-text-field variant="outlined" density="comfortable", v-select, v-autocomplete

Anatomie

Un hb-group empile le libellé (hb-label), le champ et l'aide (hb-hint) ou l'erreur (hb-hint-error). Le champ se voit avant d'être cliqué : filet --line-strong à 3:1 sur la carte.

Intitulé

Quantité

Prix d'achat

€/kg

Hors taxes, par kilo.

EAN

En erreur

La quantité doit être supérieure à zéro.

Désactivé

Remarque

Code

<div class="hb-form" style="max-width:640px">
  <div class="hb-group"><label class="hb-label" for="c1">Intitulé</label><input id="c1" class="hb-field" placeholder="Au repos : filet visible"></div>
  <div class="hb-group"><label class="hb-label" for="c2">Quantité</label><div class="hb-suffix"><input id="c2" class="hb-field hb-field-num" value="12,500"><span>kg</span></div></div>
  <div class="hb-group"><label class="hb-label" for="c3">Prix d'achat</label><div class="hb-suffix"><input id="c3" class="hb-field hb-field-num" value="4,80"><span>€/kg</span></div><div class="hb-hint">Hors taxes, par kilo.</div></div>
  <div class="hb-group"><label class="hb-label" for="c4">EAN</label><input id="c4" class="hb-field hb-field-mono" value="3250390001234"></div>
  <div class="hb-group"><label class="hb-label" for="c5">En erreur</label><input id="c5" class="hb-field" aria-invalid="true" value="0"><div class="hb-hint hb-hint-error">La quantité doit être supérieure à zéro.</div></div>
  <div class="hb-group"><label class="hb-label" for="c6">Désactivé</label><input id="c6" class="hb-field" disabled value="Archivée"></div>
  <div class="hb-group hb-form-full"><label class="hb-label" for="c7">Remarque</label><textarea id="c7" class="hb-field" rows="2" placeholder="Facultatif"></textarea></div>
</div>

Recherche et liste déroulante

hb-prefix pose une icône en tête (recherche, téléphone) et, avec has-clear, un bouton d'effacement en bout. hb-select habille un <select> natif pour un choix court sans recherche ; au-delà d'une dizaine d'options, ou avec recherche, v-select / v-autocomplete.

Produit

Fournisseur

Code

<div class="hb-form" style="max-width:640px">
  <div class="hb-group"><label class="hb-label" for="s1">Produit</label><div class="hb-prefix has-clear"><i class="material-icons">search</i><input id="s1" class="hb-field" value="Moules bouchot" placeholder="Nom, PLU ou EAN"><button class="hb-btn hb-btn-icon hb-clear" aria-label="Effacer"><i class="material-icons">close</i></button></div></div>
  <div class="hb-group"><label class="hb-label" for="s2">Fournisseur</label><div class="hb-select"><select id="s2" class="hb-field"><option>Pomona</option><option>Marée Océane</option><option>Demarne</option></select></div></div>
</div>

Variantes

Classe	Usage
`hb-field-num`	nombre : aligné à droite, chiffres tabulaires, même graisse que les autres valeurs ; avec `hb-suffix`, l'unité suit la valeur à la même taille, en gris
`hb-field-mono`	code, identifiant, SQL : Roboto Mono sur fond en retrait
`hb-field-touch`	48 px hors densité touch
`textarea.hb-field`	plusieurs lignes, redimensionnable verticalement

États et accessibilité

Repos, survol (filet --ink-muted), focus (filet métier + halo --brand-soft), erreur (aria-invalid="true", filet rouge, message dessous lié par aria-describedby), désactivé (fond en retrait). Le libellé est un <label for> ; le placeholder n'est jamais le seul libellé. Les nombres se saisissent avec inputmode="decimal" sur tablette.