Accordion

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

Features

Full keyboard navigation.
Expands one panel at a time.
Can be controlled or uncontrolled.

Installation

Install the component from your command line.

npm install @radix-ui/react-accordion

npm install @radix-ui/react-accordion

Anatomy

Import the components and piece the parts together.

import * as Accordion from '@radix-ui/react-accordion';

export default () => (
  <Accordion.Root>
    <Accordion.Item>
      <Accordion.Header>
        <Accordion.Button />
      <Accordion.Header>
      <Accordion.Panel />
    </Accordion.Item>
  </Accordion.Root>
);

import * as Accordion from '@radix-ui/react-accordion';
export default () => (
  <Accordion.Root>
    <Accordion.Item>
      <Accordion.Header>
        <Accordion.Button />
      <Accordion.Header>
      <Accordion.Panel />
    </Accordion.Item>
  </Accordion.Root>
);

Basic example

Create your styled accordion component from the primitive parts.

// import { styled } from 'path-to/stitches.config';
import * as Accordion from '@radix-ui/react-accordion';

const StyledAccordion = styled(Accordion.Root, {
  borderTop: '1px solid gainsboro',
});

const StyledItem = styled(Accordion.Item, {
  borderBottom: '1px solid gainsboro',
});

const StyledHeader = styled(Accordion.Header, {
  margin: 0,
  display: 'flex',
});

const StyledButton = styled(Accordion.Button, {
  backgroundColor: 'transparent',
  border: 'none',
  padding: 10,
  flex: 1,
  textAlign: 'left',
});

const StyledPanel = styled(Accordion.Panel, {
  padding: 10,
});

export default () => (
  <StyledAccordion>
    <StyledItem value="item-1">
      <StyledHeader>
        <StyledButton>Item 1</StyledButton>
      </StyledHeader>
      <StyledPanel>
        Here goes the content for the accordion item 1.
      </StyledPanel>
    </StyledItem>

    <StyledItem value="item-2">
      <StyledHeader>
        <StyledButton>Item 2</StyledButton>
      </StyledHeader>
      <StyledPanel>
        Here goes the content for the accordion item 2.
      </StyledPanel>
    </StyledItem>

    <StyledItem value="item-3">
      <StyledHeader>
        <StyledButton>Item 3</StyledButton>
      </StyledHeader>
      <StyledPanel>
        Here goes the content for the accordion item 3.
      </StyledPanel>
    </StyledItem>
  </StyledAccordion>
);

// import { styled } from 'path-to/stitches.config';
import * as Accordion from '@radix-ui/react-accordion';
const StyledAccordion = styled(Accordion.Root, {
  borderTop: '1px solid gainsboro',
});
const StyledItem = styled(Accordion.Item, {
  borderBottom: '1px solid gainsboro',
});
const StyledHeader = styled(Accordion.Header, {
  margin: 0,
  display: 'flex',
});
const StyledButton = styled(Accordion.Button, {
  backgroundColor: 'transparent',
  border: 'none',
  padding: 10,
  flex: 1,
  textAlign: 'left',
});
const StyledPanel = styled(Accordion.Panel, {
  padding: 10,
});
export default () => (
  <StyledAccordion>
    <StyledItem value="item-1">
      <StyledHeader>
        <StyledButton>Item 1</StyledButton>
      </StyledHeader>
      <StyledPanel>
        Here goes the content for the accordion item 1.
      </StyledPanel>
    </StyledItem>
    <StyledItem value="item-2">
      <StyledHeader>
        <StyledButton>Item 2</StyledButton>
      </StyledHeader>
      <StyledPanel>
        Here goes the content for the accordion item 2.
      </StyledPanel>
    </StyledItem>
    <StyledItem value="item-3">
      <StyledHeader>
        <StyledButton>Item 3</StyledButton>
      </StyledHeader>
      <StyledPanel>
        Here goes the content for the accordion item 3.
      </StyledPanel>
    </StyledItem>
  </StyledAccordion>
);

API Reference

Root

Contains all the parts of an accordion.

Prop	Type	Default
`as`	`enum`	`div`
`value`	`string`
`defaultValue`	`string`
`disabled`	`boolean`	`false`
`onValueChange`	`function`

Item

Contains all the parts of a collapsible section.

Prop	Type	Default
`as`	`enum`	`div`
`disabled`	`boolean`	`false`
`value`	`string`

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

Prop	Type	Default	Required
`as`	`enum`	`h3`

Button

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

Prop	Type	Default	Required
`as`	`enum`	`button`

Panel

Contains the collapsible content for an item.

Prop	Type	Default	Required
`as`	`enum`	`div`

Examples

With chevrons

// import { styled } from 'path-to/stitches.config';
import * as Accordion from '@radix-ui/react-accordion';
import { ChevronDownIcon } from '@modulz/radix-icons';

const StyledAccordion = styled(Accordion.Root, {
  borderTop: '1px solid gainsboro',
});

const StyledItem = styled(Accordion.Item, {
  borderBottom: '1px solid gainsboro',
});

const StyledHeader = styled(Accordion.Header, {
  margin: 0,
  display: 'flex',
});

const StyledButton = styled(Accordion.Button, {
  backgroundColor: 'transparent',
  border: 'none',
  padding: 10,
  flex: 1,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
});

const StyledPanel = styled(Accordion.Panel, {
  padding: 10,
});

const AccordionChevron = styled(ChevronDownIcon, {
  transition: 'transform 300ms',

  '[data-state=open] &': {
    transform: 'rotate(180deg)',
  },
});

export default () => (
  <StyledAccordion>
    <StyledItem value="item-1">
      <StyledHeader>
        <StyledButton>
          Item 1
          <AccordionChevron aria-hidden />
        </StyledButton>
      </StyledHeader>
      <StyledPanel>
        Here goes the content for the accordion item 1.
      </StyledPanel>
    </StyledItem>

    <StyledItem value="item-2">
      <StyledHeader>
        <StyledButton>
          Item 2
          <AccordionChevron aria-hidden />
        </StyledButton>
      </StyledHeader>
      <StyledPanel>
        Here goes the content for the accordion item 2.
      </StyledPanel>
    </StyledItem>

    <StyledItem value="item-3">
      <StyledHeader>
        <StyledButton>
          Item 3
          <AccordionChevron aria-hidden />
        </StyledButton>
      </StyledHeader>
      <StyledPanel>
        Here goes the content for the accordion item 3.
      </StyledPanel>
    </StyledItem>
  </StyledAccordion>
);

// import { styled } from 'path-to/stitches.config';
import * as Accordion from '@radix-ui/react-accordion';
import { ChevronDownIcon } from '@modulz/radix-icons';
const StyledAccordion = styled(Accordion.Root, {
  borderTop: '1px solid gainsboro',
});
const StyledItem = styled(Accordion.Item, {
  borderBottom: '1px solid gainsboro',
});
const StyledHeader = styled(Accordion.Header, {
  margin: 0,
  display: 'flex',
});
const StyledButton = styled(Accordion.Button, {
  backgroundColor: 'transparent',
  border: 'none',
  padding: 10,
  flex: 1,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
});
const StyledPanel = styled(Accordion.Panel, {
  padding: 10,
});
const AccordionChevron = styled(ChevronDownIcon, {
  transition: 'transform 300ms',
  '[data-state=open] &': {
    transform: 'rotate(180deg)',
  },
});
export default () => (
  <StyledAccordion>
    <StyledItem value="item-1">
      <StyledHeader>
        <StyledButton>
          Item 1
          <AccordionChevron aria-hidden />
        </StyledButton>
      </StyledHeader>
      <StyledPanel>
        Here goes the content for the accordion item 1.
      </StyledPanel>
    </StyledItem>
    <StyledItem value="item-2">
      <StyledHeader>
        <StyledButton>
          Item 2
          <AccordionChevron aria-hidden />
        </StyledButton>
      </StyledHeader>
      <StyledPanel>
        Here goes the content for the accordion item 2.
      </StyledPanel>
    </StyledItem>
    <StyledItem value="item-3">
      <StyledHeader>
        <StyledButton>
          Item 3
          <AccordionChevron aria-hidden />
        </StyledButton>
      </StyledHeader>
      <StyledPanel>
        Here goes the content for the accordion item 3.
      </StyledPanel>
    </StyledItem>
  </StyledAccordion>
);

Expanded by default

Here goes the content for the accordion item 2.

// import { styled } from 'path-to/stitches.config';
import * as Accordion from '@radix-ui/react-accordion';
import { ChevronDownIcon } from '@modulz/radix-icons';

const StyledAccordion = styled(Accordion.Root, {
  borderTop: '1px solid gainsboro',
});

const StyledItem = styled(Accordion.Item, {
  borderBottom: '1px solid gainsboro',
});

const StyledHeader = styled(Accordion.Header, {
  margin: 0,
  display: 'flex',
});

const StyledButton = styled(Accordion.Button, {
  backgroundColor: 'transparent',
  border: 'none',
  padding: 10,
  flex: 1,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
});

const StyledPanel = styled(Accordion.Panel, {
  padding: 10,
});

const AccordionChevron = styled(ChevronDownIcon, {
  transition: 'transform 300ms',

  '[data-state=open] &': {
    transform: 'rotate(180deg)',
  },
});

export default () => (
  <StyledAccordion defaultValue="item-2">
    <StyledItem value="item-1">
      <StyledHeader>
        <StyledButton>
          Item 1
          <AccordionChevron aria-hidden />
        </StyledButton>
      </StyledHeader>
      <StyledPanel>
        Here goes the content for the accordion item 1.
      </StyledPanel>
    </StyledItem>

    <StyledItem value="item-2">
      <StyledHeader>
        <StyledButton>
          Item 2
          <AccordionChevron aria-hidden />
        </StyledButton>
      </StyledHeader>
      <StyledPanel>
        Here goes the content for the accordion item 2.
      </StyledPanel>
    </StyledItem>

    <StyledItem value="item-3">
      <StyledHeader>
        <StyledButton>
          Item 3
          <AccordionChevron aria-hidden />
        </StyledButton>
      </StyledHeader>
      <StyledPanel>
        Here goes the content for the accordion item 3.
      </StyledPanel>
    </StyledItem>
  </StyledAccordion>
);

// import { styled } from 'path-to/stitches.config';
import * as Accordion from '@radix-ui/react-accordion';
import { ChevronDownIcon } from '@modulz/radix-icons';
const StyledAccordion = styled(Accordion.Root, {
  borderTop: '1px solid gainsboro',
});
const StyledItem = styled(Accordion.Item, {
  borderBottom: '1px solid gainsboro',
});
const StyledHeader = styled(Accordion.Header, {
  margin: 0,
  display: 'flex',
});
const StyledButton = styled(Accordion.Button, {
  backgroundColor: 'transparent',
  border: 'none',
  padding: 10,
  flex: 1,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
});
const StyledPanel = styled(Accordion.Panel, {
  padding: 10,
});
const AccordionChevron = styled(ChevronDownIcon, {
  transition: 'transform 300ms',
  '[data-state=open] &': {
    transform: 'rotate(180deg)',
  },
});
export default () => (
  <StyledAccordion defaultValue="item-2">
    <StyledItem value="item-1">
      <StyledHeader>
        <StyledButton>
          Item 1
          <AccordionChevron aria-hidden />
        </StyledButton>
      </StyledHeader>
      <StyledPanel>
        Here goes the content for the accordion item 1.
      </StyledPanel>
    </StyledItem>
    <StyledItem value="item-2">
      <StyledHeader>
        <StyledButton>
          Item 2
          <AccordionChevron aria-hidden />
        </StyledButton>
      </StyledHeader>
      <StyledPanel>
        Here goes the content for the accordion item 2.
      </StyledPanel>
    </StyledItem>
    <StyledItem value="item-3">
      <StyledHeader>
        <StyledButton>
          Item 3
          <AccordionChevron aria-hidden />
        </StyledButton>
      </StyledHeader>
      <StyledPanel>
        Here goes the content for the accordion item 3.
      </StyledPanel>
    </StyledItem>
  </StyledAccordion>
);

Accessibility

Adheres to the Accordion WAI-ARIA design pattern.

Keyboard Interactions

Key	Description
`Space`	When focus is on an `Accordion.Button` of a collapsed section, expands the section.
`Enter`	When focus is on an `Accordion.Button` of a collapsed section, expands the section.
`Tab`	Moves focus to the next focusable element.
`Shift + Tab`	Moves focus to the previous focusable element.
`ArrowDown`	Moves focus to the next `Accordion.Button`.
`ArrowUp`	Moves focus to the previous `Accordion.Button`.
`Home`	When focus is on an `Accordion.Button`, moves focus to the first `Accordion.Button`.
`End`	When focus is on an `Accordion.Button`, moves focus to the last `Accordion.Button`.