ResizablePanelGroup

Two-or-more-panel layout with pointer and keyboard-accessible resize separators.

Status: beta. Group: layout. Markdown version: /design-system/components/resizable-panel-group.md

When to use

Use ResizablePanelGroup for adjacent work areas whose relative space users need to control. Set realistic minimum sizes for every panel.

When not to use

Do not replace a fixed responsive page grid.
Do not allow panels to shrink below usable content minimums.

Look-alikes

The contract names no look-alike with a deciding condition.

Props

ResizablePanelGroup props
Prop	Type	Default	Description	Required
`panels`	`ResizablePanel[]`	none	Two or more ordered panels.	Yes
`orientation`	`"horizontal" \| "vertical"`	`horizontal`	Resize axis.	No
`keyboardStep`	`number`	`5`	Keyboard resize increment in percentage points.	No
`onSizesChange`	`(sizes: Record<string, number>) => void`	none	Receives the current percentage per panel id.	No
`className`	`string`	none	No description in the contract.	No

Variants

Available orientations: horizontal, vertical (default horizontal).

Invalid combinations

The contract records no invalid combinations.

Keyboard

ResizablePanelGroup keyboard behaviour
Key	Behaviour
ArrowLeft	Moves focus or the value in that direction. (standard)
ArrowRight	Moves focus or the value in that direction. (standard)
ArrowUp	Moves focus or the value in that direction. (standard)
ArrowDown	Moves focus or the value in that direction. (standard)
Home	Moves to the first item. (standard)
End	Moves to the last item. (standard)

Rows marked (standard) name a key the contract lists without a description; the behaviour shown is the usual one for that key.

Rules

Every item under When not to use is a MUST NOT. MUST and SHOULD follow RFC 2119.

ResizablePanelGroup rules
Level	Rule	How it is checked
MUST	ARIA: Each panel is a named region.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: Handles use role=separator.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: Separator exposes aria-orientation, aria-valuemin, aria-valuemax and aria-valuenow.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	Required stories produce no axe violations at the configured severity.	Automated by `npm run test:stories:matrix:ci`. WCAG 2.5.8.
MUST	The accessibility tree (role, name, state) matches the committed snapshot for every required story.	Automated by `npm run test:stories:matrix:ci`. WCAG 1.3.1, 4.1.2.
MUST	The component remains legible and operable under a real browser forced-colors: active pass.	Automated by `npm run test:stories:hc`.
MUST	Every documented keyboard interaction works as specified.	Not yet verified: no evidence record. WCAG 2.1.1, 2.1.2.
MUST	A human completed an end-to-end accessibility review of this component.	Manual review, last on 2026-07-26.
SHOULD	Name every panel region so assistive technology communicates its purpose.	Not stated in the contract.
SHOULD	Choose minimum sizes that keep each panel's essential controls usable.	Not stated in the contract.
SHOULD	Persist sizes only when restoring the user's workspace is genuinely valuable.	Not stated in the contract.
SHOULD	Use a keyboard step that changes layout perceptibly without large jumps.	Not stated in the contract.
SHOULD NOT	Do not replace an ordinary responsive page grid with draggable panels.	Not stated in the contract.
SHOULD NOT	Do not allow a panel to collapse past the minimum needed by its content.	Not stated in the contract.

Install and import

Install: npm install @digitaltableteur/react (version 0.9.1, restricted access on npm).
Import: import { ResizablePanelGroup } from "@digitaltableteur/react";
Entry point: @digitaltableteur/react/layout exports it too.
Styles: import @digitaltableteur/react/style.css once at the app boundary.