Collapsible

Shows and hides a region.

Styles

  • Runs every 15 minutes in eu-west-2, writing to events_raw with 5 retries.

    frameddefault

  • Runs every 15 minutes in eu-west-2, writing to events_raw with 5 retries.

    plain

  • standalone

Sizes

  • defaultdefault

  • sm

States

  • Runs every 15 minutes in eu-west-2, writing to events_raw with 5 retries.

    rest

  • Runs every 15 minutes in eu-west-2, writing to events_raw with 5 retries.

    hover

  • Runs every 15 minutes in eu-west-2, writing to events_raw with 5 retries.

    focus-visible

Usage

When to use it
Use
Detail most people skip: a job's environment, its full config.
Use
A stack of sections where one or a few are read at a time: a pipeline's stages in an inspector.
Not for
Sibling panels the person switches between. Use Tabs.
Not for
Content everyone needs; leave it open. Use Frame.

Rules

6 rules
Should
Give a closed section a summary that says what is inside, and a status when it holds a problem. Because a failure behind a closed section is the reason to open it, and the summary shows it without a press.
Must
Name the section in the trigger, in one or two words in sentence case; the trigger sets the capitals. Because the trigger is a label, and a sentence in mono capitals reads slowly.
Never
Frame each Collapsible of a group on its own. Because the group is one region: variant="framed" boxes it once and rules split the rows.
Must
Use variant="plain" for a group already inside a frame. Because a framed group inside a frame is a box in a box.
Never
Hide the page's main content or its only action in a closed section. Because a closed section is skipped by most readers, and an action inside it is found late or never.
Should
Pass multiple when people compare sections side by side. Because closing one to open the next loses what they were comparing.

State order

5 states, highest first
1
disabled
2
focus-visible
3
hover
4
open
5
closed

Accessibility

3 checks
The trigger is a button with aria-expanded and aria-controls; in a group it sits in a heading.
Group panels stay in the DOM as hidden="until-found", so find-in-page opens them.
The summary is text-2, or the failure or warning word at 6.5:1 and 6.0:1 on the page.

Keyboard

2 keys
Enter, Space
Opens and closes the section.
Up, Down, Home, End
In a group: moves between triggers.

Edge cases

4 edge cases
Long summary
Drops under the label on a narrow row, then truncates.
Phone, 390 wide
Rows keep their 40px; the content wraps under the label.
Right to left
The caret points to the start and turns the other way.
Reduced motion
Nothing changes: the caret and the region already cut.

API

6 props
CollapsibleGroup variant
'framed' | 'plain' default 'framed'
CollapsibleGroup multiple
boolean default false
CollapsibleTrigger size
'default' | 'sm' default 'default'
CollapsibleTrigger summary, summaryStatus
ReactNode, 'warn' | 'fail'
CollapsibleTrigger caret
boolean default true
Collapsible open, defaultOpen, onOpenChange
Base UI default false

Tokens

17 tokens
--line
#e2dfd5
--line-faint
#efede6
--row
40px
--control
32px
--control-sm
26px
--hover
rgb(22 21 18 / 0.04)
--pressed
rgb(22 21 18 / 0.08)
--type-label
400 13px/16px var(--font-mono)
--type-label-sm
400 12px/16px var(--font-mono)
--type-caption
400 13px/18px var(--font-sans)
--type-body-sm
400 14px/20px var(--font-sans)
--text-1
#161512
--text-2
#55524a
--text-3
#6b675e
--fail-text
#b3261e
--warn-text
#a14b00
--measure
68ch

By Arlan Marat

198

Install

For your coding agent

GitHub

Please star me pookie

198

Made by

Arlan Marat

A new design system every week

Leave your email before you copy the prompt.