Accordion

basic
Basic usage is a single mode with no border wrapper.
Borderless is useful for custom containers.
with border
Border is applied automatically.
No extra wrapper needed.
multiple
Multiple items can be open at the same time.
This one is also open by default.
Click any trigger to toggle independently.
gap
sm
The gap prop controls the padding inside each trigger and content area.
Smaller gap fits compact layouts, larger gap gives more breathing room.
md
The gap prop controls the padding inside each trigger and content area.
Smaller gap fits compact layouts, larger gap gives more breathing room.
lg
The gap prop controls the padding inside each trigger and content area.
Smaller gap fits compact layouts, larger gap gives more breathing room.
custom trigger
The trigger can be rendered based on the open state.
non collapsibleonly available in single mode
Click this trigger again - it will not close. One item must always remain open.
You can switch to another item, but the accordion will never be fully collapsed.
disabled
This item can be toggled.
This content is not reachable.
disabled (root)
The entire accordion is disabled from the root - no item can be toggled.
Use root disabled when the accordion should be read-only based on app state.