Liste déroulante
La liste déroulante partagée rend un libellé visible, une description facultative et un élément <select> natif à partir d’enregistrements d’options. Son shortcode permet à la documentation d’utiliser le même partiel que les gabarits.
Exemple#
Choisissez la fréquence de réception du résumé.
Quand l’utiliser#
- Utilisez une liste déroulante quand la personne choisit une option dans une liste trop longue pour une rangée de contrôles visibles
- Préférez des filtres ou des boutons radio quand les options sont peu nombreuses; les choix visibles se balaient plus vite qu’une liste repliée
- Pas pour la navigation — une liste qui change de page à la sélection surprend les personnes au clavier
Implémentation#
{{ partial "select.html" (dict
"id" "frequence-mise-a-jour"
"name" "frequence"
"label" "Fréquence des mises à jour"
"description" "Choisissez la fréquence de réception du résumé."
"selected" "hebdomadaire"
"options" (slice
(dict "value" "quotidienne" "label" "Quotidienne")
(dict "value" "hebdomadaire" "label" "Hebdomadaire")
(dict "value" "mensuelle" "label" "Mensuelle")
)
) }}Le partiel rend la structure du champ sans ajouter de JavaScript. Le navigateur fournit l’utilisation au clavier, la validation et le sélecteur de la plateforme. Les pages Markdown utilisent le shortcode de liste déroulante.
Options#
| Option | Rôle |
|---|---|
id | Identifiant unique obligatoire utilisé par le libellé et la description facultative |
name | Nom du champ soumis; reprend id par défaut |
label | Libellé visible obligatoire |
description | Texte d’aide facultatif relié par aria-describedby |
options | Liste obligatoire d’enregistrements value, label, selected et disabled |
selected | Valeur sélectionnée lorsqu’aucun enregistrement d’option ne définit selected |
required | Ajoute la validation native de champ obligatoire |
disabled | Désactive le contrôle complet |
autocomplete | Jeton facultatif de remplissage automatique du navigateur |
Manifeste d’interface
- Nature
- Composant
- Catégorie
- Action
- Statut
- Implémenté
- Implémentation
- Partial:
layouts/partials/select.htmlShortcode:layouts/shortcodes/select.htmlCSS:assets/css/site.css - Interfaces liées
- Liste déroulante
Accessibilité#
- Le
<label>visible pointe vers l’élément<select>natif grâce aux valeursforetidcorrespondantes - La description facultative est associée par programme au moyen de
aria-describedby - Le comportement clavier natif et les sélecteurs mobiles restent intacts, car le composant ne reconstruit pas le contrôle avec des éléments personnalisés
- Les états obligatoire, désactivé et sélectionné emploient les attributs HTML natifs