Collapsible
A native disclosure button with persistent, inert-when-closed content.@gemologic/sheen · navigationPlayground
This example has no scalar controls. Its validated source remains interactive below.
<Collapsible label="Advanced settings"><Input label="Timeout" /></Collapsible>Variant matrix
Advanced settings
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/primitives/Collapsible.tsx- Tokens
--sheen-color-fg-muted--sheen-space-block-sm--sheen-duration-normal--sheen-ease-standard
Accessibility
Role: button with aria-expanded and aria-controlsKeyboard: Tab, Shift+Tab, Enter, SpaceDo
- Keep a stable disclosure owner while its content refreshes.
- Use independent disclosures for independent sections.
Do not
- Do not use a disclosure as a substitute for route navigation.
- Do not put interactive elements inside its label.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
label * | string | — | Visible disclosure-button label. |
open | boolean | — | App-owned expanded state; owners may reject requested changes. |
defaultOpen | boolean | false | Initial uncontrolled expanded state, including SSR. |
onOpenChange | (open: boolean) => void | — | Requested expanded-state changes. |
disabled | boolean | false | Disables user activation without hiding already expanded content. |