Resizable

Two panes and a divider. The divider is a role="separator", the same ARIA shape as Slider's aria-valuenow/-min/-max triad, just reporting a split percentage instead of a number. Drag it with a pointer or resize it with the keyboard, the grid template that actually sizes the panes lives entirely in CSS, driven by one custom property.

Playground

Toggle every adjustable prop and watch the component — and the code — update live.

<Resizable defaultSplit={40} min={20} max={80}>
  <div>Pane A</div>
  <div>Pane B</div>
</Resizable>

<kernel-resizable default-split="40" min="20" max="80">
  <div>Pane A</div>
  <div>Pane B</div>
</kernel-resizable>

Props

Accessibility

• The divider has role="separator" with aria-orientation, aria-valuenow,aria-valuemin, and aria-valuemax reflecting the current split as a percentage.
• The divider is focusable (tabIndex=0).
• Arrow Left/Up decreases the split and Arrow Right/Down increases it, in the direction matching the current orientation; hold Shift for a larger step.
• Home and End jump to min and max.
• While dragging, the document can't accidentally text-select (user-select: none on the root), same fix as Accordion's drag handling elsewhere in this library.