Composant · Formulaire

Combobox

Stable

Champ texte avec autocomplete, liste filtrée et raccourcis clavier pour aller rapidement de la saisie libre à la sélection.

Exemples

Tailles

Environnement (sm)

Environnement (md)

Environnement (lg)

Voir le code (Svelte)

<div class="docs-demo-stack">
  <Combobox
    size="sm"
    label="Environnement (sm)"
    options={[{"label":"Forge","value":"forge"},{"label":"Entropic","value":"entropic"},{"label":"Graphify","value":"graphify"},{"label":"Pulse","value":"pulse","disabled":true},{"label":"Relay","value":"relay"},{"label":"Nova","value":"nova"}]}
    placeholder="Tapez Forge…"
  />
  <Combobox
    size="md"
    label="Environnement (md)"
    options={[{"label":"Forge","value":"forge"},{"label":"Entropic","value":"entropic"},{"label":"Graphify","value":"graphify"},{"label":"Pulse","value":"pulse","disabled":true},{"label":"Relay","value":"relay"},{"label":"Nova","value":"nova"}]}
  />
  <Combobox
    size="lg"
    label="Environnement (lg)"
    options={[{"label":"Forge","value":"forge"},{"label":"Entropic","value":"entropic"},{"label":"Graphify","value":"graphify"},{"label":"Pulse","value":"pulse","disabled":true},{"label":"Relay","value":"relay"},{"label":"Nova","value":"nova"}]}
  />
</div>

États

Sélection contrôlée

Avec erreur Un environnement est requis.

Désactivé

Voir le code (Svelte)

<div class="docs-demo-stack">
  <Combobox
    label="Sélection contrôlée"
    value="Forge"
    options={[{"label":"Forge","value":"forge"},{"label":"Entropic","value":"entropic"},{"label":"Graphify","value":"graphify"},{"label":"Pulse","value":"pulse","disabled":true},{"label":"Relay","value":"relay"},{"label":"Nova","value":"nova"}]}
    placeholder="Tapez puis choisissez"
  />
  <Combobox
    label="Avec erreur"
    placeholder="Projet requis"
    options={[{"label":"Forge","value":"forge"},{"label":"Entropic","value":"entropic"},{"label":"Graphify","value":"graphify"},{"label":"Pulse","value":"pulse","disabled":true},{"label":"Relay","value":"relay"},{"label":"Nova","value":"nova"}]}
    invalid
    errorText="Un environnement est requis."
  />
  <Combobox
    label="Désactivé"
    options={[{"label":"Forge","value":"forge"},{"label":"Entropic","value":"entropic"},{"label":"Graphify","value":"graphify"},{"label":"Pulse","value":"pulse","disabled":true},{"label":"Relay","value":"relay"},{"label":"Nova","value":"nova"}]}
    disabled
  />
</div>

Validation

Sélection stricte

Voir le code (Svelte)

<Combobox
  label="Sélection stricte"
  value="Graphify"
  options={[{"label":"Forge","value":"forge"},{"label":"Entropic","value":"entropic"},{"label":"Graphify","value":"graphify"},{"label":"Pulse","value":"pulse","disabled":true},{"label":"Relay","value":"relay"},{"label":"Nova","value":"nova"}]}
  placeholder="Tapez un environnement"
  allowCustomValue={false}
  clearLabel="Effacer"
  toggleLabel="Afficher les options"
  listLabel="Environnements disponibles"
  noResultsLabel="Aucun résultat"
/>

Dernière option validée : graphify · dernière saisie : Graphify

API

Prop	Type	Default
`options`	`ComboboxOption[]`	required
`value`	`string` (`$bindable`)	`""`
`label`	`string`	optionnel
`helperText`	`string`	optionnel
`errorText`	`string`	optionnel
`invalid`	`boolean`	`false`
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`placeholder`	`string`	`"Select or type"`
`allowCustomValue`	`boolean`	`true`
`noResultsLabel`	`string`	`"No results"`
`clearLabel`	`string`	`"Clear selection"`
`toggleLabel`	`string`	`"Toggle options"`
`listLabel`	`string`	optionnel
`onselect`	`(value: string) => void`	optionnel
`onchange`	`(value: string) => void`	optionnel
`disabled`	`boolean`	`false`
`class`	`string`	optionnel

Notes d’usage

La prop `options` définit la source. `value` contient toujours le libellé affiché dans l’input ; utilisez `onselect` pour récupérer la valeur métier (`value` de chaque option).

`allowCustomValue=false` garde la saisie possible mais évite l’émission côté `onchange` ; la valeur ne peut être validée que par sélection.

La navigation clavier supporte ArrowDown/ArrowUp, Entrée pour valider l’option active et Escape pour fermer.

Tokens utilisés

--st-component-field-labelText
--st-component-field-helpText
--st-component-field-errorText
--st-component-field-gap
--st-component-field-maxWidth
--st-component-control-background
--st-component-control-border
--st-component-control-radius
--st-component-control-focusRing
--st-component-control-hoverBorder
--st-component-control-hoverBackground
--st-component-control-invalidBorder
--st-component-dropdown-background
--st-component-dropdown-border
--st-component-dropdown-radius
--st-component-dropdown-selectedBackground
--st-component-dropdown-selectedText
--st-component-dropdown-shadow
--st-component-dropdown-text
--st-component-control-disabledText
--st-component-popover-zIndex
--st-semantic-text-primary
--st-semantic-text-secondary
--st-semantic-text-muted