Skip to main content
A single trigger that shows/hides content. Implements the WAI-ARIA disclosure pattern.

​
Installation

npm install monochrome

import "monochrome"                        // Core (auto-activates)
import { Collapsible } from "monochrome/react"  // React
import { Collapsible } from "monochrome/vue"    // Vue

​
Usage

import { Collapsible } from "monochrome/react"

<Collapsible.Root open>
  <Collapsible.Trigger>Toggle</Collapsible.Trigger>
  <Collapsible.Panel>Content</Collapsible.Panel>
</Collapsible.Root>
In Vue templates, boolean props require : binding — :open="true"

​
API Reference

​
Root

The root container for the collapsible component.
PropTypeDefaultDescription
openbooleanfalseStart open

​
Trigger

The button that toggles the collapsible panel. No props.

​
Panel

The collapsible content region. No props.

​
Keyboard Navigation

KeyAction
Enter or SpaceToggle panel visibility
No arrow key navigation — follows the WAI-ARIA disclosure pattern.

​
Accessibility

  • Uses aria-expanded to indicate panel state
  • Uses aria-controls to link trigger to panel
  • Uses aria-labelledby to associate panel with trigger
  • Uses hidden="until-found" to preserve browser find-in-page (Ctrl+F / Cmd+F)
  • Triggers beforematch event to auto-open when find-in-page reveals hidden content
Monochrome is headless — no CSS shipped. You provide all styles.

​
Collapsible vs Accordion

Use Collapsible for a single independent disclosure widget. Use Accordion when you have multiple related panels with keyboard navigation between them.

​
Browser Requirements

Requires Baseline 2024 features:
  • hidden="until-found" — preserves Ctrl+F / Cmd+F for hidden content
  • beforematch event — auto-opens components when find-in-page reveals hidden content

Build docs developers (and LLMs) love

Get started for freeTalk to us