`<Panel>`

(no submodules)

Purpose

<Panel> is the labelled grouping primitive that wraps a group of controls in a titled box, optionally with collapse-toggle behaviour. Unlike <Group> (pure layout) and <Rack> (slot frame), <Panel> carries chrome — a header, an aria-labeled body region, and a stable section landmark for screen readers.

The collapse-toggle is implemented as a <button> with aria-expanded and aria-controls linked to a uniquely-id'd body region. When the panel collapses, the body is unmounted (not just hidden via CSS) so descendant focus is moved naturally and tab order shrinks to skip the collapsed content.

Features

Always-present labelled <section> landmark.
Optional collapse-toggle button driven by local React state.
defaultCollapsed initial state for SSR-friendly hydration.
Stable aria-controls linkage via useId.
data-panel-id attribute mirroring the schema id.

Usage: Basic

<Panel id="reverb" label="Reverb">
    <Knob label="Decay" />
    <Knob label="Mix" />
</Panel>

Usage: Advanced

<Panel
    id="compressor"
    label="Compressor"
    collapsible
    defaultCollapsed
    className="dark"
    style={{ borderRadius: 8 }}
>
    <Knob label="Threshold" />
    <Knob label="Ratio" />
    <Switch2 label="Auto-makeup" />
</Panel>

API Reference

<Panel> props: id, label?, collapsible? (default false), defaultCollapsed? (default false), className?, style?, children?.

Implementation Notes

The toggle button text uses ASCII + and - glyphs rather than Unicode chevrons so the rendered output stays consistent across font stacks (the icon glyphs are skin-driven in skinned deployments). The label is reused for both the section's aria-label and the inner region's aria-label because the section landmark name is what screen readers announce when the user navigates to the region, while the inner region's name is what the toggle's aria-controls resolves against.

2.0 KiB Raw Permalink Blame History

<Panel>