Layout
Splitter
Two resizable panes split by a draggable handle. The handle moves by keyboard too.
ReactVueWeb Components
View in Storybook Playground
Examples
<Splitter start={<Nav />} end={<Main />} defaultSize={30} />Props
| Name | Type | Default | Description |
|---|---|---|---|
start required | ReactNode | — | Start (first) pane content. |
end required | ReactNode | — | End (second) pane content. |
orientation | 'horizontal' | 'vertical' | horizontal | Split direction. @default 'horizontal' |
size | number | — | Controlled size of the start pane, in percent. |
defaultSize | number | 50 | Initial size of the start pane, in percent. @default 50 |
onChange | (size: number) => void | — | Called with the new start-pane percent. |
min | number | 10 | Minimum start-pane percent. @default 10 |
max | number | 90 | Maximum start-pane percent. @default 90 |
step | number | 5 | Keyboard step (percent). @default 5 |
handleLabel | string | Resize panels | Accessible label for the resize handle. @default 'Resize panels' |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.