Skip to content
Components

Accordion

Collapsible panel container that wraps Base UI Accordion, supporting one (default) or several (multiple) open items. Works controlled (value) or uncontrolled (defaultValue); compose with AccordionItem, AccordionTrigger, and AccordionContent. Values are always arrays of item values.

300 × 600 mm field tile, 10 mm thick, with book-matched veining.

Usage

import { Accordion, accordionAnatomy, AccordionContent, AccordionItem, AccordionTrigger } from "@instruments/materia-ui/components/accordion";

Best practices

  • Leave multiple off for one-at-a-time panels or set it to allow several open at once; value/defaultValue are arrays either way, and an open item can always be closed again.

  • Reach for Collapsible instead when there is a single expandable region - Accordion is for a set of grouped items keyed by value.

  • Children must be AccordionItems (each with AccordionTrigger/AccordionContent); the item's value is what value/defaultValue match against.

Props

Accordion

PropTypeDefaultDescription
variant"default" | "outline" | "solid" | null | undefined
classNamestring
indicator"arrow" | "plus""arrow"

Expand/collapse indicator icon.

AccordionContent

PropTypeDefaultDescription
classNamestring

AccordionItem

PropTypeDefaultDescription
classNamestring
value(required)string

Identifier matched against the root's value array.

AccordionTrigger

PropTypeDefaultDescription
classNamestring

Also exports

  • constaccordionAnatomy

Anatomy

Accordion

accordion

Expandable content sections

AccordionItem

accordion-item

Single collapsible section

AccordionTrigger

accordion-trigger

Button to toggle content visibility

AccordionContent

accordion-content

Collapsible content area

Composition

Builds on

Icon