Resizable
Two-pane splitter whose divider can be dragged or keyboard-nudged to reallocate space
Category: layout · WCAG 2.2-AA · splitter, panes, layout, resize, divider
Props
| Prop | Type | Default | Description |
|---|---|---|---|
ariaLabel | string | — | Alias of `label` — the same invisible accessible name under the catalog spelling. Neither is deprecated. |
label | string | — | Accessible label for the resize handle. |
children | ReactNode | — | Exactly two panes |
orientation | 'horizontal' | 'vertical' | horizontal | Axis the panes are split along. `horizontal` puts them side by side with a handle you drag left and right; `vertical` stacks them with a handle you drag up and down. |
defaultRatio | number | 0.5 | The initial split ratio when uncontrolled. |
ratio | number | — | Controlled ratio (0–1) |
minRatio | number | 0.1 | Minimum allowed split ratio. |
maxRatio | number | 0.9 | Maximum allowed split ratio. |
onRatioChange | (ratio: number) => void | — | Called with the new split ratio when it changes. |
Design tokens
--cascivo-color-border--cascivo-color-border-strong--cascivo-radius-full--cascivo-focus-ring
When to use
- 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
- Fixed layouts where the split should never change — use plain flex/grid
- More than two siblings need independent resizing — compose nested splitters instead
How to build an accessible Resizable in React →
Examples
Horizontal split
<Resizable>
<Editor />
<Preview />
</Resizable>Vertical with bounds
<Resizable orientation="vertical" defaultRatio={0.3} minRatio={0.2} maxRatio={0.8}>
<Toolbar />
<Canvas />
</Resizable>Related components
- Slider — Use a slider when picking a value, not when allocating layout space