# Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





<ComponentPreview name="accordion-demo">
  <Accordion type="single" className="w-full max-w-md mx-auto my-8">
    <AccordionItem value="item-1">
      <AccordionTrigger>
        What is this component for?
      </AccordionTrigger>

      <AccordionContent>
        It is an accordion, primarily used for FAQs and hiding supplementary information to save vertical space.
      </AccordionContent>
    </AccordionItem>

    <AccordionItem value="item-2">
      <AccordionTrigger>
        Is it styled according to DESIGN.md?
      </AccordionTrigger>

      <AccordionContent>
        Yes. It strictly adheres to the Monolith design principles, utilizing smooth transitions and removing arbitrary styling like hover underlines.
      </AccordionContent>
    </AccordionItem>

    <AccordionItem value="item-3">
      <AccordionTrigger>
        Is it accessible?
      </AccordionTrigger>

      <AccordionContent>
        Yes. It relies on Radix UI's accessible primitives, supporting full keyboard navigation and screen reader attributes.
      </AccordionContent>
    </AccordionItem>
  </Accordion>
</ComponentPreview>

## Installation [#installation]

```bash
npx shadcn@latest add "https://ui.manpuc.me/r/accordion.json"
```

## Usage [#usage]

After you add the component with the CLI, import it from your UI folder:

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

export function MyComponent() {
  return (
    <Accordion type="single" collapsible>
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. It adheres to the WAI-ARIA design pattern.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}
```

## Examples [#examples]

### Multiple [#multiple]

Allow multiple items to be open at the same time by setting the `type` prop to `"multiple"`.

<ComponentPreview name="accordion-multiple">
  <Accordion type="multiple" className="w-full max-w-md mx-auto my-8">
    <AccordionItem value="item-1">
      <AccordionTrigger>
        Section 1
      </AccordionTrigger>

      <AccordionContent>
        This is the first section. You can open multiple sections at once.
      </AccordionContent>
    </AccordionItem>

    <AccordionItem value="item-2">
      <AccordionTrigger>
        Section 2
      </AccordionTrigger>

      <AccordionContent>
        This is the second section. Both this and section 1 can be open.
      </AccordionContent>
    </AccordionItem>

    <AccordionItem value="item-3">
      <AccordionTrigger>
        Section 3
      </AccordionTrigger>

      <AccordionContent>
        This is the third section. All three can be open simultaneously.
      </AccordionContent>
    </AccordionItem>
  </Accordion>
</ComponentPreview>

### Disabled [#disabled]

You can disable specific accordion items by adding the `disabled` prop to the `AccordionItem`.

<ComponentPreview name="accordion-disabled">
  <Accordion type="single" className="w-full max-w-md mx-auto my-8">
    <AccordionItem value="item-1">
      <AccordionTrigger>
        Active Section
      </AccordionTrigger>

      <AccordionContent>
        This section can be opened and closed normally.
      </AccordionContent>
    </AccordionItem>

    <AccordionItem value="item-2">
      <AccordionTrigger>
        Disabled Section
      </AccordionTrigger>

      <AccordionContent>
        You cannot open this section because it is disabled.
      </AccordionContent>
    </AccordionItem>
  </Accordion>
</ComponentPreview>

## API Reference [#api-reference]

The Accordion components extend standard HTML attributes and radix-ui primitives.

| Prop            | Type             | Default              | Description                                                                                          |                                                                                                                         |
| --------------- | ---------------- | -------------------- | ---------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| `type`          | \`"single"       | "multiple"\`         | `"single"`                                                                                           | Determines whether one or multiple items can be opened at the same time.                                                |
| `value`         | \`string         | string\[]\`          | -                                                                                                    | The controlled value of the item(s) to expand.                                                                          |
| `defaultValue`  | \`string         | string\[]\`          | -                                                                                                    | The value of the item(s) to expand when initially rendered. Use when you do not need to control the state of the items. |
| `onValueChange` | \`(value: string | string\[]) => void\` | -                                                                                                    | Event handler called when the expanded state of an item changes.                                                        |
| `collapsible`   | `boolean`        | `false`              | When type is "single", allows closing content when clicking trigger for an open item.                |                                                                                                                         |
| `disabled`      | `boolean`        | `false`              | When `true`, prevents the user from interacting with the accordion and all its items.                |                                                                                                                         |
| `dir`           | \`"ltr"          | "rtl"\`              | `"ltr"`                                                                                              | The reading direction of the accordion. If omitted, inherits globally from DirectionProvider or assumes LTR.            |
| `orientation`   | \`"horizontal"   | "vertical"\`         | `"vertical"`                                                                                         | The orientation of the accordion.                                                                                       |
| `asChild`       | `boolean`        | `false`              | Change the default rendered element for the one passed as a child, merging their props and behavior. |                                                                                                                         |