Accordion

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

Installation

›pnpm dlx shadcn@latest add @evolphin/accordion

Usage

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

<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>

Type Definitions

interface AccordionProps {
  /** The type of accordion: "single" or "multiple" */
  type: "single" | "multiple";  
AccordionProps.type: "single" | "multiple"
The type of accordion: "single" or "multiple"
  /** Whether an accordion item can be collapsed after it has been opened */
  ?: boolean;
  /** The value of the item to expand */
  ?: string | string[];
  /** Whether the component is disabled */
  ?: boolean;
}

Examples

Default

API Reference

Prop	Type	Default	Description
`type`	`"single" \| "multiple"`	-	Determines whether one or multiple items can be opened at the same time.
`collapsible`	`boolean`	`false`	When type is "single", allows closing content when clicking trigger for an open item.
`value`	`string`	-	The controlled value of the item to expand.
`defaultValue`	`string`	-	The default value of the item to expand.
`onValueChange`	`(value: string) => void`	-	Event handler called when the expanded state of an item changes.
`disabled`	`boolean`	`false`	When true, prevents the user from interacting with the accordion.
`dir`	`"ltr" \| "rtl"`	`"ltr"`	The reading direction of the accordion.
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`	The orientation of the accordion.

AccordionItem

Prop	Type	Default	Description
`value`	`string`	-	A unique value for the item.
`disabled`	`boolean`	`false`	When true, prevents the user from interacting with the item.
`className`	`string`	-	Additional CSS classes

AccordionTrigger

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	The content of the trigger.
`className`	`string`	-	Additional CSS classes

AccordionContent

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	The content of the accordion.
`className`	`string`	-	Additional CSS classes

Accessibility

Keyboard:
- Space or Enter: When focus is on an AccordionTrigger, expands or collapses the associated content.
- Tab: Moves focus to the next focusable element.
- ArrowDown / ArrowUp: Moves focus to the next/previous trigger.
- Home / End: Moves focus to the first/last trigger.
Screen Reader:
- The AccordionTrigger has aria-controls set to the ID of the AccordionContent.
- The AccordionTrigger has aria-expanded set to true or false.
- The AccordionContent has role="region" and aria-labelledby set to the ID of the AccordionTrigger.

Search

Accordion

Is it accessible?

Is it styled?

Is it animated?

On this page