Skip to main content

Accordion

Layout
Stable

Expandable content sections with smooth animations. Perfect for FAQs, settings panels, and collapsible content.

Quick Import
Full Documentation
import { Accordion } from "@cohere-ai/waypoint-ui/accordion";

Live Preview

Loading Accordion...
Open in StorybookOpen in v0View Docs

Props

NameTypeDefaultDescription
type'single' | 'multiple'-Whether one or multiple items can be open at a time
collapsiblebooleanfalseWhen type='single', allows closing the currently open item
defaultValuestring | string[]-Default open item(s)
valuestring | string[]-Controlled open item(s)
onValueChangefunction-Callback when open value changes

Examples

Basic Accordion

Single-item accordion with collapsible support

1
import {
2
  Accordion,
3
  AccordionItem,
4
  AccordionTrigger,
5
  AccordionContent,
6
} from '@cohere-ai/waypoint-ui/accordion';
7
 
8
<Accordion type="single" collapsible>
9
  <AccordionItem value="item-1">
10
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
11
    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
12
  </AccordionItem>
13
  <AccordionItem value="item-2">
14
    <AccordionTrigger>Is it animated?</AccordionTrigger>
15
    <AccordionContent>Yes. It uses CSS animations for smooth transitions.</AccordionContent>
16
  </AccordionItem>
17
</Accordion>

Multiple Open Items

Allow multiple accordion items to be open simultaneously

1
import {
2
  Accordion,
3
  AccordionItem,
4
  AccordionTrigger,
5
  AccordionContent,
6
} from '@cohere-ai/waypoint-ui/accordion';
7
 
8
<Accordion type="multiple" defaultValue={['item-1', 'item-2']}>
9
  <AccordionItem value="item-1">
10
    <AccordionTrigger>Section 1</AccordionTrigger>
11
    <AccordionContent>Content for section 1</AccordionContent>
12
  </AccordionItem>
13
  <AccordionItem value="item-2">
14
    <AccordionTrigger>Section 2</AccordionTrigger>
15
    <AccordionContent>Content for section 2</AccordionContent>
16
  </AccordionItem>
17
</Accordion>

Accessibility

WCAG AA

Keyboard Navigation

Triggers are <button> elements, focusable with Tab. Enter/Space toggles items.

Note: Implements WAI-ARIA Accordion pattern. Caret rotates 180° to indicate open state.

Design Guidelines

Do

Use for FAQ sections, settings panels, and progressive disclosure of content.

Keep trigger labels short and descriptive.

Don't

Nest accordions deeply — use Collapsible sections instead.

Use when all content should be visible at once.

Real-World Examples

Common use cases and production-ready implementations.

Settings Panel

Accordion used to organize notification settings

<Accordion type="single" collapsible defaultValue="notifications">
  <AccordionItem value="notifications">
    <AccordionTrigger>Notification Settings</AccordionTrigger>
    <AccordionContent>
      <Switch /> Email notifications
    </AccordionContent>
  </AccordionItem>
</Accordion>

Found an Issue?

If you've encountered a bug or have feedback about the Accordion component, please report it to our team. Your feedback helps us improve Waypoint.

Available for all users • Issue will be created in Linear

Was this page helpful?

Your feedback helps us improve our documentation.

Need Help?

Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.