Collapsible content panels. type="single" allows one open at a time. type="multiple" allows any combination.
Installation
import "monochrome" // Core (auto-activates)
import { Accordion } from "monochrome/react" // React
import { Accordion } from "monochrome/vue" // Vue
Usage
import { Accordion } from "monochrome/react"
<Accordion.Root type="single">
<Accordion.Item open>
<Accordion.Header as="h3">
<Accordion.Trigger>
Section Title
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Panel>
Content here
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item disabled>
<Accordion.Header>
<Accordion.Trigger>
Disabled
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Panel>
Content here
</Accordion.Panel>
</Accordion.Item>
</Accordion.Root>
<script setup lang="ts">
import { Accordion } from "monochrome/vue"
</script>
<template>
<Accordion.Root type="single">
<Accordion.Item :open="true">
<Accordion.Header as="h3">
<Accordion.Trigger>
Section Title
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Panel>
Content here
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item :disabled="true">
<Accordion.Header>
<Accordion.Trigger>
Disabled
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Panel>
Content here
</Accordion.Panel>
</Accordion.Item>
</Accordion.Root>
</template>
In Vue templates, boolean props require : binding — :open="true", :disabled="true"
API Reference
Root
The root container for accordion items.
| Prop | Type | Default | Description |
|---|
type | "single" | "multiple" | "single" | Whether one or many panels can be open |
Item
A single accordion item containing a header and panel.
| Prop | Type | Default | Description |
|---|
open | boolean | false | Start open |
disabled | boolean | false | Cannot toggle, skipped by keyboard |
| Prop | Type | Default | Description |
|---|
as | "h1" – "h6" | "h3" | Heading level |
Trigger
The button that toggles the accordion panel. Must be inside Accordion.Header.
No props.
Panel
The collapsible content region.
No props.
DOM Structure
The accordion requires exact nesting: Item → Header → Trigger. The core traverses item.firstElementChild.firstElementChild to find triggers.
Root [data-mode] → Item → Header (h1-h6) → Trigger (button)
→ Panel [role=region]
Keyboard Navigation
| Key | Action |
|---|
| ArrowDown | Move focus to next accordion item |
| ArrowUp | Move focus to previous accordion item |
| Home | Move focus to first accordion item |
| End | Move focus to last accordion item |
| Enter or Space | Toggle focused accordion panel |
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
aria-disabled="true" for disabled items (not HTML disabled attribute)
- 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.
Browser Requirements
Requires Baseline 2024 features:
hidden="until-found" — preserves Ctrl+F / Cmd+F for hidden contentbeforematch event — auto-opens components when find-in-page reveals hidden content