How to build an accessible Resizable in React

The divider is a focusable role="separator" with aria-orientation and aria-valuenow/min/max reflecting the percentage split; arrow keys nudge the ratio and Home/End snap to the configured bounds, matching the APG window-splitter pattern.

When to use a Resizable

• Letting users reallocate space between two adjacent regions, e.g. an editor and a preview
• Side panels or inspectors whose width the user should control
• Master/detail layouts where one pane may need more room than the default

When not to use it

• Fixed layouts where the split should never change — use plain flex/grid
• More than two siblings need independent resizing — compose nested splitters instead

Keyboard interactions

Role separator, verified at WCAG 2.2-AA.

• ArrowLeft
• ArrowRight
• ArrowUp
• ArrowDown
• Home
• End

Common mistakes

Avoid: <Resizable> wrapping three panes

Prefer: Nest two Resizable splitters so each divider controls exactly one boundary

A single separator can only mediate one boundary between two panes

Example

<Resizable>
  <Editor />
  <Preview />
</Resizable>

See the full Resizable reference →