Accordion

Accordion stacks headings that each show or hide a section of content. Use it for questions and answers, settings groups and other content people scan before they read it in full.

Installation

bash

npx @smicolon/fasla-ui@latest add accordion

Run init once per project before adding components. See Installation.

Accordion is built on Base UI, so it needs the @base-ui/react package. add installs it with the component, and so does the shadcn CLI.

Preview

Select a question, or move to it with Tab and press Enter or Space.

Orders arrive in 2 to 4 working days. You get a tracking link as soon as the parcel leaves our warehouse.

Variants

Four styles, set with variant on Accordion so every item in a group matches. default divides the items with a line and suits FAQ pages. split sets each item on its own card with a shadow, and outline draws a border round each one. Both leave 8px between items, for an accordion that sits beside other cards. table draws one box round the whole group, for structured details.

default

Orders arrive in 2 to 4 working days. You get a tracking link as soon as the parcel leaves our warehouse.

split

Orders arrive in 2 to 4 working days. You get a tracking link as soon as the parcel leaves our warehouse.

outline

Orders arrive in 2 to 4 working days. You get a tracking link as soon as the parcel leaves our warehouse.

table

Orders arrive in 2 to 4 working days. You get a tracking link as soon as the parcel leaves our warehouse.

Indicator

indicator sets the mark at the end of each heading. chevron, the default, points down and turns to point up while the item is open. plus shows a plus that becomes a minus, which makes the action explicit. The mark sits at the end of the line, so on a right-to-left page it moves to the other side on its own.

chevron

Orders arrive in 2 to 4 working days. You get a tracking link as soon as the parcel leaves our warehouse.

plus

Orders arrive in 2 to 4 working days. You get a tracking link as soon as the parcel leaves our warehouse.

Avatars, icons and nested accordions

Put an Avatar or a 16px icon before the title, inside AccordionTrigger, and the row leaves 12px between them. Hover underlines the title only. Hide the avatar or icon from screen readers with aria-hidden, because the title already names the row. To line the content up under the title, indent it with a class such as ps-11 on AccordionContent. For a second level, put another Accordion inside AccordionContent, and keep it for content that really has parents and children.

Handles billing and invoices. Replies within one working day.

Change your name, email address and the language the store shows you.

Everything about how you sign in and what we know about you.

Your name, photo and the address we deliver to.

Props

Prop	Type	Default	Description
`variant`	`"default" \| "split" \| "outline" \| "table"`	`"default"`	The look of every item in the group.
`indicator`	`"chevron" \| "plus"`	`"chevron"`	The mark at the end of each heading.
`multiple`	`boolean`	`false`	Lets more than one item stay open at a time.
`defaultValue`	`string[]`	—	The items open on first render, by their `value`.
`value`	`string[]`	—	The open items, when you control them.
`onValueChange`	`(value, eventDetails) => void`	—	Called with the open items whenever one opens or closes.
`hiddenUntilFound`	`boolean`	`false`	Lets the browser's find in page search closed items and open the one it finds.
`AccordionItem`	`{ value }`	—	One item. Its `value` is what `value` and `defaultValue` list.
`AccordionTrigger`	`ReactNode`	—	The heading: the title, with an optional avatar or icon before it. The indicator is added for you.
`AccordionContent`	`ReactNode`	—	The section that opens under the heading.
`className`	`string`	—	Extra classes. On `AccordionContent` they go on the inner box, which holds the padding.

Usage

Basic accordion

tsx

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

export function DeliveryQuestions() {
  return (
    <Accordion defaultValue={["0"]}>
    <AccordionItem value="0">
      <AccordionTrigger>How long does delivery take?</AccordionTrigger>
      <AccordionContent>Orders arrive in 2 to 4 working days. You get a tracking link as soon as the parcel leaves our warehouse.</AccordionContent>
    </AccordionItem>
    <AccordionItem value="1">
      <AccordionTrigger>Can I change my order after paying?</AccordionTrigger>
      <AccordionContent>Yes, within an hour of paying. Open the order from your account and choose Edit order.</AccordionContent>
    </AccordionItem>
    <AccordionItem value="2">
      <AccordionTrigger>What is your returns policy?</AccordionTrigger>
      <AccordionContent>Return any unused item within 30 days and we refund the full amount.</AccordionContent>
    </AccordionItem>
    </Accordion>
  )
}

Another style and indicator

tsx

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

export function DeliveryQuestionsTable() {
  return (
    <Accordion variant="table" indicator="plus">
    <AccordionItem value="0">
      <AccordionTrigger>How long does delivery take?</AccordionTrigger>
      <AccordionContent>Orders arrive in 2 to 4 working days. You get a tracking link as soon as the parcel leaves our warehouse.</AccordionContent>
    </AccordionItem>
    <AccordionItem value="1">
      <AccordionTrigger>Can I change my order after paying?</AccordionTrigger>
      <AccordionContent>Yes, within an hour of paying. Open the order from your account and choose Edit order.</AccordionContent>
    </AccordionItem>
    </Accordion>
  )
}

Several items open at once

tsx

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

export function DeliveryQuestionsOpen() {
  return (
    <Accordion multiple defaultValue={["0", "1"]}>
    <AccordionItem value="0">
      <AccordionTrigger>How long does delivery take?</AccordionTrigger>
      <AccordionContent>Orders arrive in 2 to 4 working days. You get a tracking link as soon as the parcel leaves our warehouse.</AccordionContent>
    </AccordionItem>
    <AccordionItem value="1">
      <AccordionTrigger>Can I change my order after paying?</AccordionTrigger>
      <AccordionContent>Yes, within an hour of paying. Open the order from your account and choose Edit order.</AccordionContent>
    </AccordionItem>
    </Accordion>
  )
}