Labels (Labels)

Le composant labels regroupe les <label> précédant les éléments de formulaire (champs texte, listes déroulantes…) qui permettent à l’utilisateur de connaître le type d’information attendu dans le composant associé. Ils se trouvent généralement dans un formulaire. Ce composant seul n’a pas d’intérêt, il est une dépendance de la plupart des composants de formulaire.

Usage

• Un label précise le type d’information demandée sous celui-ci.
• Label pour champs obligatoires / facultatifs :
  • par défaut, tous les champs sont obligatoires.
  • « facultatif » est précisé entre parenthèse suite au label le cas échéant.

Bonnes pratiques

• La 1^re lettre est en majuscule, le reste est en minuscule.
• Le texte doit être court.

Style & code

Standard

Label standard pour un composant de formulaire requis (required). Le style est appliqué par défaut sur les labels dans un site SipaUI. Il est possible de forcer cet affichage avec la classe su-label.

<label for="input1">Label</label>

Facultatif

Label standard pour un composant de formulaire facultatif. Utiliser la classe su-label-complement sur le texte « facultatif ».

<label for="input2">Label<span class="su-label-complement"> (facultatif)</span></label>

Readonly ou inactif

Label standard d’un composant en readonly ou inactif. Classe su-disabled sur le label. Cette classe est dépendante du composant Helpers.

<label for="input3" class="su-disabled">Label</label>

Sur fond sombre

<section class="su-negative">
    <label for="input1">Label</label>
    <label for="input2">Label<span class="su-label-complement"> (facultatif)</span></label>
    <label for="input3" class="su-disabled">Label</label>
</section>