Combobox Boîte Combinée
Introduction
Un contrôle de saisie à autocomplétion qui combine une zone de texte avec une liste déroulante (listbox), permettant aux utilisateurs de filtrer et de sélectionner des options dans une liste. Principalement utilisé pour les flux d'options longs, les filtres de plateforme, les étiquettes et la sélection de catégories.
Le composant Combobox est entièrement intégré en tant que bloc interactif combobox dans le Page Builder, permettant aux auteurs de contenu et aux développeurs de configurer facilement les libellés de saisie, les espaces réservés, les listes d'éléments prédéfinies et les paramètres d'interaction directement dans le CMS.
Utilisation
Ces exemples illustrent comment les éditeurs de contenu lient et structurent des composants combobox interactifs.
1. Filtre technologique standard (sélection interactive)
Une combobox recherchable standard préchargée avec des choix, permettant aux utilisateurs de filtrer ou de sélectionner directement leurs options cibles.
{
"type": "combobox",
"label": "Preferred Tech Stack",
"placeholder": "Select a Framework",
"items": [
{ "label": "React", "value": "react" },
{ "label": "Solid", "value": "solid" },
{ "label": "Svelte", "value": "svelte" },
{ "label": "Vue", "value": "vue" },
{ "label": "Hono", "value": "hono" }
],
"interactive": true
}
2. Recherche d'options effaçables (éléments personnalisés)
Comporte une action d'effacement accompagnante, permettant aux utilisateurs de purger les choix sélectionnés en un seul clic. Idéal pour les recherches de plateforme, les emplacements ou les listes de sélection de pays.
{
"type": "combobox",
"label": "Country Selection",
"placeholder": "Search countries...",
"items": [
{ "label": "United States", "value": "us" },
{ "label": "Germany", "value": "de" },
{ "label": "France", "value": "fr" },
{ "label": "United Kingdom", "value": "uk" },
{ "label": "Canada", "value": "ca" }
],
"allowClear": true,
"interactive": true
}
3. Champ de saisie désactivé
Démontre un champ à autocomplétion temporairement verrouillé. Cela préserve les libellés et sélections actuels, mais empêche la saisie, le filtrage ou l'activation du menu déroulant.
{
"type": "combobox",
"label": "Select Database Engine",
"placeholder": "Temporarily unavailable",
"items": [],
"disabled": true,
"interactive": true
}
Propriétés
| Propriété | Type de champ CMS | Défaut | Description / options prises en charge |
|---|---|---|---|
Texte du libellé (label) | string | - | Texte visuel accompagnant positionné au-dessus de la zone de recherche à autocomplétion. |
Espace réservé (placeholder) | string | - | Affiché à l'intérieur de la zone de saisie lorsqu'aucun élément n'est sélectionné. |
Bouton effacer (allowClear) | boolean | false | Lorsque true, rend un bouton d'effacement aligné à la fin à l'intérieur de la zone de texte pour réinitialiser facilement la sélection. |
Désactivé (disabled) | boolean | false | Fige les saisies de recherche de l'utilisateur, les fenêtres contextuelles déroulantes et les activations par clic. |
Liste d'éléments (items) | list | [] | Un tableau ordonné d'entrées d'objet représentant les sélections de liste (voir les sous-propriétés de la liste ci-dessous). |
Propriétés des éléments de liste (items)
| Sous-propriété | Type | Requis | Description |
|---|---|---|---|
Libellé (label) | string | Oui | Nom d'affichage rendu dans les options contextuelles de la liste. |
Valeur (value) | string | Oui | Identifiant de chaîne unique capturé en arrière-plan lors de la sélection d'une option. |
Option désactivée (disabled) | boolean | Non | Atténue/verrouille un seul choix de sélection dans le flux déroulant. |
Notes pour les développeurs et accessibilité
- Hydratation adaptative intelligente (Niveau 2) : Pour optimiser la vitesse de chargement initiale de la page, la Combobox compile en balisage HTML/CSS statique et sans JS lors des chargements serveur, ne téléchargeant les charges utiles JS interactives que lorsque des signaux personnalisés sont fournis ou lorsque
"interactive": trueest explicitement transmis. - Listbox accessibles : Le composant fonctionne en parfait alignement avec les rôles d'accessibilité combobox de WAI-ARIA. Les sauts de focus, les sélections d'options par touches fléchées et les activations au clavier se produisent nativement, prêtes à l'emploi.
- Soumissions de formulaire unifiées : Les valeurs sélectionnées sont directement mappées sur des requêtes POST de formulaire standard, évitant aux développeurs de devoir lier par programmation les états de sélection à une logique de soumission personnalisée globale.