Sections depliables pour afficher ou masquer du contenu. Construit sur Radix UI Accordion avec animation de hauteur fluide. Supporte le mode single (un seul ouvert) ou multiple (plusieurs ouverts simultanement).
Mode single (FAQ)
En mode type="single" avec collapsible, un seul item peut etre ouvert a la fois. Cliquer sur un autre ferme le precedent.
Mode multiple
En mode type="multiple", plusieurs sections peuvent etre ouvertes simultanement. Utile pour des listes de categories.
Props
Accordion (Root)
Prop
Type
Default
Description
type
"single" | "multiple"
—
Mode single : un seul item ouvert a la fois. Mode multiple : plusieurs items peuvent etre ouverts.
collapsible
boolean
false
En mode single, permet de refermer l'item ouvert en cliquant dessus.
defaultValue
string | string[]
—
Valeur(s) de l'item/des items ouverts par defaut.
value
string | string[]
—
Valeur(s) de l'item/des items ouverts (mode controle).
onValueChange
(value: string | string[]) => void
—
Callback appele quand la valeur change.
className
string
—
Classes CSS additionnelles.
AccordionItem
Prop
Type
Default
Description
value
string
—
Valeur unique identifiant cet item. Requis.
disabled
boolean
false
Desactive l'item (non-interactif).
className
string
—
Classes CSS additionnelles. Par defaut : border-b.
AccordionTrigger
Prop
Type
Default
Description
className
string
—
Classes CSS additionnelles. Par defaut : py-4, font-medium, hover:underline. Inclut un chevron anime.
AccordionContent
Prop
Type
Default
Description
className
string
—
Classes CSS additionnelles pour le contenu interieur. Le conteneur gere l'animation overflow/height.