Formulaires

Case à cocher

stableClasses hb-check hb-check-label hb-check-touch hb-choicesVuetify 2 v-checkbox dense (habillé), v-simple-checkbox dans un tableauVuetify 3 v-checkbox density="compact"

Quand l'utiliser

Pour une option indépendante (oui / non) ou une sélection multiple. Pour un choix exclusif, un bouton radio ; pour un réglage qui s'applique tout de suite, un interrupteur. Dans une liste de tâches, la case marque la tâche faite.

Imprimer l'étiquette à l'enregistrement Prévenir le fournisseur Import ERP bientôt Taille tactile forcée

Code

<div class="hb-choices">
  <label class="hb-check-label"><input type="checkbox" class="hb-check" checked> Imprimer l'étiquette à l'enregistrement</label>
  <label class="hb-check-label"><input type="checkbox" class="hb-check"> Prévenir le fournisseur</label>
  <label class="hb-check-label"><input type="checkbox" class="hb-check" disabled> Import ERP <span class="hb-small">bientôt</span></label>
  <label class="hb-check-label"><input type="checkbox" class="hb-check hb-check-touch"> Taille tactile forcée</label>
</div>

États et accessibilité

Repos, survol (filet métier, souris seulement), appui (scale(.9)), coché (fond métier, coche blanche), focus (anneau), désactivé (50 %). Toujours un <label> qui enveloppe la case et le texte : toute la ligne est cliquable. Un état indéterminé (sélection partielle dans un tableau) passe par v-checkbox indeterminate ; le bundle n'en a pas.