Collapsible
Shows and hides a region.
Styles
frameddefault
- Only the model tokens a run used before it failed. Tool calls and retries are free.Thirty days on Pro and a year on Enterprise. Export them any time from the run page.Yes, through a tool with a key scoped to that agent, such as sk_demo_0000aaaa.
plain
Sizes
sm
defaultdefault
States
closed, with a failure
- search_tickets412 ms
- get_order96 ms
- refund_order, failed1204 ms
- get_order88 ms
- draft_reply2310 ms
- send_reply140 ms
open
hover
focus-visible
disabled
Usage
When to use it
- Use
- Detail most people skip: raw input, tool call history, advanced settings.
- Use
- Questions or sections people scan by label and open one at a time (CollapsibleGroup).
- Not for
- The sections are views of one object people switch between. Use tabs.
- Not for
- The detail is needed to act on the page. Show it.
- Not for
- Detail beside a control that should not move the page. Use Popover.
Rules
8 rules
- Must
- Name what is inside in the trigger, such as 'Raw input', never 'Show more'. Because the label is the button's accessible name, and a list of "Show more" buttons says nothing about any of them.
- Should
- Pass summary with the count and the one fact that matters, such as '1 of 6 failed', with summaryStatus when it is a problem.
- Must
- Disable the trigger of an empty region and say 0 in the summary. Because a trigger that opens to nothing costs a press and reads as content that failed to load.
- Must
- Use variant="plain" for a group inside a card; framed only on its own. Because a framed group inside a card's panel is a box in a box.
- Never
- Put glass or a Button look on CollapsibleTrigger. Because glass marks what acts, and a trigger only shows and hides; a glass pill beside the real actions reads as one of them.
- Never
- Add a plus or a second chevron to CollapsibleTrigger. Because the trigger already draws one caret that turns when open, and a second glyph gives two cues that can disagree.
- Must
- Let wide content scroll in its own box with overflow-x-auto. Because the panel clips, so a long line is cut off with no way to scroll to it.
- Should
- Pass hiddenUntilFound to a standalone CollapsibleContent when people search the page with the browser's find.
State order
5 states, highest first
- 1
- disabled
- 2
- focus-visible
- 3
- hover
- 4
- open
- 5
- closed
Accessibility
4 checks
- The trigger is a button with aria-expanded and aria-controls, named by its label and summary.
- A group trigger sits in a heading; the content is a region named by the trigger.
- Focus is the 2px ink ring, inset on a group row so the box never clips it.
- The caret is decorative and hidden from screen readers.
Keyboard
2 keys
- Enter, Space
- Opens or closes the region.
- Up, Down, Home, End
- Move between the triggers of a group.
Edge cases
5 edge cases
- Long label
- In a group it wraps and the summary drops under it; alone, the pill truncates.
- Wide content
- Scrolls in its own box; the panel clips nothing else.
- Find in page
- A closed group section opens when the browser finds text in it.
- Right to left
- The caret points left when closed, and the content indents from the right.
- Reduced motion
- The caret jumps instead of turning; the panel always cuts.
API
7 props
Collapsible open, defaultOpen, onOpenChange, disabledBase UIdefaultclosedCollapsibleGroup value, defaultValue, onValueChangeBase UI AccordionCollapsibleGroup multiplebooleandefaultfalseCollapsibleGroup variant'framed' | 'plain'default'framed'CollapsibleTrigger size'sm' | 'default'default'default'CollapsibleTrigger summary, summaryStatusReactNode, 'warn' | 'fail'CollapsibleTrigger caretbooleandefaulttrue
Tokens
20 tokens
--paper- #ffffff
--line-faint- rgb(5 5 5 / 0.06)
--radius-overlay- 10px
--radius-pill- 999px
--row- 36px
--control- 32px
--control-sm- 26px
--hover- rgb(5 5 5 / 0.06)
--pressed- rgb(5 5 5 / 0.10)
--type-label- 500 13px/1.35 var(--font-sans)
--type-label-sm- 500 12px/1.35 var(--font-sans)
--type-caption- 400 12px/1.35 var(--font-sans)
--type-body-sm- 400 13px/1.5 var(--font-sans)
--text-1- rgb(5 5 5 / 0.80)
--text-2- rgb(5 5 5 / 0.60)
--text-3- rgb(5 5 5 / 0.45)
--fail-text- #b23c29
--warn-text- #8a5a00
--measure- 68ch
--dur-state- 160ms