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.

import { Resizable } from "@kernelui/react";

function SplitView() {
  return (
    <Resizable defaultSplit={40} min={20} max={80}>
      <div>Pane A</div>
      <div>Pane B</div>
    </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.