Image Accordion
betaImage panels in a row — the open one widens and shows its caption, the rest stand as narrow strips — opened by hover, focus or press.
- Display
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add image-accordionnpm packages installed: class-variance-authority.
import { ImageAccordion } from "@/components/ui/image-accordion";Default
Gallery
With Images
Click To Open
Vertical
Controlled
Right To Left
<ImageAccordion>
| Prop | Type | Default |
|---|---|---|
items (required) | ImageAccordionItem[] | — |
activateOn
| "hover" | "click" | "hover" |
activeIndexControlled open panel. | number | — |
defaultActiveIndex | number | 0 |
expandedSizeHow many times wider (or taller) the open panel grows than a closed one. | number | 4 |
headingLevelThe heading level wrapping each header button. | 2 | 3 | 4 | 5 | 6 | 3 |
onActiveIndexChange | (index: number) => void | — |
orientation | "horizontal" | "vertical" | "horizontal" |
Plus every attribute of <div>.
An APG accordion: each panel's header is a button with aria-expanded inside a heading (`headingLevel`), controlling its caption, which is aria-hidden and inert while closed. Exactly one panel is open. Arrow keys move between headers (Left/Right mirrored under dir="rtl", Up/Down when vertical), Home and End jump to the ends. With `activateOn="hover"` a header opens on keyboard focus as well as mouse hover, so nothing is pointer-only; touch opens on tap. Images are decorative unless `imageAlt` is given. The widening stops animating under reduced motion.
10/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — passes
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes