Accordion

Full keyboard navigation.
Can expand one or multiple items.
Can be controlled or uncontrolled.

Installation

Accordion is already installed in @hanzo/gui, or you can install it independently:

npm install @hanzogui/accordion

Anatomy

Import all parts and piece them together.

import { Accordion } from '@hanzo/gui' // or '@hanzogui/accordion'

export default () => (
  <Accordion>
    <Accordion.Item>
      <Accordion.Header>
        <Accordion.Trigger />
      </Accordion.Header>
      <Accordion.Content />
    </Accordion.Item>
  </Accordion>
)

API Reference

Contains all the parts of an accordion.

Prop	Type	Default	Required
asChild	boolean	false	-
type	"single" \| "multiple"	-	✓
value	string	-	-
defaultValue	string	-	-
onValueChange	(value: string) => void	-	-
value	string[]	[]	-
defaultValue	string[]	[]	-
onValueChange	(value: string[]) => void	-	-
collapsible	boolean	false	-
disabled	boolean	false	-
dir	"ltr" \| "rtl"	"ltr"	-

Accordion.Item

Contains all the parts of a collapsible section.

Prop	Type	Default	Required
asChild	boolean	false	-
disabled	boolean	false	-
value	string	-	✓

Accordion.Header

Wraps an Accordion.Trigger. Use the asChild prop to update it to the appropriate heading level for your page.

Prop	Type	Default	Required
asChild	boolean	false	-

Accordion.Trigger

Toggles the collapsed state of its associated item. It should be nested inside of an Accordion.Header.

Prop	Type	Default	Required
asChild	boolean	false	-

Accordion.Content

Contains the collapsible content for an item.

Prop	Type	Default	Required
asChild	boolean	false	-
forceMount	boolean	-	-

Examples

Expanded by default

Use the defaultValue prop to define the open item by default.

<Accordion type="single" __defaultValue__="item-2">
  <Accordion.Item value="item-1">…</Accordion.Item>
  <Accordion.Item value="item-2">…</Accordion.Item>
</Accordion>

Allow collapsing all items

Use the collapsible prop to allow all items to close.

<Accordion type="single" __collapsible__>
  <Accordion.Item value="item-1">…</Accordion.Item>
  <Accordion.Item value="item-2">…</Accordion.Item>
</Accordion>

Multiple items open at the same time

Set the type prop to multiple to enable opening multiple items at once.

<Accordion type="__multiple__">
  <Accordion.Item value="item-1">…</Accordion.Item>
  <Accordion.Item value="item-2">…</Accordion.Item>
</Accordion>

Accessibility

Adheres to the Accordion WAI-ARIA design pattern.

Accordion

On this page