ResizablePanels
Two panels with a draggable divider. Arrow keys resize it too.
Draft launch checklist
Book crew interviews
Icon audit
Offline sync for tasks
Harbour homepage
Offline sync for tasks
Tideline mobile, assigned to Jonas Weber
Draft launch checklist
Book crew interviews
Icon audit
Offline sync for tasks
Harbour homepage
Offline sync for tasks
Tideline mobile, assigned to Jonas Weber
Draft launch checklist
Book crew interviews
Icon audit
Offline sync for tasks
Harbour homepage
Offline sync for tasks
Tideline mobile, assigned to Jonas Weber
In context
Harbour rebrand
On trackTideline mobile
ReviewCrew interviews
LateRota export
DoneDepot signage
Review84% done, due 24 Oct
Budget £48,200
Props
| Prop | Type | Required | Default |
|---|---|---|---|
direction | "horizontal" | "vertical" | undefined | No | horizontal |
defaultSplit | number | undefined | No | 0.5 |
split | number | undefined | No | — |
onSplitChange | ((split: number) => void) | undefined | No | — |
minSplit | number | undefined | No | 0.1 |
maxSplit | number | undefined | No | 0.9 |
first | ReactNode | Yes | — |
second | ReactNode | Yes | — |
className | string | undefined | No | — |
Accessibility
The divider is a real role="separator" with aria-orientation/aria-valuenow/aria-valuemin/aria-valuemax, fully keyboard-operable (ArrowLeft/ArrowRight when horizontal, ArrowUp/ArrowDown when vertical, Home/End to jump to the min/max split) — not a drag-only control (ref/HEURISTICS.md #38, #48). Its real touch/click hit area is 44px wide even though the visible line is 4px, via padding.
data-rebar-* attributes
data-rebar-component="resizable-panels"; data-rebar-part="first-panel"|"divider"|"divider-line"|"second-panel".
Migrating to Ant Design
AntD has no built-in resizable-panels/split-pane primitive of its own — a migration typically reaches for a small dedicated library (e.g. react-resizable-panels or allotment) rather than an antd component.