COMPONENTS / MOLECULES / al-accordion← ALL COMPONENTS

Accordion

<al-accordion><ALAccordion> REACTbeta

Reference generated from the custom elements manifest — 2 properties, 1 slots, 0 events.

PLAYGROUND2 CONTROLS
PREVIEW / al-accordion / ALTITUDE
Loading preview
What ships in v2?

New neutrals, retired floating labels, segmented steppers, pill chips, and a mono metadata layer.
Is it breaking?

Only where you relied on the floating label or the old stepper markup. Tokens keep their names; a handful change value.
Can I theme it?

Yes — every value resolves through <al-theme>, so a brand can repoint the ramps without touching component code.
Migration guide (coming soon)

Published alongside the v2 release.
FLAGS
CODE — HTML / REACT
Guidance
NOT YET AUTHORED · 20 COMPONENTS COVERED
NO USAGE GUIDANCE HAS BEEN WRITTEN FOR THIS COMPONENT YET. THE API BELOW IS GENERATED FROM THE MANIFEST AND IS COMPLETE; WHAT IS MISSING IS WHEN TO REACH FOR IT AND WHEN NOT TO.
FIGMA PARITYALTITUDE DESIGN SYSTEM
NOT IN FIGMAAltitude Design System
This component exists in code and has no Figma component set.
DECIDED BY
NEVER SYNCED
FIGMA SIDE
NEVER OBSERVED
LAST CONFIRMED SYNC
NEVER
PUBLIC SURFACE
2 ATTR · 1 SLOT · 0 EVENT · 0 PART
The two sides have never been confirmed equal, so there is no baseline to compare against.
ACCESSIBILITYAXE 4.12.1
CHECKEVIDENCEDETAILRESULT
Default stateAXEaccordion--DefaultPASS
Advanced statesAXE2 further storiesPASS
Screen readerMANUALNo screen-reader pass has been recorded for this component.NOT RECORDED
Keyboard navigationINTERACTION TESTSNo interaction tests and no manual keyboard pass.NOT RECORDED
MEASURED 2026-09-08 · 3 STORIES · AXE WCAG2A + WCAG2AA + WCAG21A + WCAG21AA + WCAG22AA
COLOR CONTRAST0 RULES FAILING
The CI gate disables color-contrast globally (libs/al-web-components/story-fixture/src/main.ts), so its result never reaches a test run. It is enabled for this measurement, and reported here whichever way it comes out.
NO CONTRAST VIOLATIONS ACROSS THIS COMPONENT’S 3 STORIES.
INSTALL@southleft/al-web-components/components/accordion
import '@southleft/al-web-components/components/accordion';
import { ALAccordion } from '@southleft/al-react';
API — 2 PROPS2 DOCUMENTED
PROPTYPEDEFAULT
expandAllbooleanExpand all?
- All panels will be in expand or open state when it's true—
expandOneOnlybooleanSingle panel only?
- Display only a single panel at a time—
SLOTS1
SLOTDESCRIPTION
(default)The accordion content, a set of accordion panels
EVENTS0
THIS COMPONENT DECLARES NO EVENTS IN THE MANIFEST.
PUBLIC METHODS1
METHODDESCRIPTION
setExpandOneOnly()Set expand one panel at a time 1. Close all panels except for the one that was clicked
SOURCE — components/accordion/accordion.ts · Molecules/Accordion