Accordion

Beta

Stacked sections that expand and collapse, one or several at a time.

Yes. Every component is a plain .astro file with a small script.

The code is copied into your project, so edit the classes freely.

MIT. Use it in personal and commercial projects.

---
import Accordion from "@/components/ui/accordion/Accordion.astro";
import AccordionItem from "@/components/ui/accordion/AccordionItem.astro";
import AccordionTrigger from "@/components/ui/accordion/AccordionTrigger.astro";
import AccordionContent from "@/components/ui/accordion/AccordionContent.astro";
---

<Accordion class="max-w-md">
  <AccordionItem value="framework" open>
    <AccordionTrigger>Does it work without a framework?</AccordionTrigger>
    <AccordionContent>Yes. Every component is a plain .astro file with a small script.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="styles">
    <AccordionTrigger>Can I change the styles?</AccordionTrigger>
    <AccordionContent>The code is copied into your project, so edit the classes freely.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="license">
    <AccordionTrigger>What is the license?</AccordionTrigger>
    <AccordionContent>MIT. Use it in personal and commercial projects.</AccordionContent>
  </AccordionItem>
</Accordion>

Installation

npx eris-ui@latest add accordion

pnpm dlx eris-ui@latest add accordion

bunx eris-ui@latest add accordion

yarn dlx eris-ui@latest add accordion

Installs @zag-js/accordion, @zag-js/vanilla.

Open on load

Add open to an AccordionItem to show it when the page loads. The panel is in the HTML already, so it does not flash closed before the script runs.

Several open at once

By default, opening an item closes the one that was open. With multiple, each item opens and closes on its own.

Orders leave the warehouse within two working days.

Send anything back within 30 days for a full refund.

Two years, covering faults in materials and assembly.

---
import Accordion from "@/components/ui/accordion/Accordion.astro";
import AccordionItem from "@/components/ui/accordion/AccordionItem.astro";
import AccordionTrigger from "@/components/ui/accordion/AccordionTrigger.astro";
import AccordionContent from "@/components/ui/accordion/AccordionContent.astro";
---

<Accordion multiple class="max-w-md">
  <AccordionItem value="shipping" open>
    <AccordionTrigger>Shipping</AccordionTrigger>
    <AccordionContent>Orders leave the warehouse within two working days.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="returns" open>
    <AccordionTrigger>Returns</AccordionTrigger>
    <AccordionContent>Send anything back within 30 days for a full refund.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="warranty">
    <AccordionTrigger>Warranty</AccordionTrigger>
    <AccordionContent>Two years, covering faults in materials and assembly.</AccordionContent>
  </AccordionItem>
</Accordion>

Always one open

Clicking the open item closes it. Set collapsible={false} to keep one item open at all times. This has no effect with multiple.

<Accordion collapsible={false}>
  <AccordionItem value="monthly" open>
    ...
  </AccordionItem>
</Accordion>

Disabled items

A disabled item cannot be opened, and the arrow keys skip it. Put disabled on the Accordion to disable every item.

Your name, avatar and time zone.

Only workspace owners can see billing.

Password, two-factor codes and active sessions.

---
import Accordion from "@/components/ui/accordion/Accordion.astro";
import AccordionItem from "@/components/ui/accordion/AccordionItem.astro";
import AccordionTrigger from "@/components/ui/accordion/AccordionTrigger.astro";
import AccordionContent from "@/components/ui/accordion/AccordionContent.astro";
---

<Accordion class="max-w-md">
  <AccordionItem value="profile">
    <AccordionTrigger>Profile</AccordionTrigger>
    <AccordionContent>Your name, avatar and time zone.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="billing" disabled>
    <AccordionTrigger>Billing</AccordionTrigger>
    <AccordionContent>Only workspace owners can see billing.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="security">
    <AccordionTrigger>Security</AccordionTrigger>
    <AccordionContent>Password, two-factor codes and active sessions.</AccordionContent>
  </AccordionItem>
</Accordion>

Heading level

Each trigger is a button inside a heading, so screen reader users can jump between sections. The heading is an h3 by default. Set as to the level that fits your page outline.

<AccordionTrigger as="h2">Shipping</AccordionTrigger>

Keyboard

Key	Does
`Tab`	Moves focus to the next header or into a panel
`Enter` or `Space`	Opens or closes the focused item
`↓` / `↑`	Next or previous header, wrapping at the ends
`Home` / `End`	First or last header

Parts

Component	Renders
`Accordion`	The root. Props: `id`, `multiple`, `collapsible`, `disabled`
`AccordionItem`	One section. Props: `value`, `open`, `disabled`
`AccordionTrigger`	The heading and button that toggle the item, with a chevron. Prop: `as`
`AccordionContent`	The panel shown when the item is open