Composant · Formulaires

SelectableList

Stable

Listbox accessible qui possède la sélection et un roving tabindex pour ses SelectableRow. Les flèches / Début / Fin déplacent le focus ; Espace / Entrée / clic basculent la rangée focalisée. Sélection unique par défaut ; multiple bascule chaque rangée indépendamment. Contrôlée via value / onchange, sinon elle garde sa sélection interne.

Exemples

Sélection unique

Voir le code (Svelte)

<SelectableList label="Région" value="ca-qc">
  <SelectableRow value="ca-qc">Canada, Québec</SelectableRow>
  <SelectableRow value="ca-on">Canada, Ontario</SelectableRow>
  <SelectableRow value="us-east">États-Unis, Est</SelectableRow>
  <SelectableRow value="eu-west">Europe, Ouest</SelectableRow>
</SelectableList>

multiple

Voir le code (Svelte)

<SelectableList label="Canaux" multiple value={["email","chat"]}>
  <SelectableRow value="email">Courriel</SelectableRow>
  <SelectableRow value="chat">Chat</SelectableRow>
  <SelectableRow value="tickets">Tickets</SelectableRow>
  <SelectableRow value="calendar">Calendrier</SelectableRow>
</SelectableList>

API

Prop	Type	Default
`label`	`string`	–
`labelledby`	`string`	–
`multiple`	`boolean`	`false`
`value`	`string \| string[] \| null`	–
`onchange` / `onChange`	`(value: string \| string[] \| null) => void`	–

Fournir label ou labelledby pour nommer la listbox (requis pour les lecteurs d'écran). En multiple, value est un string[] et aria-multiselectable est ajouté. Navigation clavier : ↑ / ↓ (et ← / →) déplacent le focus parmi les rangées, Début / Fin sautent à la première / dernière, Espace / Entrée basculent la sélection.

Tokens utilisés

--st-semantic-surface-selected
--st-semantic-text-accent
--st-semantic-border-subtle