PixelCollapsible

Toggleable disclosure block with a tone-coloured chevron header that reveals or hides arbitrary content.

Single-section disclosure pattern with animated chevron rotation
Seven brand tones applied to the header button (neutral default)
Surface-aware typography (pixel vs linear)
Uncontrolled state with defaultOpen for SSR-friendly initial render
SSR-safe and tree-shakable; renders its content only when expanded

Status: stable
Category: data
Since: v1.0.0

API

import { PixelCollapsible } from '@pxlkit/ui-kit';

Prop	Type	Default	Description
`label` (required)	`string`	—	Trigger label.
`children` (required)	`React.ReactNode`	—	Body content rendered when open.
`defaultOpen`	`boolean`	`false`	Initial open state. Defaults to `false`.
`tone`	`'green' \| 'cyan' \| 'gold' \| 'red' \| 'purple' \| 'pink' \| 'neutral'`	`'neutral'`	Tone tint for the trigger button. Defaults to `'neutral'`.
`surface`	`'pixel' \| 'linear'`	—	Visual surface override.
`bordered`	`boolean`	`false`	Render with surface-aware border + radius chrome. Defaults to false (no chrome).

WCAG target: 2.1 AA

disclosure

Header is a native <button> so assistive tech announces it as a button trigger. The trigger exposes aria-expanded reflecting the open state and aria-controls pointing at the content region (a stable generated id); the content container follows the trigger in reading order and takes no name, which ARIA does not allow on an element without a role — the same wiring PixelAccordion uses.

Keyboard

Key	Action	When
`Enter`	Toggles the collapsible open or closed	—
`Space`	Toggles the collapsible open or closed	—
`Tab`	Moves focus to the disclosure trigger	—

Usage

import { PixelCollapsible } from '@pxlkit/ui-kit';

export function Default() {
  return (
    <PixelCollapsible label="Show details">
      <p className="text-xs text-retro-muted">
        Hidden content revealed when the header is toggled.
      </p>
    </PixelCollapsible>
  );
}

Examples

Default

import { PixelCollapsible } from '@pxlkit/ui-kit';

export function Default() {
  return (
    <PixelCollapsible label="Show details">
      <p className="text-xs text-retro-muted">
        Hidden content revealed when the header is toggled.
      </p>
    </PixelCollapsible>
  );
}

Default open

import { PixelCollapsible } from '@pxlkit/ui-kit';

export function DefaultOpen() {
  return (
    <PixelCollapsible label="Already expanded" defaultOpen>
      <p className="text-xs text-retro-muted">
        Renders open on first mount; click the header to collapse.
      </p>
    </PixelCollapsible>
  );
}

Tones

import { PixelCollapsible } from '@pxlkit/ui-kit';

export function Tones() {
  return (
    <div className="flex flex-col gap-3">
      <PixelCollapsible label="Cyan section" tone="cyan">
        <p className="text-xs text-retro-muted">Cyan-tinted toggle.</p>
      </PixelCollapsible>
      <PixelCollapsible label="Green section" tone="green">
        <p className="text-xs text-retro-muted">Green-tinted toggle.</p>
      </PixelCollapsible>
      <PixelCollapsible label="Gold section" tone="gold">
        <p className="text-xs text-retro-muted">Gold-tinted toggle.</p>
      </PixelCollapsible>
      <PixelCollapsible label="Red section" tone="red">
        <p className="text-xs text-retro-muted">Red-tinted toggle.</p>
      </PixelCollapsible>
      <PixelCollapsible label="Purple section" tone="purple">
        <p className="text-xs text-retro-muted">Purple-tinted toggle.</p>
      </PixelCollapsible>
      <PixelCollapsible label="Pink section" tone="pink">
        <p className="text-xs text-retro-muted">Pink-tinted toggle.</p>
      </PixelCollapsible>
      <PixelCollapsible label="Neutral section" tone="neutral">
        <p className="text-xs text-retro-muted">Neutral-tinted toggle.</p>
      </PixelCollapsible>
    </div>
  );
}

Surfaces

import { PixelCollapsible } from '@pxlkit/ui-kit';

export function Surfaces() {
  return (
    <div className="flex flex-col gap-3">
      <PixelCollapsible label="Pixel surface" surface="pixel">
        <p className="text-xs text-retro-muted">Retro pixel typography.</p>
      </PixelCollapsible>
      <PixelCollapsible label="Linear surface" surface="linear">
        <p className="text-xs text-retro-muted">Smoother linear surface.</p>
      </PixelCollapsible>
    </div>
  );
}

Rich content

import { PixelCollapsible } from '@pxlkit/ui-kit';

export function RichContent() {
  return (
    <PixelCollapsible label="Release notes" tone="cyan" defaultOpen>
      <ul className="list-disc pl-4 text-xs text-retro-muted">
        <li>Added tone-aware chevron header</li>
        <li>Surface-aware typography (pixel vs linear)</li>
        <li>Toggle state preserved on re-render</li>
      </ul>
    </PixelCollapsible>
  );
}