Accordion
A vertically stacked set of collapsible sections, each with a trigger header that toggles its content panel open or closed.
Onboarding guide
Fill in your name, email address, and a strong password. You'll receive a verification link in your inbox.
Currently open: step-1
Entire accordion disabled
Individual item disabled
keepMounted — panels remain in DOM when closed
hiddenUntilFound — browser search can reveal closed panels
Multiple items can be open simultaneously.
Manage your display name, language preference, and time zone from the general settings panel.
Control who can see your profile, manage active sessions, and enable two-factor authentication for your account.
This project covers the full redesign of the onboarding flow, including mobile-first layouts and accessibility improvements.
Estimated timeline: 6 weeks. Primary stakeholders are Product, Design, and Engineering leads.
Review login activity, manage trusted devices, and configure two-factor authentication to keep your account safe.
Installation
npx shadcn@latest add @byronwade/accordionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| value | any[] | — | Controlled array of expanded item values. |
| defaultValue | any[] | — | Uncontrolled initial array of expanded item values. |
| multiple | boolean | false | Whether multiple items can be open at the same time. |
| disabled | boolean | false | Whether the accordion ignores user interaction. |
| onValueChange | (value: any[], eventDetails: AccordionRootChangeEventDetails) => void | — | Called when an item is expanded or collapsed. |
| loopFocus | boolean | true | Whether keyboard focus loops back to the first item when the end is reached. |
| keepMounted | boolean | false | Whether to keep panel content in the DOM while closed. |
| hiddenUntilFound | boolean | false | Uses hidden="until-found" so browser page search can find and expand panels. |
| orientation | 'horizontal' | 'vertical' | 'vertical' | Visual orientation that controls which arrow keys move focus. |
| className | string | — | Additional CSS class names applied to the root element. |