# Accordion · HeroUI

> A collapsible content panel for organizing information in a compact space

- Page: https://jiguang132.com/systems/heroui/docs/components/accordion
- Based on: HeroUI documentation (Apache-2.0) @ 60edd8ed751b1d2a270623fbb182bbcfa8baa9af

## Import

```tsx
import { Accordion } from '@heroui/react';
```

### Usage


> Example `accordion-basic`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/accordion


### Anatomy

Import the Accordion component and access all parts using dot notation.

```tsx
import { Accordion } from '@heroui/react';

export default () => (
  <Accordion>
    <Accordion.Item>
      <Accordion.Heading>
        <Accordion.Trigger>
          <Accordion.Indicator />
        </Accordion.Trigger>
      </Accordion.Heading>
      <Accordion.Panel>
        <Accordion.Body/>
      </Accordion.Panel>
    </Accordion.Item>
  </Accordion>
)
```

### Surface


> Example `accordion-surface`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/accordion


### Multiple Expanded


> Example `accordion-multiple`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/accordion


### Controlled


> Example `accordion-controlled`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/accordion


### Custom Indicator


> Example `accordion-custom-indicator`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/accordion


### Disabled State


> Example `accordion-disabled`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/accordion


### FAQ Layout


> Example `accordion-faq`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/accordion


### Custom Styles


> Example `accordion-custom-styles`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/accordion


### Without Separator


> Example `accordion-without-separator`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/accordion


### Custom Render Function


> Example `accordion-custom-render-function`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/accordion


## Styling

### Passing Tailwind CSS classes


      {items.map((item, index) => (
        
          
            
              {item.iconUrl ? (
                <img
                  alt={item.title}
                  className="group-hover/item:scale-120 group-hover/item:-rotate-10 h-11 w-11 transition-[scale,rotate] duration-300 ease-out group-hover/item:drop-shadow-lg"
                  src={item.iconUrl}
                />
              ) : null}
              
                {item.title}
                {item.subtitle}
              
              svg]:size-4">
                
              
            
          
          
            {item.content}
          
        
      ))}
    
  );
}`} />

### Customizing the component classes

To customize the Accordion component classes, you can use the `@layer components` directive.
  
[Learn more](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes).

```css
@layer components {
  .accordion {
    @apply rounded-xl bg-gray-50;
  }

  .accordion__trigger {
    @apply font-semibold text-lg;
  }

  .accordion--outline {
    @apply shadow-lg border-2;
  }
}
```

HeroUI follows the [BEM](https://getbem.com/) methodology to ensure component variants and states are reusable and easy to customize.

### CSS Classes

The Accordion component uses these CSS classes ([View source styles](https://github.com/heroui-inc/heroui/blob/v3/packages/styles/components/accordion.css)):

#### Base Classes
- `.accordion` - Base accordion container
- `.accordion__body` - Content body container
- `.accordion__heading` - Heading wrapper
- `.accordion__indicator` - Expand/collapse indicator icon
- `.accordion__item` - Individual accordion item
- `.accordion__panel` - Collapsible panel container
- `.accordion__trigger` - Clickable trigger button

#### Variant Classes
- `.accordion--outline` - Outline variant with border and background

#### State Classes
- `.accordion__trigger[aria-expanded="true"]` - Expanded state
- `.accordion__panel[aria-hidden="false"]` - Panel visible state

### Interactive States

The component supports both CSS pseudo-classes and data attributes for flexibility:

- **Hover**: `:hover` or `[data-hovered="true"]` on trigger
- **Focus**: `:focus-visible` or `[data-focus-visible="true"]` on trigger
- **Disabled**: `:disabled` or `[aria-disabled="true"]` on trigger
- **Expanded**: `[aria-expanded="true"]` on trigger

## API Reference

### Accordion Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `allowsMultipleExpanded` | `boolean` | `false` | Whether multiple items can be expanded at once |
| `defaultExpandedKeys` | `Iterable` | - | The initial expanded keys |
| `expandedKeys` | `Iterable` | - | The controlled expanded keys |
| `onExpandedChange` | `(keys: Set) => void` | - | Handler called when expanded keys change |
| `isDisabled` | `boolean` | `false` | Whether the entire accordion is disabled |
| `variant` | `"default" \| "surface"` | `"default"` | The visual variant of the accordion |
| `hideSeparator` | `boolean` | `false` | Hide separator lines between accordion items |
| `className` | `string` | - | Additional CSS classes |
| `children` | `ReactNode` | - | The accordion items |
| `render` | `DOMRenderFunction<keyof React.JSX.IntrinsicElements, AccordionRenderProps>` | - | Overrides the default DOM element with a custom render function.|


### Accordion.Item Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `id` | `Key` | - | Unique identifier for the item |
| `isDisabled` | `boolean` | `false` | Whether this item is disabled |
| `defaultExpanded` | `boolean` | `false` | Whether item is initially expanded |
| `isExpanded` | `boolean` | - | Controlled expanded state |
| `onExpandedChange` | `(isExpanded: boolean) => void` | - | Handler for expanded state changes |
| `className` | `string` | - | Additional CSS classes |
| `children` | `ReactNode` | - | The item content |
| `render` | `DOMRenderFunction<keyof React.JSX.IntrinsicElements, AccordionItemRenderProps>` | - | Overrides the default DOM element with a custom render function.|

### Accordion.Trigger Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `className` | `string` | - | Additional CSS classes |
| `children` | `ReactNode \| RenderFunction` | - | Trigger content or render function |
| `onPress` | `() => void` | - | Additional press handler |
| `isDisabled` | `boolean` | - | Whether trigger is disabled |
| `render` | `DOMRenderFunction<keyof React.JSX.IntrinsicElements, TriggerRenderProps>` | - | Overrides the default DOM element with a custom render function.|

### Accordion.Panel Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `className` | `string` | - | Additional CSS classes |
| `children` | `ReactNode` | - | Panel content |
| `render` | `DOMRenderFunction<keyof React.JSX.IntrinsicElements, AccordionPanelRenderProps>` | - | Overrides the default DOM element with a custom render function.|

### Accordion.Indicator Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `className` | `string` | - | Additional CSS classes |
| `children` | `ReactNode` | - | Custom indicator icon |

### Accordion.Body Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `className` | `string` | - | Additional CSS classes |
| `children` | `ReactNode` | - | Body content |

---

Index of all JGuang resources: https://jiguang132.com/llms.txt