Components

Accordion

A set of collapsible panels that expand one at a time or independently.

Usage

<div id="mcr:accordion:faq" data-mode="single">
  <div>
    <h3>
      <button id="mct:accordion:q1" aria-expanded="false" aria-controls="mcc:accordion:q1">
        What is monochrome?
      </button>
    </h3>
    <div id="mcc:accordion:q1" role="region" aria-labelledby="mct:accordion:q1" aria-hidden="true" hidden="until-found">
      A minimal component library...
    </div>
  </div>
  <div>
    <h3>
      <button id="mct:accordion:q2" aria-expanded="false" aria-controls="mcc:accordion:q2">
        How does it work?
      </button>
    </h3>
    <div id="mcc:accordion:q2" role="region" aria-labelledby="mct:accordion:q2" aria-hidden="true" hidden="until-found">
      Components are server-rendered...
    </div>
  </div>
</div>

import { Accordion } from "monochrome/react"

<Accordion.Root>
  <Accordion.Item>
    <Accordion.Header>
      <Accordion.Trigger>What is monochrome?</Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Panel>A minimal component library...</Accordion.Panel>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Header>
      <Accordion.Trigger>How does it work?</Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Panel>Components are server-rendered...</Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>

<script setup lang="ts">
import { Accordion } from "monochrome/vue"
</script>

<template>
  <Accordion.Root>
    <Accordion.Item>
      <Accordion.Header>
        <Accordion.Trigger>What is monochrome?</Accordion.Trigger>
      </Accordion.Header>
      <Accordion.Panel>A minimal component library...</Accordion.Panel>
    </Accordion.Item>
    <Accordion.Item>
      <Accordion.Header>
        <Accordion.Trigger>How does it work?</Accordion.Trigger>
      </Accordion.Header>
      <Accordion.Panel>Components are server-rendered...</Accordion.Panel>
    </Accordion.Item>
  </Accordion.Root>
</template>

Examples

Default Open

Set an item as expanded by default.

This content is visible by default because the AccordionItem has the open prop.

<div id="mcr:accordion:demo" data-mode="single">
  <div>
    <h3>
      <button id="mct:accordion:open" aria-expanded="true" aria-controls="mcc:accordion:open">
        This item starts open
      </button>
    </h3>
    <div id="mcc:accordion:open" role="region" aria-labelledby="mct:accordion:open" aria-hidden="false">
      This content is visible by default.
    </div>
  </div>
</div>

<Accordion.Root>
  <Accordion.Item open>
    <Accordion.Header>
      <Accordion.Trigger>This item starts open</Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Panel>This content is visible by default.</Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>

<template>
  <Accordion.Root>
    <Accordion.Item open>
      <Accordion.Header>
        <Accordion.Trigger>This item starts open</Accordion.Trigger>
      </Accordion.Header>
      <Accordion.Panel>This content is visible by default.</Accordion.Panel>
    </Accordion.Item>
  </Accordion.Root>
</template>

Disabled Items

Disabled items cannot be toggled and are skipped during keyboard navigation.

<div id="mcr:accordion:settings" data-mode="single">
  <div>
    <h3>
      <button id="mct:accordion:s1" aria-expanded="false" aria-controls="mcc:accordion:s1">
        General Settings
      </button>
    </h3>
    <div id="mcc:accordion:s1" role="region" aria-labelledby="mct:accordion:s1" aria-hidden="true" hidden="until-found">
      Configure language and display preferences.
    </div>
  </div>
  <div>
    <h3>
      <button id="mct:accordion:s2" aria-expanded="false" aria-controls="mcc:accordion:s2" aria-disabled="true">
        Advanced Settings
      </button>
    </h3>
    <div id="mcc:accordion:s2" role="region" aria-labelledby="mct:accordion:s2" aria-hidden="true" hidden="until-found">
      This panel cannot be opened.
    </div>
  </div>
</div>

<Accordion.Root>
  <Accordion.Item>
    <Accordion.Header>
      <Accordion.Trigger>General Settings</Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Panel>Configure language and display preferences.</Accordion.Panel>
  </Accordion.Item>
  <Accordion.Item disabled>
    <Accordion.Header>
      <Accordion.Trigger>Advanced Settings</Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Panel>This panel cannot be opened.</Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>

<template>
  <Accordion.Root>
    <Accordion.Item>
      <Accordion.Header>
        <Accordion.Trigger>General Settings</Accordion.Trigger>
      </Accordion.Header>
      <Accordion.Panel>Configure language and display preferences.</Accordion.Panel>
    </Accordion.Item>
    <Accordion.Item disabled>
      <Accordion.Header>
        <Accordion.Trigger>Advanced Settings</Accordion.Trigger>
      </Accordion.Header>
      <Accordion.Panel>This panel cannot be opened.</Accordion.Panel>
    </Accordion.Item>
  </Accordion.Root>
</template>

Multiple Open Items

Use type="multiple" to allow multiple items open simultaneously.

Multiple items can be open at the same time.

This item is also open by default.

<div id="mcr:accordion:sections" data-mode="multiple">
  <div>
    <h3>
      <button id="mct:accordion:m1" aria-expanded="true" aria-controls="mcc:accordion:m1">
        First Section
      </button>
    </h3>
    <div id="mcc:accordion:m1" role="region" aria-labelledby="mct:accordion:m1" aria-hidden="false">
      Content...
    </div>
  </div>
  <div>
    <h3>
      <button id="mct:accordion:m2" aria-expanded="true" aria-controls="mcc:accordion:m2">
        Second Section
      </button>
    </h3>
    <div id="mcc:accordion:m2" role="region" aria-labelledby="mct:accordion:m2" aria-hidden="false">
      Content...
    </div>
  </div>
</div>

<Accordion.Root type="multiple">
  <Accordion.Item open>
    <Accordion.Header>
      <Accordion.Trigger>First Section</Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Panel>Content...</Accordion.Panel>
  </Accordion.Item>
  <Accordion.Item open>
    <Accordion.Header>
      <Accordion.Trigger>Second Section</Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Panel>Content...</Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>

<template>
  <Accordion.Root type="multiple">
    <Accordion.Item open>
      <Accordion.Header>
        <Accordion.Trigger>First Section</Accordion.Trigger>
      </Accordion.Header>
      <Accordion.Panel>Content...</Accordion.Panel>
    </Accordion.Item>
    <Accordion.Item open>
      <Accordion.Header>
        <Accordion.Trigger>Second Section</Accordion.Trigger>
      </Accordion.Header>
      <Accordion.Panel>Content...</Accordion.Panel>
    </Accordion.Item>
  </Accordion.Root>
</template>

Accessibility

Follows the WAI-ARIA Accordion Pattern.

Keyboard

Key	Action
`Enter` / `Space`	Toggle the focused item
`Arrow Down`	Move focus to the next trigger
`Arrow Up`	Move focus to the previous trigger
`Home`	Move focus to the first trigger
`End`	Move focus to the last trigger

Disabled items are skipped during keyboard navigation. Hidden content uses hidden="until-found" so it remains searchable via browser find-in-page (Ctrl+F).

API Reference

JavaScript

Element	Attributes	Description
Root	`id="mcr:accordion:*"`	Root ID (required)
	`data-mode="single"`	Only one item open at a time
	`data-mode="multiple"`	Multiple items can be open
Item	—	Wrapper `<div>` around each heading + content pair
Trigger	`id="mct:accordion:*"`	Trigger ID (required)
	`aria-expanded`	`"true"` or `"false"`
	`aria-controls`	Content element ID
	`aria-disabled="true"`	For disabled items
Content	`id="mcc:accordion:*"`	Content ID (required)
	`role="region"`	ARIA landmark role
	`aria-labelledby`	Trigger element ID
	`aria-hidden`	`"true"` or `"false"`
	`hidden="until-found"`	Set when closed, removed when open

Frameworks

All components accept className (React) or standard attributes (Vue) for styling. The Vue API is identical - use kebab-case in templates for multi-word props (e.g., aria-disabled).