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 / SOUTHLEFT
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 PARITYNOT TRACKED
NO DESIGN-SYSTEM PROJECT TRACKS THIS COMPONENT AGAINST A FIGMA FILE — IT IS EITHER OUTSIDE EVERY PROJECT’S DECLARED SCOPE, OR NOT YET SEEDED INTO ITS PROJECT’S PARITY MANIFEST.
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