Components
Collapsible
A button that toggles the visibility of a content section.
Usage
import { Collapsible } from "monochrome/react"
<Collapsible.Root>
<Collapsible.Trigger>Show more details</Collapsible.Trigger>
<Collapsible.Panel>
This content is revealed when you click the trigger.
</Collapsible.Panel>
</Collapsible.Root>Examples
Default Open
Set the collapsible to be expanded by default.
This content is visible by default. Click the trigger to collapse it.
<Collapsible.Root open>
<Collapsible.Trigger>This section starts open</Collapsible.Trigger>
<Collapsible.Panel>
This content is visible by default.
</Collapsible.Panel>
</Collapsible.Root>Disconnected
The trigger and content don't need a Root container. Connect them by matching IDs and they can live anywhere in the DOM.
Toolbar
Content area
{/* Trigger in one part of the page */}
<Collapsible.Trigger id="details">Toggle details</Collapsible.Trigger>
{/* Content elsewhere */}
<Collapsible.Panel id="details">
This content lives elsewhere in the DOM.
</Collapsible.Panel>Accessibility
Follows the WAI-ARIA Disclosure Pattern.
Keyboard
| Key | Action |
|---|---|
Enter / Space | Toggle the content visibility |
Hidden content uses hidden="until-found" so it remains searchable via browser find-in-page (Ctrl+F).
API Reference
HTML
| Element | Attributes | Description |
|---|---|---|
| Trigger | id="mct:collapsible:*" | Trigger ID (required) |
aria-expanded | "true" or "false" | |
aria-controls | Content element ID | |
| Content | id="mcc:collapsible:*" | Content ID (required) |
aria-labelledby | Trigger element ID | |
aria-hidden | "true" or "false" | |
hidden="until-found" | Set when closed, removed when open |
React
All components accept className for styling.
Collapsible.Root
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Whether expanded by default |
Collapsible.Trigger
The button that toggles the collapsible.
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | — | Connect to a Panel without a Root |
open | boolean | false | Initial expanded state (disconnected usage) |
Collapsible.Panel
The content that is shown or hidden. Uses hidden="until-found" for find-in-page support.
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | — | Connect to a Trigger without a Root |
open | boolean | false | Initial expanded state (disconnected usage) |