Eidetic

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