Quick Links

Accordion

A vertically stacked set of interactive headings that each reveal an associated section of content.

Yes. It adheres to the WAI-ARIA design pattern. Keyboard interactions and ARIA attributes have been implemented.

Yes, the component accepts className props that can be used to override styles. It also comes with built-in size variants.

Absolutely! The Accordion component adjusts to different screen sizes and can be used in various layouts.

 <Accordion.Root>
  <Accordion.Item value="item-1">
    <Accordion.Header>Is it accessible?</Accordion.Header>
    <Accordion.Content>
      Yes. It adheres to the WAI-ARIA design pattern. Keyboard interactions and
      ARIA attributes have been implemented.
    </Accordion.Content>
  </Accordion.Item>

  <Accordion.Item value="item-2">
    <Accordion.Header>Can I customize the styling?</Accordion.Header>
    <Accordion.Content>
      Yes, the component accepts className props that can be used to override
      styles. It also comes with built-in size variants.
    </Accordion.Content>
  </Accordion.Item>

  <Accordion.Item value="item-3">
    <Accordion.Header>Is it responsive?</Accordion.Header>
    <Accordion.Content>
      Absolutely! The Accordion component adjusts to different screen sizes and
      can be used in various layouts.
    </Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

API Reference

This component inherits parts and props from the Radix Accordion primitive. View source

Root

Contains all the parts of an accordion. It supports multiple open items by default.

Prop	Type	Default
`size`	`"1" \| "2"`	`"2"`
`value`	`string[]`	`[]`
`defaultValue`	`string[]`	`[]`
`onValueChange`	`(value: string[]) => void`

The Root component also supports common margin props m, mx, my, ml, mr, mt, mb.

Item

Contains all the parts of a collapsible section.

Prop	Type	Default
`value`	`string`	Required

Contains the trigger for a collapsible section. This component is based on a heading element.

Prop	Type	Default
`as`	`"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"`	`"h3"`

Content

Contains the content to be revealed when the accordion item is expanded.

Prop	Type	Default
`hiddenUntilFound`	`boolean`	`true`

Examples

Different Sizes

The Accordion component comes with two size variants.

This accordion uses the smaller size variant.

This accordion uses the default size variant.

 <Flex direction="column" gap="4">
  <Accordion.Root size="1">
    <Accordion.Item value="item-1">
      <Accordion.Header>Compact accordion header</Accordion.Header>
      <Accordion.Content>
        This accordion uses the smaller size variant.
      </Accordion.Content>
    </Accordion.Item>
  </Accordion.Root>

  <Accordion.Root size="2">
    <Accordion.Item value="item-1">
      <Accordion.Header>Default accordion header</Accordion.Header>
      <Accordion.Content>
        This accordion uses the default size variant.
      </Accordion.Content>
    </Accordion.Item>
  </Accordion.Root>
</Flex>

With Custom Header Levels

You can customize the heading level used in the accordion header.

Using the appropriate heading level is important for accessibility and document structure.

You can choose the heading level that makes the most sense for your page structure.

 <Accordion.Root>
  <Accordion.Item value="item-1">
    <Accordion.Header as="h2">This is an h2 heading</Accordion.Header>
    <Accordion.Content>
      Using the appropriate heading level is important for accessibility and
      document structure.
    </Accordion.Content>
  </Accordion.Item>

  <Accordion.Item value="item-2">
    <Accordion.Header as="h4">This is an h4 heading</Accordion.Header>
    <Accordion.Content>
      You can choose the heading level that makes the most sense for your page
      structure.
    </Accordion.Content>
  </Accordion.Item>
</Accordion.Root>