# Accordion

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/starwind/accordion";
---

<Accordion defaultValue="item-1">
  <AccordionItem value="item-1">
    <AccordionTrigger>What is Astro?</AccordionTrigger>
    <AccordionContent>
      Astro is an web framework for building fast, scalable, and secure websites.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Why should I use Astro?</AccordionTrigger>
    <AccordionContent>
      Astro provides a set of features that make it an ideal choice for building fast,
      scalable, and secure websites.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>How do I get started with Astro?</AccordionTrigger>
    <AccordionContent>
      To get started with Astro, follow the instructions in the documentation.
    </AccordionContent>
  </AccordionItem>
</Accordion>
```
  </div>
  <div slot="react">
```tsx
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/starwind/accordion";

export function Example() {
  return (
    <Accordion defaultValue="item-1">
      <AccordionItem value="item-1">
        <AccordionTrigger>What is Astro?</AccordionTrigger>
        <AccordionContent>
          Astro is an web framework for building fast, scalable, and secure websites.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Why should I use Astro?</AccordionTrigger>
        <AccordionContent>
          Astro provides a set of features that make it an ideal choice for building fast,
          scalable, and secure websites.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>How do I get started with Astro?</AccordionTrigger>
        <AccordionContent>
          To get started with Astro, follow the instructions in the documentation.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}
```
  </div>
</FrameworkCodeSwitcher>

## Installation

```bash
npx starwind@latest add accordion
```

## Usage

### multiple

Use `type="multiple"` to allow multiple accordion items to be open at the same time.

```astro
---
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/starwind/accordion";
---

<Accordion type="multiple" defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger>What is Astro?</AccordionTrigger>
    <AccordionContent>
      Astro is an web framework for building fast, scalable, and secure websites.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Why should I use Astro?</AccordionTrigger>
    <AccordionContent>
      Astro provides a set of features that make it an ideal choice for building fast,
      scalable, and secure websites.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>How do I get started with Astro?</AccordionTrigger>
    <AccordionContent>
      To get started with Astro, follow the instructions in the documentation.
    </AccordionContent>
  </AccordionItem>
</Accordion>
```

> **Info:** Multiple accordions use an array for `defaultValue` because the Runtime may own more than one
open item.

### defaultValue

Use the `defaultValue` prop to set the default open item. If the prop is not provided, no items will be open by default.

```astro
---
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/starwind/accordion";
---

<Accordion defaultValue="item-3">
  <AccordionItem value="item-1">
    <AccordionTrigger>What is Astro?</AccordionTrigger>
    <AccordionContent>
      Astro is an web framework for building fast, scalable, and secure websites.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Why should I use Astro?</AccordionTrigger>
    <AccordionContent>
      Astro provides a set of features that make it an ideal choice for building fast,
      scalable, and secure websites.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>How do I get started with Astro?</AccordionTrigger>
    <AccordionContent>
      To get started with Astro, follow the instructions in the documentation.
    </AccordionContent>
  </AccordionItem>
</Accordion>
```

## Framework Availability
Accordion is available for Astro and React.
Astro available; React available
| Framework | Status | Notes |
| --- | --- | --- |
| Astro | available | - |
| React | available | - |
## API Reference
### Accordion
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `defaultValue` | `string \| string[]` | No | - | Primitive override | Sets the initial value when the component is uncontrolled. |
- Inherits div attributes.

### AccordionItem
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `value` | `string` | Yes | - | Wrapper prop | Controls or identifies the component value. |
- Inherits div attributes.

### AccordionTrigger
- Inherits button attributes.

### AccordionContent
- Inherits div attributes.
### Primitive And Runtime API
Behavior, state, events, form participation, and imperative methods are documented in the lower-level references.
- Primitive: [Accordion Primitive](/docs/primitives/accordion/)
- Runtime factory: [`createAccordion`](/docs/runtime/#create-accordion) from `@starwind-ui/runtime/accordion`

## Changelog

### v2.0.1

- Single accordions now default to collapsible.

### v2.0.0

- Rebuilt Accordion on Starwind Runtime for disclosure state and keyboard behavior; 
- See the [Accordion Primitive](/docs/primitives/accordion/) for the underlying unstyled anatomy and behavior API.

### v1.3.5

- Refactor tailwind variants functions into separate `variants.ts` file

### v1.3.3 

- Add `starwind:init` event listener to enable initialization of additional Accordions loaded after an initial page load, such as when using server islands
- Update the opening animation so that it does not play on initial accordion load

### v1.3.2 

- add named slot "icon" to `AccordionTrigger` to enable easy icon swapping

### v1.3.1

- simplified default styling to enable easier custom styling

### v1.3.0 

- style and focus state updates

### v1.2.0

- Add a `data-slot` attribute to all components to enable global styling updates

### v1.1.0

- `tailwind-variants` now implemented. This uses `tailwind-merge` under the hood to merge Tailwind classes without style conflicts, allowing you to override any existing classes using the `class` prop.