Accordion

Expandable content sections with single or multiple open items.

Overview

  • Use disclosure when content can remain hidden until requested.

Aliases

disclosure

When to use

  • Use Accordion for stacked sections where people may open one or a few items at a time.
  • Use descriptions when the item titles alone do not tell people what is inside.

When not to use

  • Do not use Accordion when the user needs rapid side-by-side comparison across all content.
  • Do not use Accordion for major page-level view switching; use Tabs.

Structural parts

disclosure item

item

Single accordion row with trigger and panel.

disclosure control

trigger

Interactive row that opens or closes its panel.

revealed content

panel

Associated content region for the item.

Public interface

Props
NameTypeDefaultDescription
itemsArray<{ value: string; label: string; content: string; description?: string; disabled?: boolean }>—Accordion item definitions.
valuestring | string[]—Controlled open item or items.
size'sm' | 'md''md'Chooses the accordion size recipe.
allowMultiplebooleanfalseAllows multiple items to remain open.
themeThemeContract—Sets the theme used to resolve component styles.
Slots
NameDescription
defaultAccordion is data-driven and does not expose compound item slots.

Variants, sizes, and states

Variants

  • single: One open item at a time
  • multiple: Multiple items can remain open

Sizes

  • sm: Compact disclosure
  • md: Default disclosure

States

  • closed: Panel hidden
  • open: Panel visible
  • disabled: Item unavailable

Accessibility

Semantics

  • Uses disclosure-style controls paired with associated content regions.

Keyboard

  • Trigger controls remain keyboard reachable and togglable.

Screen readers

  • Expanded and collapsed state remains explicit through the trigger relationship.

Checklist

  • Verify that the control has an accessible name.
  • Verify that keyboard focus is visible in every state and size.
  • Identify disabled, selected, and error states with text or symbols as well as color.

Tokens and CSS variables

root

--dk-accordion-gap
0.75rem

item

--dk-accordion-item-bg
#f2f5fb
--dk-accordion-item-border
#95989d
--dk-accordion-item-border-width
1px
--dk-accordion-item-radius
clamp(1.333rem, 1.2222rem + 0.494vw, 1.667rem)

trigger

--dk-accordion-trigger-bg
#f2f5fb
--dk-accordion-trigger-fg
#16181c
--dk-accordion-trigger-bg-open
#d7e9ff
--dk-accordion-trigger-fg-open
#000f4d
--dk-accordion-trigger-fg-disabled
#95989d
--dk-accordion-trigger-gap
0.75rem
--dk-accordion-trigger-inline-padding
1rem
--dk-accordion-trigger-block-size
48px
--dk-accordion-trigger-size
1rem
--dk-accordion-trigger-weight
650

indicator

--dk-accordion-indicator-size
1rem
--dk-accordion-indicator-color
#2072e4
--dk-accordion-indicator-color-open
#000f4d

label

--dk-accordion-label-color
inherit
--dk-accordion-label-size
inherit
--dk-accordion-label-weight
inherit

description

--dk-accordion-description-color
#16181c
--dk-accordion-description-size
0.8125rem

panel

--dk-accordion-panel-bg
#f2f5fb
--dk-accordion-panel-fg
#16181c
--dk-accordion-panel-padding
1rem
--dk-accordion-panel-size
0.9375rem

Examples

Starter

Single-open disclosure

A standard disclosure list with one open item at a time.

<Accordion items={faqItems} />

Common patterns

Multi-open content

Allow multiple open items when comparing content matters more than compression.

<Accordion items={faqItems} allowMultiple={true} value={['overview', 'timeline']} />

Edge cases

Unavailable section

Individual items can be disabled without removing them.

<Accordion items={[{ value: 'overview', label: 'Overview', content: 'Ready' }, { value: 'timeline', label: 'Timeline', content: 'Locked', disabled: true }]} />

Mathematical fixtures

Calculated fixtures; browser evidence is not collected. Layout estimates use declared text behavior and maximum token values.

accordion-sm

pass

size=sm

  • Evidence: mathematical
  • Coverage: complete (3 / 3 declared kinds evaluated)
  • Declared: contrast, target, layout
  • Evaluated: contrast, target, layout
  • Contrast: 98.5 Lc, 98.5 Lc
  • Target: 44 px
  • Layout: panel · wrap-anywhere 284 px single-line estimate; 40 px minimum width
    320 px: pass 1 line; 128 px estimated height420 px: pass 1 line; 128 px estimated height

accordion-md-open

pass

size=md

  • Evidence: mathematical
  • Coverage: complete (3 / 3 declared kinds evaluated)
  • Declared: contrast, target, layout
  • Evaluated: contrast, target, layout
  • Contrast: 98.5 Lc, 98.5 Lc
  • Target: 48 px
  • Layout: panel · wrap-anywhere 376 px single-line estimate; 40 px minimum width
    320 px: pass 2 lines; 128 px estimated height420 px: pass 1 line; 128 px estimated height