elementsaccordion

Accordion

Stacked disclosure component with single or multiple expanded sections.

Import#

import { Accordion } from 'moraine'

Slot Structure#

Stacked item list where each item has a clickable header and collapsible content.

root
└── item (×n)
    ├── header
    │   └── trigger
    │       ├── leading (Icon, optional)
    │       ├── label (optional)
    │       └── trailing (Icon, optional)
    └── content (optional)

Examples#

Single#

Single-open mode with controlled state and icon leading/trailing slots.

1
function Single() {
2
  const [openValue, setOpenValue] = createSignal<string[]>(['shipping'])
3

4
  return (
5
    <div class="w-lg space-y-3">
6
      <Accordion
7
        value={openValue()}
8
        onChange={setOpenValue}
9
        items={[
10
          {
11
            value: 'shipping',
12
            label: 'Shipping information',
13
            leading: 'i-lucide-truck',
14
            content:
15
              'Orders are processed in 1-2 business days and delivered in 3-5 business days.',
16
          },
17
          {
18
            value: 'returns',
19
            label: 'Returns policy',
20
            leading: 'i-lucide-rotate-ccw',
21
            content: 'Returns are accepted within 30 days of delivery.',
22
          },
23
          {
24
            value: 'support',
25
            label: 'Support',
26
            leading: 'i-lucide-life-buoy',
27
            content: 'Reach support any time at [email protected].',
28
          },
29
        ]}
30
      />
31

32
      <p class="text-xs text-muted-foreground">Current open value: {openValue()?.[0] ?? 'none'}</p>
33
    </div>
34
  )
35
}

Multiple#

Multiple-open mode with custom trailing icons.

1
function Multiple() {
2
  return (
3
    <Accordion
4
      multiple
5
      defaultValue={['a']}
6
      items={[
7
        {
8
          value: 'a',
9
          label: 'Account setup',
10
          content: 'Create your account and verify email.',
11
        },
12
        {
13
          value: 'b',
14
          label: 'Team invite',
15
          content: 'Invite teammates to your workspace.',
16
        },
17
        {
18
          value: 'c',
19
          label: 'Billing',
20
          content: 'Add a payment method to continue.',
21
        },
22
      ]}
23
      classes={{
24
        root: 'max-w-xl rounded-lg b-1 b-border border-border bg-background',
25
        trigger: 'px-4',
26
        content: 'px-4 text-foreground',
27
      }}
28
    />
29
  )
30
}

Disabled + Custom Content#

Mix disabled items with rich JSX content blocks.

1
function DisabledCustomContent() {
2
  return (
3
    <Accordion
4
      defaultValue={['setup']}
5
      trailing="icon-plus"
6
      items={[
7
        {
8
          value: 'setup',
9
          label: 'Setup checklist',
10
          leading: 'i-lucide-list-checks',
11
          content: (
12
            <div class="space-y-2">
13
              <p>Complete these steps before inviting your team:</p>
14
              <ul class="pl-5 list-disc space-y-1">
15
                <li>Create workspace profile</li>
16
                <li>Configure authentication</li>
17
                <li>Enable notifications</li>
18
              </ul>
19
              <div class="text-xs text-muted-foreground p-2 rounded-md bg-muted">
20
                Tip: You can finish the checklist later from Settings.
21
              </div>
22
            </div>
23
          ),
24
        },
25
        {
26
          value: 'security',
27
          label: 'Security review (Locked)',
28
          leading: 'i-lucide-shield-check',
29
          disabled: true,
30
          content: 'Available on Pro plan and above.',
31
        },
32
        {
33
          value: 'integrations',
34
          label: 'Integrations',
35
          leading: 'i-lucide-plug',
36
          content: (
37
            <div class="pt-2 space-y-2">
38
              <p>Connect your tools to automate the workflow.</p>
39
              <p>
40
                Supported: <strong>GitHub</strong>, <strong>Slack</strong>, and{' '}
41
                <strong>Notion</strong>.
42
              </p>
43
            </div>
44
          ),
45
        },
46
      ]}
47
      classes={{
48
        root: 'max-w-xl rounded-lg b-1 b-border border-border bg-background',
49
        trigger: 'px-3',
50
        content: 'px-4 text-foreground',
51
      }}
52
    />
53
  )
54
}

API Reference#

Attributes#

Slotroot1 attribute

Container that owns the accordion item collection and shared state attributes.

Data Attributes

Data Attribute	Description
data-disabled	Present when the component or item is disabled.

Props#

Prop	Type	Default	Description
class	`ClassValue`	—	Class applied to the component root or trigger element.
classes	`AccordionT.Classes \| undefined`	—	—
collapsible	`boolean \| undefined`	`true`	Whether the last expanded item can be collapsed.
defaultValue	`string[] \| undefined`	`[]`	Default list of expanded item values for uncontrolled usage.
disabled	`boolean \| undefined`	`false`	Whether the entire accordion is disabled.
id	`string \| undefined`	—	Unique identifier for the accordion root element.
items	`AccordionT.Item[] \| undefined`	—	Array of accordion items to render.
loopFocus	`boolean \| undefined`	`true`	Whether arrow-key focus wraps from the last trigger to the first and vice versa.
multiple	`boolean \| undefined`	`false`	Whether multiple accordion items can be expanded at the same time.
onChange	`((value: string[]) => void) \| undefined`	—	Callback when the expanded item values change.
ref	`JSX.HTMLElementTags["div"] extends { ref?: infer Ref; } ? Ref : never \| undefined`	—	—
style	`JSX.CSSProperties \| undefined`	—	—
styles	`AccordionT.Styles \| undefined`	—	—
trailing	`IconT.Name`	`icon-chevron-down`	Trailing icon name for all accordion items.
unmountOnHide	`boolean \| undefined`	`true`	Whether to unmount accordion content when hidden.
value	`string[] \| undefined`	—	Controlled list of expanded item values.

Items#

Prop	Type	Default	Description
content	`JSX.Element`	—	Content to display when the accordion item is expanded.
disabled	`boolean \| undefined`	`false`	Whether the accordion item is disabled.
label	`JSX.Element`	—	Header label for the accordion item.
leading	`IconT.Name`	—	Leading icon name for the accordion item.
value	`string \| undefined`	—	Unique value for the accordion item.