Skip to content

Accordion

Material 1 expansion panels for related details and lightweight editing.

Keep your notes and project details together.

Installation

Terminal
pnpm dlx shadcn@latest add https://react-toolbox.io/r/accordion.json

New here? Set up your project first. Styles, fonts, and required components are included.

Usage

Use value and onValueChange to control the expanded values, or defaultValue for initial expansion. Both use arrays, even with a single panel. Add multiple to allow several open panels. Tab moves between triggers; Enter or Space toggles them. Headers default to h3; use render={<h2 />} for a different heading level. Put interactive controls inside the panel, not inside the trigger. Use keepMounted on a panel to preserve local form state while closed.

API reference

Key props and defaults. Full types and inline documentation are included with the source in material/accordion.

AccordionRoot

Property Type Default
defaultValue Value[]

The initially expanded item values for uncontrolled expansion.

 —
disabled boolean

Disable all triggers.

 false
multiple boolean

Allow more than one expanded panel at a time.

 false
onValueChange (value: Value[], eventDetails: Primitive.Root.ChangeEventDetails) => void

Called when an item requests expansion or collapse.

 —
value Value[]

The expanded item values. Use with onValueChange for controlled expansion.

 —

AccordionItem

Property Type Default
disabled boolean

Disable this item's trigger.

 —
value Primitive.Item.Props['value']

A unique value; supply one when using value or defaultValue on the root.

 —

AccordionPanel

Property Type Default
keepMounted boolean

Keep closed content mounted, for example to preserve local form state.

 —

Material guidelines

  • Group lightweight editing tasks or related details into panels. Keep a concise summary visible when collapsed.
  • Use 48px collapsed and 64px expanded header heights, with 24px horizontal padding and 16px separation around expanded panels. Put form controls and secondary actions inside the panel.

Material Design 1: Expansion panels