Composant · Données

SelectionChip

Documenté

SelectionChip est un chip compact signalant qu'une dimension est sélectionnée. Il affiche un libellé, un compteur optionnel entre parenthèses et un bouton d'effacement.

Exemples

Tonalités

Cinq tonalités sémantiques : neutral (défaut), success, warning, error, info.

Tonalités

Neutral (3) Success (5) Warning (2) Error (1) Info (8)

Voir le code (Svelte)

<SelectionChip label="Neutral" count={3} tone="neutral" />
<SelectionChip label="Success" count={5} tone="success" />
<SelectionChip label="Warning" count={2} tone="warning" />
<SelectionChip label="Error" count={1} tone="error" />
<SelectionChip label="Info" count={8} tone="info" />

Avec compteur

Passez `count` (entier fini) pour afficher le nombre d'éléments sélectionnés.

Avec compteur

Sélection (42) Catégorie (5) Région (3) Tous

Voir le code (Svelte)

<SelectionChip label="Sélection" count={42} />
<SelectionChip label="Catégorie" count={5} tone="success" />
<SelectionChip label="Région" count={3} tone="info" />
<SelectionChip label="Tous" />

État désactivé

L'état `disabled` réduit l'opacité et désactive le bouton d'effacement.

État désactivé

Verrouillé (7) Archive (12)

Voir le code (Svelte)

<SelectionChip label="Verrouillé" count={7} disabled />
<SelectionChip label="Archive" count={12} tone="error" disabled />

API du composant

Prop	Type	Par défaut
`label`	`string`	requis
`count`	`number`	optionnel
`tone`	`"neutral" \| "success" \| "warning" \| "error" \| "info"`	`"neutral"`
`onClear`	`() => void`	optionnel
`disabled`	`boolean`	`false`
`class`	`string`	optionnel

Accessibilité

Le span reçoit `aria-disabled` quand disabled. Le compteur est enveloppé dans un `aria-label` pour que les lecteurs d'écran l'annoncent entre parenthèses. Le bouton d'effacement a un `aria-label` explicite.

Notes d'usage

Idéal pour indiquer des sélections dans des filtres, colonnes de tableau ou barres de contrôle. Combinez avec FilterBar pour des interfaces de filtrage riches.

Tokens

--st-radius-pill
--st-semantic-surface-subtle
--st-semantic-text-secondary
--st-semantic-feedback-success
--st-semantic-feedback-warning
--st-semantic-feedback-error
--st-semantic-feedback-info
--st-motion-fast
--st-motion-easing