https://framer.com/m/Accordion-FbDf.js#AccordionX
AccordionX
AccordionX collapses a list of sections down to their titles and opens one at a time. Trigger and panel typography come from the theme type steps, every surface and rule from the colour tokens. The rows below hold this system’s own component catalogue.
Examples
Live specimens for every control the component exposes.
Default
One row open at a time. The catalogue entries below are the real one-line purposes from the component registry.
Collapsible
collapsible decides whether the open row can be closed, or whether one must always stay open.
collapsible true — every row can close
collapsible false — one stays open
Type scale
triggerFontSize and contentFontSize pick steps from the theme scale, so an accordion sits correctly inside any block of copy.
trigger Body · content Callout
trigger Detail · content Tiny
Weight
triggerFontWeight maps onto the theme weight tokens — enough to separate the title from its answer without changing size.
regular
semibold
bold
Radius
radius rounds the container. Keep it in step with the cards and inputs around it.
radius 0
radius 8
radius 16
Colour and the theme
AccordionX exposes nine colour slots — root, trigger, trigger hover, trigger text, divider, focus ring, panel, panel text and chevron. Inside a themed page they are inert: ThemeLeaderPro supplies the colours and the props act only as fallbacks for un-themed contexts. Both specimens below carry different slot values and render identically, which is the point.
slots set to the panel tokens
Props
The controls exposed on the instance panel.
Usage
Guidance carried over from the component definition.
Reach for AccordionX
Sections collapse to their titles and only one opens at a time.
Trigger and panel type must track the theme scale.
You want the WAI-ARIA disclosure behaviour without building it.
Rows are data — a value, a title and a body per entry.
Reach for something else
Several rows must be open at once.
You need nested or multi-level disclosure.
The panel holds a hover-only summary — use HoverCardX.
Io — UI Basics
Every accordion above is a live AccordionX instance over this system’s own component catalogue. Colour, type and radius resolve from the project theme tokens.