@synapxlab/multiselect

Démo interactive

Le composant s'attache à un select existant : l'élément natif reste dans le DOM, masqué, et continue de porter la valeur. Chaque carte reproduit un usage courant.

🎯 Pourquoi pas select2 ?

select2 traîne jQuery et un thème à reconstruire à la main pour chaque style. Ce composant reprend l'essentiel sans dépendance runtime.

✨ L'effet de sélection

La case à cocher d'une option est invisible tant qu'elle n'est pas choisie. Au clic, la ligne prend la couleur primaire en bordure, la case apparaît en fondu et le libellé glisse pour lui laisser la place — le tout animé en .3s. Inspiré du composant de formulaire de la plateforme inwink.

📦 Installation

npm install @synapxlab/multiselect

⚡ Démarrage rapide

import { MultiSelect } from '@synapxlab/multiselect';
import '@synapxlab/multiselect/style';

const ms = new MultiSelect(document.querySelector('select[name=attentes]'), {
  searchable: true,
  locale: 'fr',
  onChange(values) {
    console.log('sélection', values);
  },
});

<link rel="stylesheet" href="node_modules/@synapxlab/multiselect/dist/style.css">
<script src="node_modules/@synapxlab/multiselect/dist/multiselect.umd.cjs"></script>
<script>
  const { MultiSelect } = window.SynapxMultiSelect;
  MultiSelect.init('select[data-multiselect]');
</script>

<select name="pays" class="sxms-select">
  <option value="fr">France</option>
</select>

📖 Options

Le composant s'attache à un <select multiple> (chips, recherche, « Tout sélectionner ») ou à un <select> simple (valeur unique, fermeture au choix).

Libellés

Locales intégrées : en et fr. Chaque clé se surcharge par strings.

🔔 Événements & méthodes

Les événements personnalisés remontent sur le select natif, chacun avec detail: { values, instance }. Chaque changement déclenche aussi les événements natifs change et input sur le select : formulaires, bibliothèques de validation et frameworks réagissent comme avec le contrôle natif.

♿ Accessibilité et clavier

• Champ : role="combobox", aria-expanded, aria-haspopup="listbox", aria-controls, aria-disabled. Le clic sur le <label for="..."> du select natif continue d'ouvrir le composant.
• Liste : role="listbox", aria-multiselectable, lignes role="option" avec aria-selected et aria-disabled, aria-activedescendant suit la ligne active depuis le champ de recherche.
• Clavier sur le champ : Entrée / Espace / Flèche bas ouvrent le popover, Retour arrière retire la dernière chip.
• Clavier dans le popover : Flèche haut / Flèche bas déplacent, Entrée / Espace basculent, Échap ferme, Tab ferme et rend le focus, Origine / Fin sautent aux extrémités de la liste.
• Le champ de recherche reçoit le focus à l'ouverture, sauf au tactile, où c'est la liste qui le reçoit pour ne pas ouvrir le clavier virtuel.
• Le focus revient au champ à la fermeture. Un seul popover est ouvert à la fois.

🎨 Thème

Toutes les couleurs et mesures passent par des custom properties, préfixe sxms-. Aucun !important : surchargez les variables dans votre feuille de style. La palette sombre s'applique sous @media (prefers-color-scheme: dark), et sous [data-bs-theme="dark"] ou [data-theme="dark"] sur n'importe quel ancêtre.

Nécessite ES2020, le sélecteur CSS :has() et la propriété CSS translate : Chrome/Edge 105+, Safari 15.4+, Firefox 121+.