merisia-combobox

<merisia-combobox>

Menu déroulant avec filtrage par saisie de texte. Étend merisia-select avec un champ de recherche qui filtre les options en temps réel. Implémente le pattern ARIA combobox pour une accessibilité optimale.

Démos

Basique

<merisia-combobox id="province" label="Province" name="province"></merisia-combobox>
<script>
  document.getElementById('province').options = [
    { value: 'qc', label: 'Québec' },
    { value: 'on', label: 'Ontario' },
  ];
</script>

Avec groupes d'options

<merisia-combobox id="pays" label="Pays" name="pays" filter-placeholder="Rechercher un pays…"></merisia-combobox>
<script>
  document.getElementById('pays').options = [
    {
      label: 'Amérique du Nord',
      options: [
        { value: 'ca', label: 'Canada' },
        { value: 'us', label: 'États-Unis' },
      ],
    },
  ];
</script>

Avec erreur

Lecture seule

const el = document.querySelector('merisia-combobox');
el.readonly = true;

Propriétés

Hérite de toutes les propriétés de merisia-select.

Propriété	Attribut	Type	Défaut	Description
filterPlaceholder	filter-placeholder	string	'Rechercher…'	Placeholder du champ de saisie pour le filtrage
noResultsText	no-results-text	string	'Aucun résultat'	Texte affiché quand aucune option ne correspond au filtre
Propriétés héritées de merisia-select : `options`, `placeholder`, `show-empty`, `label`, `hint`, `errors`, `name`, `value`, `required`, `disabled`, `width`, `lang`

Accessibilité

Champ de saisie avec role="combobox", aria-expanded, aria-controls
Liste avec role="listbox" et options role="option"
Navigation au clavier : ↓/↑ pour naviguer, Entrée pour sélectionner, Échap pour fermer
Filtrage insensible à la casse et aux accents

Import

import '@merisia-inc/merisia-components/combobox';

Références

USWDS – Combo box