Composant · Formulaire

Select

Stable

Sélecteur natif <select> stylé, avec libellé, texte d'aide, état d'erreur et trois tailles. Les options sont passées en enfants comme des <option> natives.

Quand l'utiliser

Choisir une seule valeur dans une liste fermée et connue (5 à ~15 options).
Pour 2 ou 3 choix exclusifs, préférez des boutons radio ; pour une recherche dans une longue liste, le Combobox.
Pour une sélection multiple, utilisez MultiSelect.

États

Défaut

Tenant

Avec option vide (placeholder)

Tenant Choisissez un tenant.

Désactivé

Tenant

Erreur

Tenant Le tenant est requis.

Voir le code (Svelte)

<div class="docs-demo-stack">
  <h3>Défaut</h3>
  <Select label="Tenant" value="forge">
    <option value="forge">Forge</option>
    <option value="entropic">Entropic</option>
    <option value="graphify">Graphify</option>
  </Select>
  <h3>Avec option vide (placeholder)</h3>
  <Select label="Tenant" helperText="Choisissez un tenant.">
    <option value="">Sélectionner…</option>
    <option value="forge">Forge</option>
    <option value="entropic">Entropic</option>
  </Select>
  <h3>Désactivé</h3>
  <Select label="Tenant" disabled>
    <option value="forge">Forge</option>
  </Select>
  <h3>Erreur</h3>
  <Select label="Tenant" invalid errorText="Le tenant est requis.">
    <option value="">Sélectionner…</option>
    <option value="forge">Forge</option>
  </Select>
</div>

Sélection par défaut: forge

Tailles

sm (2 rem), md (2,5 rem, défaut), lg (3 rem).

Tailles

Small

Medium

Large

Voir le code (Svelte)

<div class="docs-demo-stack">
  <Select label="Small" size="sm">
    <option>sm</option>
  </Select>
  <Select label="Medium" size="md">
    <option>md</option>
  </Select>
  <Select label="Large" size="lg">
    <option>lg</option>
  </Select>
</div>

Anatomie

Conteneur (.st-field) : libellé + contrôle + message empilés.
Contrôle (.st-select) : un <select> natif ; le chevron est natif (base) ou redessiné selon le thème.
Options : <option> passées en enfants (children).

Accessibilité

Élément <select> natif : navigation clavier (flèches), recherche par frappe, et ouverture native.
Le libellé englobe le contrôle : association native.
aria-invalid="true" en erreur.
Une option « vide » sert de placeholder accessible (valeur "").

Lignes directrices

À faire

Ordonner les options logiquement (alphabétique ou fréquence).
Présélectionner la valeur la plus courante quand c'est sûr.

À éviter

Mettre une longue liste à parcourir : préférez Combobox.
N'avoir que 2 options : des radios sont plus lisibles.

API

Prop	Type	Défaut	Description
`label`	`string`	optionnel	Libellé visible.
`helperText`	`string`	optionnel	Texte d'aide (masqué si errorText).
`errorText`	`string`	optionnel	Message d'erreur ; active l'état invalide.
`invalid`	`boolean`	`false`	Force l'état erreur.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Hauteur du contrôle.
`value`	`string \| string[] \| number \| null`	`""`	Valeur sélectionnée, bindable.
`children`	`Snippet`	options	Les <option> du sélecteur.
`class`	`string`	optionnel	Classe(s) du conteneur.
Autres attributs	`HTMLSelectAttributes`	N/A	Propagés sur le <select> (required, name, disabled…).

Tokens utilisés

--st-component-control-background
--st-component-control-border
--st-component-control-hoverBorder
--st-component-control-hoverBackground
--st-component-control-focusRing
--st-component-control-invalidBorder
--st-component-control-anatomy-field-selectChevron
--st-component-control-anatomy-field-selectPaddingRight
--st-component-field-labelText
--st-component-field-helpText