Accordion

Used to show and hide sections of related content on a page.

Some value 2...

<AccordionRoot defaultValue={["b"]}>
  {items.map((item) => (
    <AccordionItem key={item.value} value={item.value}>
      <AccordionItemTrigger>{item.title}</AccordionItemTrigger>
      <AccordionItemContent>{item.text}</AccordionItemContent>
    </AccordionItem>
  ))}
</AccordionRoot>

Examples

Expand Multiple Items

Use the multiple prop to allow multiple items to be expanded at once.

<AccordionRoot multiple>
  {items.map((item) => (
    <AccordionItem key={item.value} value={item.value}>
      <AccordionItemTrigger>{item.title}</AccordionItemTrigger>
      <AccordionItemContent>{item.text}</AccordionItemContent>
    </AccordionItem>
  ))}
</AccordionRoot>

Disabled Item

Pass the disabled prop to any AccordionItem to prevent it from being expanded or collapsed.

<AccordionRoot>
  {itemsWithDisabled.map((item) => (
    <AccordionItem
      key={item.value}
      value={item.value}
      disabled={item.disabled}
    >
      <AccordionItemTrigger>{item.title}</AccordionItemTrigger>
      <AccordionItemContent>{item.text}</AccordionItemContent>
    </AccordionItem>
  ))}
</AccordionRoot>

With Avatar

Here's an example of composing an accordion with an avatar.

<AccordionRoot>
  {itemsWithAvatars.map((item) => (
    <AccordionItem key={item.value} value={item.value}>
      <AccordionItemTrigger>
        <div className="flex items-center gap-3">
          <Avatar src={item.src} alt={item.name} />
          <span>{item.name}</span>
        </div>
      </AccordionItemTrigger>
      <AccordionItemContent>
        This is some detailed information about {item.name}.
      </AccordionItemContent>
    </AccordionItem>
  ))}
</AccordionRoot>

With Subtext

Here's an example of adding a subtext to an accordion item.

<AccordionRoot>
  {items.map((item) => (
    <AccordionItem key={item.value} value={item.value}>
      <AccordionItemTrigger>
        <div className="flex flex-col">
          <span>{item.title}</span>
          <Text>Click to expand</Text>
        </div>
      </AccordionItemTrigger>
      <AccordionItemContent>{item.text}</AccordionItemContent>
    </AccordionItem>
  ))}
</AccordionRoot>