monochrome-ui

Collapsible

The simplest disclosure. One trigger toggles one panel.

In HTML, Root is optional (Trigger + Panel linked by ids is enough). React/Vue require Root so context can mint ids and carry open state.

Composition

Root (optional in HTML; required for React/Vue)
  Trigger
  Panel

Usage

HTML

html
<button type="button" id="mct:collapsible:details" aria-expanded="false" aria-controls="mcc:collapsible:details">
  Show more details
</button>
<div id="mcc:collapsible:details" aria-labelledby="mct:collapsible:details" aria-hidden="true" hidden>
  This content is revealed when you click the trigger.
</div>

React

jsx
import { Collapsible } from "@monochrome-ui/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>

Vue

vue
<script setup lang="ts">
import { Collapsible } from "@monochrome-ui/vue"
</script>

<template>
  <Collapsible.Root>
    <Collapsible.Trigger>Show more details</Collapsible.Trigger>
    <Collapsible.Panel>
      This content is revealed when you click the trigger.
    </Collapsible.Panel>
  </Collapsible.Root>
</template>

Parts

Root

Optional in HTML; required for React/Vue (context). Element: div. Children: Trigger and Panel (any depth under Root in wrappers; HTML may omit Root).

Kind Name Type Default Description
prop open boolean false Initial open state. Flows to Trigger aria-expanded and Panel visibility. Emit only when the panel should start open.

Root itself has no monochrome id.

Trigger

Required. Element: button.

Kind Name Type / value Default Description
attr type "button"
attr id mct:collapsible:<id>
attr aria-expanded "true" | "false" "false" Whether the panel is visible.
attr aria-controls mcc:collapsible:<id>

Panel

Required. Element: div.

Kind Name Type / value Default Description
attr id mcc:collapsible:<id>
attr aria-labelledby mct:collapsible:<id>
attr aria-hidden "true" | "false" "true" Inverse of Trigger aria-expanded.
attr hidden present | absent present when closed Omit when open.

Notes

  • Closed (default, HTML): aria-expanded="false" on Trigger; aria-hidden="true" and hidden on Panel.
  • Open (HTML): aria-expanded="true"; aria-hidden="false"; omit hidden.
  • Open (wrappers): Root open. Do not put open on Trigger or Panel.
  • Ids: Trigger mct:collapsible:<id>, Panel mcc:collapsible:<id>, linked with aria-controls / aria-labelledby. HTML authors choose unique <id>s. Wrappers mint <id> in Root context.
  • Structure independence: Trigger and Panel need not be siblings or adjacent. Linkage is only via ids / ARIA (under Root for wrappers; Root may be omitted in HTML).

Keyboard

Key Behavior
Enter / Space Toggle (via synthesized click on the button)

No arrow-key roving (single control).

See also