메인 콘텐츠로 이동

Accordion

Vertically stacked interactive headings that expand or hide related content.

Overview

Accordion is a compound component that follows the WAI-ARIA disclosure widget pattern and supports keyboard navigation by default. Each item can be expanded or collapsed independently. Use Accordion for collapsible content sections such as FAQs, settings panels, or detail sections where space is limited. Keep headers short and descriptive — they serve as the primary label for the hidden content. It supports both controlled (value + onValueChange) and uncontrolled (defaultValue) usage.

Accessibility

  • Follows the WAI-ARIA Accordion (disclosure widget) pattern.
  • Enter or Space toggles the focused item open or closed.
  • Arrow Down moves focus to the next header. Arrow Up moves to the previous header.
  • Home moves focus to the first header. End moves to the last header.
  • Each trigger has aria-expanded and aria-controls linking it to its content panel.

Import

import { Accordion } from "@cocso-ui/react";

Default

The default accordion renders each item with a chevron indicator that rotates when opened.

Hide Chevron

Set chevron= on Accordion.Trigger to hide the chevron icon.

API Reference

Accordion (Root Container)

PropTypeDefaultDescription
defaultValuestring | string[]-Value of the item(s) expanded by default. Use for uncontrolled scenarios where the component manages its own open state.
valuestring | string[]-Controlled expanded value. Accepts a single string or an array for multiple open items. Use together with `onValueChange`.
onValueChange(value: string | string[]) => void-Callback invoked when items are expanded or collapsed. Receives the new value (string or array).

Accordion.Item

PropTypeDefaultDescription
value*string-Unique string identifier for this accordion item. Must match the root's `value` or `defaultValue` to appear expanded.
disabledbooleanfalsePrevents this item from being opened or closed. The header remains visible but non-interactive.

Accordion.Header

Renders an <h3> element wrapping the trigger. Accepts standard HTML heading props.

Accordion.Trigger

PropTypeDefaultDescription
chevronbooleantrueWhen `true`, shows a rotating chevron icon indicating the expand/collapse state. Set to `false` when using a custom indicator.

Accordion.Content

An animated panel that reveals content. Accepts Base UI Accordion.Panel props.