Accordion

Layout
Navigation

Collapsible sections to organize and hide content. Built on Radix UI with smooth animations.

Preview

Single item open at a time with collapsible behavior

Selection Types

Control how many items can be open

Single (one item at a time)

Multiple (any number open)

Large Variant

Increased size for FAQ sections and prominent headers

With Rich Content

Accordion content can include any elements

Props

Accordion component API reference

PropTypeDefaultDescription
type'single' | 'multiple'—Selection mode (required)
collapsiblebooleanfalseAllow closing all items (single type only)
valuestring | string[]—Controlled open item(s)
defaultValuestring | string[]—Default open item(s)
onValueChange(value: string | string[]) => void—Callback when value changes
disabledbooleanfalseDisable all items

AccordionItem Props

PropTypeDefaultDescription
valuestring—Unique value for this item (required)
disabledbooleanfalseDisable this item

AccordionTrigger Props

PropTypeDefaultDescription
variant'default' | 'large''default'Trigger size variant

Usage

Import and implementation example

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

export default function Example() {
  return (
    <>
      {/* Single selection, collapsible */}
      <Accordion type="single" collapsible>
        <AccordionItem value="item-1">
          <AccordionTrigger>Section 1</AccordionTrigger>
          <AccordionContent>
            Content for section 1
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-2">
          <AccordionTrigger>Section 2</AccordionTrigger>
          <AccordionContent>
            Content for section 2
          </AccordionContent>
        </AccordionItem>
      </Accordion>

      {/* Multiple selection */}
      <Accordion type="multiple" defaultValue={['item-1']}>
        <AccordionItem value="item-1">
          <AccordionTrigger>Section 1</AccordionTrigger>
          <AccordionContent>Content 1</AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-2">
          <AccordionTrigger>Section 2</AccordionTrigger>
          <AccordionContent>Content 2</AccordionContent>
        </AccordionItem>
      </Accordion>

      {/* Large variant for FAQs */}
      <Accordion type="single" collapsible>
        <AccordionItem value="faq-1">
          <AccordionTrigger variant="large">
            Frequently Asked Question?
          </AccordionTrigger>
          <AccordionContent>
            Answer to the question.
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </>
  )
}

Features

Built-in functionality

  • Single or multiple: Control how many items can be open
  • Collapsible option: Allow closing all items in single mode
  • Smooth animations: 200ms slide transitions
  • Large variant: Bigger trigger for FAQ sections
  • Radix UI primitives: Built on accessible components
  • Keyboard navigation: Arrow keys, Home, End support
  • Controlled & uncontrolled: Flexible state management
  • Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Triggers use role="button" with aria-expandedContent regions use role="region"Proper aria-controls linking

Keyboard Navigation

KeyAction
TabFocus accordion triggers
Enter/SpaceToggle open/closed
Arrow DownMove to next trigger
Arrow UpMove to previous trigger
HomeMove to first trigger
EndMove to last trigger

Notes

  • State changes announced to screen readers
  • Focus remains on trigger after toggle
  • Disabled items are skipped in navigation
  • Content hidden from assistive tech when collapsed

Related Components

CollapsibleTabsDisclosure