Formulaires

Sélecteur de quantité

nouveauClasses hb-stepperVuetify 2 pas d'équivalent natif ; v-text-field avec prepend-inner et append icônesVuetify 3 idem

Quand l'utiliser

Pour un entier qu'on ajuste de quelques unités : nombre de colis, de pièces, de copies. Pour un poids ou un prix, un champ numérique avec suffixe ou le pavé numérique sur tablette.

Colis

Au minimum

Code

<div class="hb-row">
  <div class="hb-group"><label class="hb-label" for="st1">Colis</label><div class="hb-stepper"><button type="button" aria-label="Moins">−</button><input id="st1" class="hb-field" value="3" inputmode="numeric"><button type="button" aria-label="Plus">+</button></div></div>
  <div class="hb-group"><label class="hb-label" for="st2">Au minimum</label><div class="hb-stepper"><button type="button" aria-label="Moins" disabled>−</button><input id="st2" class="hb-field" value="0" inputmode="numeric"><button type="button" aria-label="Plus">+</button></div></div>
</div>

Comportement

Les boutons changent la valeur d'un pas ; le bouton qui sortirait des bornes est disabled. Le champ accepte la saisie directe (inputmode="numeric"), se borne à la sortie. Le groupe prend le filet métier au focus de l'un de ses trois éléments. Hauteur --control : 48 px en touch, les boutons suivent.