Composant · Structure

Accordion

Stable

Liste de panneaux pliables avec en-têtes accessibles (`aria-expanded`, `aria-controls`, région labellisée). En mode `multiple`, plusieurs panneaux restent ouverts ; sinon l’ouverture est exclusive.

Quand l'utiliser

Condenser un contenu long en sections repliables (FAQ, paramètres avancés).
multiple={false} pour un focus sur une section à la fois ; multiple pour comparer.
Pour basculer entre des vues d'un même objet, préférez Tabs.

Exemples

Ouverture multiple

Les factures sont émises le premier jour de chaque mois et disponibles dans l’espace client.

Le support est joignable par chat en heures ouvrées et par e-mail en continu.

Voir le code (Svelte)

<Accordion
  items={[{"id":"billing","title":"Facturation","content":"Les factures sont émises le premier jour de chaque mois et disponibles dans l’espace client."},{"id":"limits","title":"Limites du plan","content":"Chaque plan fixe un quota mensuel ; le dépassement est facturé à l’usage."},{"id":"support","title":"Support","content":"Le support est joignable par chat en heures ouvrées et par e-mail en continu."}]}
  multiple
  allowMultiple
  open={["billing","support"]}
  defaultOpenIds={["billing","support"]}
/>

Panneaux ouverts: billing, support

Tailles

Les factures sont émises le premier jour de chaque mois et disponibles dans l’espace client.

Voir le code (Svelte)

<div class="docs-demo-stack">
  <Accordion
    items={[{"id":"billing","title":"Facturation","content":"Les factures sont émises le premier jour de chaque mois et disponibles dans l’espace client."},{"id":"limits","title":"Limites du plan","content":"Chaque plan fixe un quota mensuel ; le dépassement est facturé à l’usage."},{"id":"support","title":"Support","content":"Le support est joignable par chat en heures ouvrées et par e-mail en continu."}]}
    size="sm"
    open={["billing"]}
    defaultOpenIds={["billing"]}
  />
  <Accordion
    items={[{"id":"billing","title":"Facturation","content":"Les factures sont émises le premier jour de chaque mois et disponibles dans l’espace client."},{"id":"limits","title":"Limites du plan","content":"Chaque plan fixe un quota mensuel ; le dépassement est facturé à l’usage."},{"id":"support","title":"Support","content":"Le support est joignable par chat en heures ouvrées et par e-mail en continu."}]}
    size="md"
    open={["billing"]}
    defaultOpenIds={["billing"]}
  />
  <Accordion
    items={[{"id":"billing","title":"Facturation","content":"Les factures sont émises le premier jour de chaque mois et disponibles dans l’espace client."},{"id":"limits","title":"Limites du plan","content":"Chaque plan fixe un quota mensuel ; le dépassement est facturé à l’usage."},{"id":"support","title":"Support","content":"Le support est joignable par chat en heures ouvrées et par e-mail en continu."}]}
    size="lg"
    open={["billing"]}
    defaultOpenIds={["billing"]}
  />
</div>

Alignement start et item désactivé

Contenu pliable standard.

Voir le code (Svelte)

<Accordion
  items={[{"id":"active","title":"Section active","content":"Contenu pliable standard."},{"id":"locked","title":"Section verrouillée","content":"Non accessible.","disabled":true}]}
  align="start"
  open={["active"]}
  defaultOpenIds={["active"]}
/>

API

Prop	Type	Default
`items`	`AccordionItem[]`	requis
`multiple`	`boolean`	`false`
`open`	`string[]` (`$bindable`)	`[]`
`align`	`"start" \| "end"`	`"end"`
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`onchange`	`(open: string[]) => void`	optionnel
`class`	`string`	optionnel
+ attributs HTMLDivElement transmis (...rest)

AccordionItem

Champ	Type
`id`	`string`
`title`	`string`
`content`	`string`
`disabled`	`boolean` (optionnel)

Anatomie

Item (.st-accordion__item) : un en-tête + un panneau pliable.
Déclencheur (.st-accordion__trigger) : un <button> dans un <h3>, avec chevron qui pivote.
Panneau (.st-accordion__panel, role="region") : le contenu, rendu seulement si ouvert.

Accessibilité

Chaque déclencheur expose aria-expanded et aria-controls vers son panneau.
Le panneau a role="region" et aria-labelledby vers son en-tête.
Les en-têtes sont des <button> dans des <h3> : navigables et activables au clavier.
Un item disabled est non focusable et ignore le clic.

Lignes directrices

À faire

Des titres de section clairs et autoportants.
Ouvrir par défaut la section la plus utile.

À éviter

Cacher du contenu critique derrière un pli.
Imbriquer des accordéons sur plusieurs niveaux.

Notes d’usage

`items` est typé `AccordionItem` (`{ id, title, content, disabled? }`). `open` est `$bindable<string[]>` et liste les `id` ouverts ; `onchange` reçoit le nouveau tableau.

`multiple={false}` (défaut) ferme les autres panneaux à l’ouverture d’un nouveau. `multiple={true}` les empile. Un item `disabled` ne réagit pas au clic.

`align` place le chevron : `end` (défaut, titre à gauche / chevron à droite) ou `start` (chevron avant le titre). Le chevron pivote de 180° à l’ouverture.

Tokens utilisés

--st-component-control-border
--st-component-control-hoverBackground
--st-component-control-hoverBorder
--st-component-control-focusRing
--st-semantic-text-primary
--st-semantic-text-secondary
--st-semantic-text-muted
--st-semantic-border-subtle
--st-semantic-border-interactive
--st-semantic-surface-subtle
--st-motion-fast
--st-motion-easing