Composant · Formulaires

SelectableRow

Stable

Rangée sélectionnable pleine largeur. L'état sélectionné est thémé par deux signaux calmes, surface teintée et texte accentué (contraste ~8,8:1), au lieu d'une boîte hors-thème. La barre d'accent gauche est optionnelle. role="option" + aria-selected, activable au clavier (Entrée / Espace). Dans une SelectableList, la liste pilote la sélection et le roving tabindex.

Exemples

État sélectionné (thémé)

Voir le code (Svelte)

<SelectableList label="Environnement" value="staging">
  <SelectableRow value="prod">Production</SelectableRow>
  <SelectableRow value="staging">Staging</SelectableRow>
  <SelectableRow value="dev">Développement</SelectableRow>
</SelectableList>

accentBar

Voir le code (Svelte)

<SelectableList label="Branche déployée" value="main">
  <SelectableRow value="main" accentBar>main</SelectableRow>
  <SelectableRow value="next" accentBar>next</SelectableRow>
  <SelectableRow value="edge" accentBar>edge</SelectableRow>
</SelectableList>

disabled

Voir le code (Svelte)

<SelectableList label="Offres" value="pro">
  <SelectableRow value="starter">Starter</SelectableRow>
  <SelectableRow value="pro">Pro</SelectableRow>
  <SelectableRow value="enterprise" disabled>Entreprise (nous contacter)</SelectableRow>
</SelectableList>

API

Prop	Type	Default
`selected`	`boolean`	`false`
`onselect` / `onSelect`	`(selected: boolean) => void`	–
`disabled`	`boolean`	`false`
`value`	`string`	–
`accentBar`	`boolean`	`false`
`role`	`string`	`"button"`
`leading` / `trailing`	`slot / nœud`	–

Utilisée seule (standalone), la rangée gère son propre état selected et émet onselect à chaque bascule. Dans une SelectableList, ces props sont ignorées : la liste est la source de vérité. L'état sélectionné atteint un contraste texte ~8,8:1. leading/trailing sont des slots en Svelte/Vue, des nœuds en React.

Tokens utilisés

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