Split pane
stable 2.5 kB<hk-split>A draggable splitter with keyboard resize and real minimum sizes, so neither pane can be collapsed into uselessness by accident.
#resize#panes
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| split | number | 50 | First pane size as a percentage. Two-way bindable. |
| min / max | number | 10 / 90 | Clamp bounds, as percentages. |
| orientation | 'horizontal' | 'vertical' | 'horizontal' | Splitter direction. |
| step | number | 4 | Percentage moved per arrow-key press. |
Outputs
splitChangeEventEmitter<number>Emits while dragging.
Keyboard
- ← / → Moves the splitter by one step
- Home / End Jumps to the min / max bound
- Enter Toggles the pane collapsed
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-split-handle | rgb(15 23 42 / 0.06) | Handle colour at rest. |
| --hk-split-handle-active | #dc2626 | Handle colour while dragging or focused. |
Accessibility
- The handle is role="separator" with aria-valuenow, and it is focusable — resizing is not mouse-only.
- Clamping to min and max means a pane can never be dragged to zero width by accident.