container · Normal DOM only

Accordion

Stacked collapsible sections. Single or multiple-open mode, Radix-backed keyboard nav.

Use Accordion for FAQ pages, optional advanced settings, anything where the user picks one section at a time. For always-visible content prefer plain sections.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { Accordion, AccordionItem } from '@8maverik8/twenty-design';

Examples

Single, collapsible

What a record needs at a minimum.

tsx
<Accordion type="single" defaultValue="basics" collapsible>
  <AccordionItem value="basics" trigger="Basics">…</AccordionItem>
  …
</Accordion>

Variants

type
singledefaultOne section open at a time. Pair with collapsible to allow all-closed.
multipleAny number open. Each item independent.

Guidelines

✓
Use single + collapsible for FAQ.Users want to focus on one answer; closing all is sometimes useful.
✕
Hide critical actions inside an Accordion.Users may never expand the section. Surface anything required to make progress.