Select Sélection
Introduction
Un contrôle de sélection déroulant personnalisé permettant aux utilisateurs de choisir une ou plusieurs options dans une liste prédéfinie. Ce composant sert d'alternative entièrement accessible, stylable et responsive à l'élément <select> natif du navigateur.
Le composant Select est totalement intégré en tant que bloc select dans le Page Builder, permettant aux auteurs et développeurs de configurer facilement options visuelles, espaces réservés, tailles, sélections multiples et thèmes de couleur directement dans le CMS.
Usage
Ces exemples illustrent comment les éditeurs de contenu lient et structurent des menus déroulants interactifs.
1. Sélection standard d'une option
Une liste déroulante standard à une option permettant de choisir le framework préféré. Comprend un libellé et un texte d'espace réservé personnalisés.
{
"type": "select",
"label": "Framework",
"placeholder": "Select a framework",
"interactive": true,
"items": [
{ "label": "React", "value": "react" },
{ "label": "Solid", "value": "solid" },
{ "label": "Svelte", "value": "svelte", "disabled": true },
{ "label": "Vue", "value": "vue" },
{ "label": "Hono", "value": "hono" }
]
}
2. Sélection multiple avec style personnalisé (variante Surface)
Démontre comment activer plusieurs sélections actives, affichant les étiquettes de déclenchement séparées par des virgules. Présente également une variante visuelle surface distincte.
{
"type": "select",
"label": "CSS Frameworks",
"placeholder": "Choose frameworks",
"multiple": true,
"variant": "surface",
"size": "lg",
"defaultValue": ["panda"],
"interactive": true,
"items": [
{ "label": "Tailwind CSS", "value": "tailwind" },
{ "label": "Panda CSS", "value": "panda" },
{ "label": "Vanilla Extract", "value": "vanilla" }
]
}
3. Sélecteur déroulant désactivé
Montre un élément select temporairement indisponible ou en lecture seule. Cet état désactive toutes les interactions, empêchant l'ouverture ou la focalisation de la liste.
{
"type": "select",
"label": "Language Settings",
"placeholder": "Select Language",
"disabled": true,
"interactive": true,
"items": [
{ "label": "English", "value": "en" },
{ "label": "Deutsch", "value": "de" }
]
}
Props
| Propriété | Type de champ CMS | Défaut | Description / options prises en charge |
|---|---|---|---|
Texte du libellé (label) | string | - | Texte descriptif au-dessus du déclencheur. |
Espace réservé (placeholder) | string | - | Texte fantôme dans le bouton quand rien n'est sélectionné. |
Liste d'options (items) | list | - | Liste d'options avec label, value et disabled optionnel. |
Sélection multiple (multiple) | boolean | false | Active plusieurs options ; le menu reste ouvert. |
Valeur par défaut (defaultValue) | list | - | Valeurs préselectionnées au chargement. |
Désélectionnable (deselectable) | boolean | false | Permet d'effacer la sélection unique par nouveau clic. |
Nom du formulaire (name) | string | - | Attribut name HTML standard pour les soumissions. |
Désactivé (disabled) | boolean | false | Désactive l'interaction et atténue le menu. |
État invalide (invalid) | boolean | false | Active les bordures d'erreur et l'état invalide. |
Variante visuelle (variant) | select | "outline" | Thème de bordure et de remplissage. • Options : "outline", "surface". |
Échelle de taille (size) | select | "md" | Contrôle espacement, padding et taille de police. • Options : "xs", "sm", "md", "lg", "xl". |
Forcer interactif (interactive) | boolean | true | Hydrate le déclencheur et le menu comme îlot interactif. |
Developer Notes & Accessibility
- Îlot d'hydratation : Comme Select nécessite du JavaScript client pour basculer les menus, filtrer les options et lier les touches, il est hydraté par défaut en îlot Preact interactif (
"interactive": true). - Conformité WAI-ARIA : Le composant agit comme une combobox sémantique personnalisée haute fidélité. Le focus reste sur le déclencheur (
role="combobox"), les options sont gérées viaaria-activedescendant,aria-expandedetaria-controls. Les flèches,Home/EndetEscapefonctionnent immédiatement. - Intégration de formulaire : Il émet un
<select>natif masqué avec des<option>correspondants. Les soumissions HTTP POST standard fonctionnent nativement sans sérialisation d'état JS.