core

Accordion

Example

Billing & Payments

Manage your payment methods, view past invoices, and update billing information.

Security Settings

Configure two-factor authentication, review active sessions, and set password policies.

Notifications

Choose which events trigger email or push notifications for your account.

Import

import { Accordion } from '@connor-adams/designsystem'

Usage

A disclosure stack for FAQs, settings groups, and statement breakdowns.

<Accordion
  type="single"
  defaultValue="fees"
  items={[
    { value: 'fees', title: 'How are fees categorised?', content: 'Bank fees map to the Fees category automatically.' },
    { value: 'sync', title: 'How often does it sync?', content: 'Connected accounts refresh every 6 hours.' },
  ]}
/>

Variants: type="single" | "multiple", collapsible, defaultValue.

Props

Prop	Type	Default
items	AccordionItem[]	[]
type	"single" \| "multiple" \| undefined	single
defaultValue	string \| string[] \| undefined	—
collapsible	boolean \| undefined	true