Accordion

Open in Playground

items: [{ key, title, content, disabled? }]. One section is open at a time unless multiple is set. Control it with value (array of open keys) and onChange, or use defaultValue. The headers are h3 headings; set headingLevel (2 to 6) so they follow the heading above without skipping a level.

Small, yellow, and devoted to bananas.

By default the items share one border. Set gap to sm, md or lg to space them apart as separate bordered items.

Fresh bunches reach the lair within two days.

AccordionSection is one collapsible section on its own, for pages that put other content between sections. Control it with open and onChange, or use defaultOpen.

Name, goggles and overall size.

Any other content can sit between the sections.

Props

Accordion

  • itemsAccordionItem[]

    Sections. See the AccordionItem table below.

  • valuestring[]

    Open keys (controlled).

  • defaultValuestring[]
    Default: []

    Initially open keys (uncontrolled).

  • onChange(keys: string[]) => void

    Called with the new array of open keys.

  • multipleboolean
    Default: false

    Allow several sections open at once.

  • gap'none' | 'sm' | 'md' | 'lg'
    Default: 'none'

    Space between items (0.5 / 1 / 1.5rem). Any gap gives each item its own border.

  • headingLevel2 | 3 | 4 | 5 | 6
    Default: 3

    Level of the headers' headings (h2 to h6), so they follow the heading above without skipping a level.

  • classNamestring
    Default: ''

    Extra classes for the root element.

AccordionItem

  • keystring

    Unique key of the section.

  • titleReactNode

    Text of the section header.

  • contentReactNode

    Shown while the section is open.

  • disabledboolean
    Default: false

    Dim the section and keep it closed.

AccordionSection

  • titleReactNode

    Header content.

  • openboolean

    Open state (controlled).

  • defaultOpenboolean
    Default: false

    Initially open (uncontrolled).

  • onChange(open: boolean) => void

    Called with the new open state.

  • disabledboolean
    Default: false

    Disable the header.

  • headingLevel2 | 3 | 4 | 5 | 6
    Default: 3

    Level of the header's heading (h2 to h6), so it follows the heading above without skipping a level.

  • classNamestring
    Default: 'border border-app-border'

    Classes for the section frame (replaces the default border).

  • childrenReactNode

    Content.