Accordion

import {
  Accordion,
  AccordionItem,

When to use it#

Use an accordion when people usually need only one or two of several short sections: questions and answers, the steps of a guide, the parts of an order. The headings stay in view, so people can scan them and open only what they need.

Do not hide content that nearly everyone needs, because it makes them click for nothing. For a single section that opens and closes, use a Collapsible. For views that replace each other, use Tabs.

Import#

Copyimport {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionPanel,
} from "@hel/ui/accordion"

Anatomy#

Accordion is the frame. Each AccordionItem has a value, a AccordionTrigger that is the heading, and an AccordionPanel that is the hidden content.

Copy<Accordion defaultValue={["shipping"]}>
  <AccordionItem value="shipping">
    <AccordionTrigger>How long does shipping take?</AccordionTrigger>
    <AccordionPanel>Most orders arrive in 3 to 5 working days.</AccordionPanel>
  </AccordionItem>
</Accordion>

The value is always a list of strings, even when only one item can be open. Up and Down move between the headings, and Home and End jump to the first and last. Space and Enter open and close the focused one.

Examples#

Several open at once#

By default, opening an item closes the one that was open. Add multiple to let people keep several open, which suits sections that people compare.

import {
  Accordion,
  AccordionItem,

Controlled value#

Use value and onValueChange when something else needs to open or close the items, such as a "next step" button. Here the buttons set the list directly.

import * as React from "react"

import {

Props#

Accordion#

It also takes every prop of the Base UI accordion.

AccordionItem#

AccordionTrigger and AccordionPanel#

AccordionTrigger takes the text of the heading as children. AccordionPanel takes the content as children, and adds its own padding.