Accordion

View source Report an issue

Based on the Accordion radix component.

Component Structure

Accordion
Parent wrapper for Items

Accordion.Item
Wrapper for the Trigger and Content

Accordion.Trigger
Simplified with a built-in chevron icon; only render text inside.
Default styles are applied.

Accordion.Content
Unstyled by default. Add spacing or nested components for alignment.

Single open

type="single" (default)

<Accordion type="single" collapsible>
  <Accordion.Item value="1">
    <Accordion.Trigger>Accordion Header 1</Accordion.Trigger>
    <Accordion.Content className="p-3">
      <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non arcu id odio vulputate venenatis. Ut rutrum lacus sapien, ut consectetur nisi placerat ac. Donec sapien urna, fermentum ac interdum cursus, gravida eu nibh. Phasellus viverra metus eu nulla mollis, a tincidunt est congue. Aliquam vulputate tortor a viverra sollicitudin.</Text>
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="2">
    <Accordion.Trigger>Accordion Header 2</Accordion.Trigger>
    <Accordion.Content className="p-3">
      <Text>Quisque fermentum porttitor turpis, in volutpat velit fermentum eu. Nullam non ligula nec sapien volutpat tristique. Cras vestibulum nisi a eros iaculis scelerisque. Suspendisse rutrum purus ut elementum porttitor. Suspendisse a diam nec metus faucibus vestibulum sed sit amet enim.</Text>
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="3">
    <Accordion.Trigger>Accordion Header 3</Accordion.Trigger>
    <Accordion.Content className="p-3">
      <Text>Quisque fermentum porttitor turpis, in volutpat velit fermentum eu. Nullam non ligula nec sapien volutpat tristique. Cras vestibulum nisi a eros iaculis scelerisque. Suspendisse rutrum purus ut elementum porttitor. Suspendisse a diam nec metus faucibus vestibulum sed sit amet enim.</Text>
    </Accordion.Content>
  </Accordion.Item>
</Accordion>

Multiple open

type="multiple" - requires value/defaultValue to be an array

<Accordion type="multiple" collapsible>
  <Accordion.Item value="1">
    <Accordion.Trigger>Accordion Header 1</Accordion.Trigger>
    <Accordion.Content className="p-3">
      <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</Text>
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="2">
    <Accordion.Trigger>Accordion Header 2</Accordion.Trigger>
    <Accordion.Content className="p-3">
      <Text>Quisque fermentum porttitor turpis, in volutpat velit fermentum eu...</Text>
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="3">
    <Accordion.Trigger>Accordion Header 3</Accordion.Trigger>
    <Accordion.Content className="p-3">
      <Text>Quisque fermentum porttitor turpis, in volutpat velit fermentum eu...</Text>
    </Accordion.Content>
  </Accordion.Item>
</Accordion>

Custom Trigger

Use asChild on the Trigger component

Note: this is not standard behaviour, so check the usage tab, and make sure the designers are aware if you need to use this.

<Accordion type="multiple" collapsible>
  <Accordion.Item value="1">
    <Accordion.Trigger asChild><Button><Icon is={Brightness} />Custom button trigger</Button></Accordion.Trigger>
    <Accordion.Content className="p-3">
      <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</Text>
    </Accordion.Content>
  </Accordion.Item>
</Accordion>

value / defaultValue

Each Accordion.Item requires a value.

Use defaultValue for uncontrolled mode. Items will open and close when the trigger is clicked.

<Accordion type="single" defaultValue="2" collapsible>
  <Accordion.Item value="1">
    <Accordion.Trigger>Accordion Header 1</Accordion.Trigger>
    <Accordion.Content className="p-3">
      <Text>This will be closed by default</Text>
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="2">
    <Accordion.Trigger>Accordion Header 2</Accordion.Trigger>
    <Accordion.Content className="p-3">
      <Text>This will be open by default because defaultValue is set to 2</Text>
    </Accordion.Content>
  </Accordion.Item>
</Accordion>

Managed open state

Use value and onValueChange for controlled mode. The open state can then be triggered by a different source such as a button.

const MyComponent = () =>{
  const [selectedItem, setSelectedItem] = React.useState("1")


  return (
    <>
      <Button onClick={() => setSelectedItem("2")}>Open item 2</Button>
    <Accordion type="single" collapsible value={selectedItem} onValueChange={(value) => setSelectedItem(value)}>
      <Accordion.Item value="1">
        <Accordion.Trigger>Accordion Header 1</Accordion.Trigger>
        <Accordion.Content className="p-3">
          <Text>This accordion state in this example is managed manually.</Text>
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="2">
        <Accordion.Trigger>Accordion Header 2</Accordion.Trigger>
        <Accordion.Content className="p-3">
          <Text>This will be closed until "selectedItem" value is "2" </Text>
        </Accordion.Content>
      </Accordion.Item>
    </Accordion>
      </>
  )
}
const App = () => (
    <MyComponent />
)
render(<App />)


Do not use both together, it will cause errors and unpredicatable behaviour.

collapsible (optional)

Allows all items to be collapsed. Without it, one item must remain open.

<>
  <Accordion type="single" defaultValue="2">
  <Accordion.Item value="1">
    <Accordion.Trigger>Accordion Header 1</Accordion.Trigger>
    <Accordion.Content className="p-3">
      <Text>Only of these items can be open at once</Text>
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="2">
    <Accordion.Trigger>Accordion Header 2</Accordion.Trigger>
    <Accordion.Content className="p-3">
      <Text>To close this, you must open another item</Text>
    </Accordion.Content>
  </Accordion.Item>
</Accordion>
<Accordion type="single" defaultValue="2" collapsible>
  <Accordion.Item value="1">
    <Accordion.Trigger>Accordion Header 1</Accordion.Trigger>
    <Accordion.Content className="p-3">
      <Text>These items can open and close individually</Text>
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="2">
    <Accordion.Trigger>Accordion Header 2</Accordion.Trigger>
    <Accordion.Content className="p-3">
      <Text>The can be all closed, or all open</Text>
    </Accordion.Content>
  </Accordion.Item>
</Accordion>
  </>

disabled (Accordion.Item)

Prevents toggling. The related Accordion.Content remains static.

<Accordion type="single" defaultValue="2" collapsible>
  <Accordion.Item value="1" disabled>
    <Accordion.Trigger>Accordion Header 1</Accordion.Trigger>
    <Accordion.Content className="p-3">
      <Text>This will be closed by default</Text>
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="2">
    <Accordion.Trigger>Accordion Header 2</Accordion.Trigger>
    <Accordion.Content className="p-3">
      <Text>This will be open by default because defaultValue is set to 2</Text>
    </Accordion.Content>
  </Accordion.Item>
</Accordion>

arrowPosition (Accordion.Trigger)

Accordion.Trigger components can take a arrowPosition prop which allows the arrow to be set to either the left or right side of the trigger. The default is right.

<Accordion type="single" defaultValue="1" collapsible>
  <Accordion.Item value="1">
    <Accordion.Trigger arrowPosition="left">Accordion Header 1</Accordion.Trigger>
    <Accordion.Content className="p-3">
      <Text>Arrow is on the left</Text>
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="2">
    <Accordion.Trigger>Accordion Header 2</Accordion.Trigger>
    <Accordion.Content className="p-3">
      <Text>Arrow is on the right</Text>
    </Accordion.Content>
  </Accordion.Item>
</Accordion>

colorScheme

Pass a colorScheme object to Accordion.Trigger to customize colors:
Default: { accent: "grey1", interactive: "loContrast" }

<Accordion type="multiple" defaultValue={["1","2"]} collapsible>
  <Accordion.Item value="1">
    <Accordion.Trigger colorScheme={{ accent: "red1", base:"red", interactive: "hiContrast" }}>Accordion Header 1</Accordion.Trigger>
    <Accordion.Content className="p-3">
      <Text>This will be closed by default</Text>
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="2">
    <Accordion.Trigger colorScheme={{ accent: "lime1", base:"lime1", interactive: "hiContrast" }}>Accordion Header 2</Accordion.Trigger>
    <Accordion.Content className="p-3">
      <Text>This will be open by default because defaultValue is set to 2</Text>
    </Accordion.Content>
  </Accordion.Item>
</Accordion>