Composant · Formulaire

MultiSelect

Stable

Sélection multiple avec champ de recherche filtrant, options en liste `listbox`, jetons supprimables pour les valeurs choisies et compteur de sélection.

Frameworks supportés Svelte React

Voir le code (Svelte)

<MultiSelect
  label="Frameworks supportés"
  placeholder="Sélectionner…"
  values={["svelte","react"]}
  selected={["svelte","react"]}
  options={[{"value":"svelte","label":"Svelte"},{"value":"react","label":"React"},{"value":"vue","label":"Vue"},{"value":"angular","label":"Angular"}]}
/>

Exemples

Sélection avec recherche

Membres de l’équipe Filtrez puis cochez les personnes.

Voir le code (Svelte)

<MultiSelect
  label="Membres de l’équipe"
  helperText="Filtrez puis cochez les personnes."
  options={[{"label":"Avery","value":"avery"},{"label":"Bao","value":"bao"},{"label":"Chiara","value":"chiara"},{"label":"Diego","value":"diego"},{"label":"Esme","value":"esme"}]}
  selected={[]}
  placeholder="Sélectionner…"
  searchPlaceholder="Filtrer"
  noResultsLabel="Aucun résultat"
  toggleLabel="Afficher les options"
  removeLabel="Retirer"
/>

Valeurs pré-sélectionnées et option désactivée

Stack technique Svelte TypeScript

Voir le code (Svelte)

<MultiSelect
  label="Stack technique"
  options={[{"label":"Svelte","value":"svelte"},{"label":"TypeScript","value":"ts"},{"label":"Vite","value":"vite"},{"label":"Legacy jQuery","value":"jquery","disabled":true}]}
  selected={["svelte","ts"]}
  placeholder="Sélectionner…"
  searchPlaceholder="Filtrer"
  noResultsLabel="Aucun résultat"
  toggleLabel="Afficher les options"
  removeLabel="Retirer"
/>

État invalide

Régions de déploiement Sélectionnez au moins une région.

Voir le code (Svelte)

<MultiSelect
  label="Régions de déploiement"
  size="sm"
  options={[{"label":"Montréal (ca-mtl)","value":"ca-mtl"},{"label":"Paris (eu-par)","value":"eu-par"},{"label":"Singapore (ap-sgp)","value":"ap-sgp"}]}
  selected={[]}
  errorText="Sélectionnez au moins une région."
  placeholder="Sélectionner…"
  searchPlaceholder="Filtrer"
  noResultsLabel="Aucun résultat"
  toggleLabel="Afficher les options"
  removeLabel="Retirer"
/>

Désactivé

Permissions (verrouillé) Paris (eu-par)

Voir le code (Svelte)

<MultiSelect
  label="Permissions (verrouillé)"
  options={[{"label":"Montréal (ca-mtl)","value":"ca-mtl"},{"label":"Paris (eu-par)","value":"eu-par"},{"label":"Singapore (ap-sgp)","value":"ap-sgp"}]}
  selected={["eu-par"]}
  disabled
  placeholder="Sélectionner…"
  toggleLabel="Afficher les options"
  removeLabel="Retirer"
/>

API

Prop	Type	Default
`options`	`MultiSelectOption[]`	requis
`selected`	`string[]` (`$bindable`)	`[]`
`label`	`string`	optionnel
`helperText`	`string`	optionnel
`errorText`	`string`	optionnel
`invalid`	`boolean`	`false`
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`placeholder`	`string`	`"Select items"`
`searchPlaceholder`	`string`	`"Filter"`
`noResultsLabel`	`string`	`"No results"`
`toggleLabel`	`string`	`"Toggle options"`
`removeLabel`	`string`	`"Remove"`
`listLabel`	`string`	optionnel
`disabled`	`boolean`	`false`
`onchange`	`(selected: string[]) => void`	optionnel
`class`	`string`	optionnel
`...rest`	`HTMLAttributes<HTMLDivElement>` (sauf `class` / `onchange`)	optionnel

MultiSelectOption : { label: string; value: string; disabled?: boolean }

Notes d’usage

`selected` est un tableau de `value` liable ; chaque bascule réémet `onchange(selected)` avec le tableau à jour.

Les libellés d’interface (`placeholder`, `searchPlaceholder`, `noResultsLabel`, `toggleLabel`, `removeLabel`) ont des valeurs anglaises par défaut ; fournissez-les pour localiser.

Une option avec `disabled: true` reste visible mais non sélectionnable.

Tokens utilisés

--st-component-field-gap
--st-component-field-labelText
--st-component-field-helpText
--st-component-field-errorText
--st-component-field-maxWidth
--st-component-control-background
--st-component-control-border
--st-component-control-hoverBorder
--st-component-control-hoverBackground
--st-component-control-radius
--st-component-control-focusRing
--st-component-control-mdHeight
--st-component-dropdown-background
--st-component-dropdown-border
--st-component-dropdown-shadow
--st-component-dropdown-optionHoverBackground
--st-component-popover-zIndex
--st-semantic-surface-subtle
--st-semantic-action-primary
--st-semantic-text-secondary
--st-semantic-feedback-error
--st-radius-pill
--st-motion-fast
--st-motion-easing