Composant

Formulaires

Champs texte, zones de texte, listes déroulantes et barre de recherche. Chaque champ est associé à un <label> pour rester accessible.

Champ texte

Structure complète : .lumy-field contient un .lumy-label, un .lumy-input et un .lumy-help optionnel.

Utilisez votre adresse professionnelle.

<div class="lumy-field">
    <label class="lumy-label" for="email">
        Adresse e-mail
    </label>

    <input
        class="lumy-input"
        id="email"
        type="email"
        placeholder="prenom@lumycorp.com"
    >

    <p class="lumy-help">
        Utilisez votre adresse professionnelle.
    </p>
</div>
HTML

État d'erreur

Ajoute aria-invalid="true" sur le champ et un .lumy-error juste en dessous.

8 caractères minimum requis.

<div class="lumy-field">
    <label class="lumy-label" for="password">
        Mot de passe
    </label>

    <input
        class="lumy-input"
        id="password"
        type="password"
        aria-invalid="true"
        aria-describedby="password-error"
    >

    <p class="lumy-error" id="password-error">
        8 caractères minimum requis.
    </p>
</div>
HTML

Zone de texte

<div class="lumy-field">
    <label class="lumy-label" for="message">
        Description
    </label>

    <textarea
        class="lumy-textarea"
        id="message"
        placeholder="Détaillez votre message…"
    ></textarea>
</div>
HTML

Liste déroulante

<div class="lumy-field">
    <label class="lumy-label" for="type">
        Type de retour
    </label>

    <select class="lumy-select" id="type">
        <option>Anomalie</option>
        <option>Suggestion</option>
        <option>Autre</option>
    </select>
</div>
HTML

Barre de recherche

Groupe .lumy-search combinant un champ sans bordure propre et un bouton d'action.

HTML

Case à cocher

<label>
    <input type="checkbox" checked>
    Inclure les métadonnées de la recherche en cours
</label>
HTML

Accessibilité

  • Chaque champ possède un <label> lié par for/id.
  • Les champs invisibles (ex. barre de recherche) utilisent .lumy-sr-only plutôt qu'une absence de label.
  • Les messages d'erreur sont reliés via aria-describedby.