Accordion

Accordion display a list of high-level options that can expand/collapse to reveal more information.

Installation

npx nextui-cli@latest add accordion

The above command is for individual installation only. You may skip this step if @nextui-org/react is already installed globally.

Import

NextUI exports 2 accordion-related components:

• Accordion: The main component to display a list of accordion items.
• AccordionItem: The item component to display a single accordion item.

Usage

With Subtitle

Expand multiple items

If you set selectionMode to multiple, then the Accordion will allow multiple items to be expanded at the same time.

Compact

If you set isCompact to true, the Accordion will be displayed in a compact style.

Variants

Accordion has 4 variants: light, shadow, bordered and splitted.

Light variant

Shadow variant

Bordered variant

Splitted variant

Default expanded keys

If you want to expand some items by default, you can set the defaultExpandedKeys property to an array of keys.

Disabled keys

If you want to disable some items, you can set the disabledKeys property to an array of keys.

Start content

If you want to display some content before the accordion items, you can set the startContent property.

Custom Indicator

Accordion items have a property called indicator. You can use it to customize the open/close indicator.

The indicator can be also a function, which receives the isOpen, isDisabled and the default indicator as parameters.

Custom Motion

Accordion offers a motionProps property to customize the enter / exit animation.

Learn more about Framer motion variants here.

Controlled

Accordion is a controlled component, which means you need to control the selectedKeys property by yourself.

Accordion Item Slots

• base: The accordion item wrapper.
• heading: The accordion item heading. It contains the indicator and the title.
• trigger: The button that open/close the accordion item.
• titleWrapper: The wrapper of the title and subtitle.
• title: The accordion item title.
• subtitle: The accordion item subtitle.
• startContent: The content before the accordion item.
• indicator: The element that indicates the open/close state of the accordion item.
• content: The accordion item content.

Custom Accordion Styles

You can customize the accordion and accordion items styles by using any of the following properties:

• className: The class name of the accordion. Modify the accordion wrapper styles.(Accordion)
• itemClasses: The class names of the accordion items. Modify all accordion items styles at once. (Accordion)
• classNames: The class names of the accordion items. Modify each accordion item styles separately. (AccordionItem)

Here's an example of how to customize the accordion styles:

Data Attributes

AccordionItem has the following attributes on the base element:

• data-open: Whether the accordion item is open.
• data-disabled: When the accordion item is disabled.
• data-hover: When the accordion item is being hovered. Based on useHover.
• data-focus: When the accordion item is being focused. Based on useFocusRing.
• data-focus-visible: When the accordion item is being focused with the keyboard. Based on useFocusRing.
• data-disabled: When the accordion item is disabled. Based on isDisabled prop.
• data-pressed: When the accordion item is pressed. Based on usePress.

Accessibility

• Keyboard event support for Space, Enter, Arrow Up, Arrow Down and Home / End keys.
• Keyboard focus management and cross browser normalization.
• aria-expanded attribute for the accordion item.
• aria-disabled attribute for the accordion item.
• aria-controls attribute for the accordion item.

API

Accordion Props

Accordion Events

Accordion Item Props

Accordion Item Events

Types

Accordion Item Indicator Props

export type AccordionItemIndicatorProps = {  /**   * The current indicator, usually an arrow icon.   */
  indicator?: ReactNode;
  /**   * The current open status.   */
  isOpen?: boolean;
  /**   * The current disabled status.   * @default false   */
  isDisabled?: boolean;
};
  /**
   * The current indicator, usually an arrow icon.
   */
  indicator?: ReactNode;
  /**
   * The current open status.
   */
  isOpen?: boolean;
  /**
   * The current disabled status.
   * @default false
   */
  isDisabled?: boolean;
};

type indicator?: ReactNode | ((props: AccordionItemIndicatorProps) => ReactNode) | null;

Accordion Item classNames

export type AccordionItemClassnames = {  base?: string;
  heading?: string;
  trigger?: string;
  titleWrapper?: string;
  title?: string;
  subtitle?: string;
  startContent?: string;
  indicator?: string;
  content?: string;
};
  base?: string;
  heading?: string;
  trigger?: string;
  titleWrapper?: string;
  title?: string;
  subtitle?: string;
  startContent?: string;
  indicator?: string;
  content?: string;
};

Motion Props

export type MotionProps = {  /**   * If `true`, the opacity of the content will be animated   * @default true   */
  animateOpacity?: boolean;
  /**   * The height you want the content in its collapsed state.   * @default 0   */
  startingHeight?: number;
  /**   * The height you want the content in its expanded state.   * @default "auto"   */
  endingHeight?: number | string;
  /**   * The y-axis offset you want the content in its collapsed state.   * @default 10   */
  startingY?: number;
  /**   * The y-axis offset you want the content in its expanded state.   * @default 0   */
  endingY?: number;
} & HTMLMotionProps;
  /**
   * If `true`, the opacity of the content will be animated
   * @default true
   */
  animateOpacity?: boolean;
  /**
   * The height you want the content in its collapsed state.
   * @default 0
   */
  startingHeight?: number;
  /**
   * The height you want the content in its expanded state.
   * @default "auto"
   */
  endingHeight?: number | string;
  /**
   * The y-axis offset you want the content in its collapsed state.
   * @default 10
   */
  startingY?: number;
  /**
   * The y-axis offset you want the content in its expanded state.
   * @default 0
   */
  endingY?: number;
} & HTMLMotionProps;