Lenso UI

Foundation component · Layout controls

Resize Handle

Resize or collapse adjacent panels with a quiet divider and a generous interaction target.

Live playground

Inspector240 px

Usage guidance

  • Overlay the handle on the shared pane edge instead of reserving a flex or grid track for its hit target.
  • Keep pane sizing, persistence, and collapse state in your application.
  • The 7px hit target is intentionally wider than its 0.5px visual indicator.
  • Use indicatorXstyle when the visual line must extend beyond the handle, such as a full-height table column divider. Keep the hit target on the actual edge.
  • Use inverted when increasing the controlled value moves against the pointer direction.

Accessibility

  • Provide an accessible name and the controlled pane ID through aria-controls.
  • Arrow keys resize by step; Home and End select the bounds; Enter invokes the optional collapse action.

Implementation

The handle is controlled and layout-independent; your application owns pane geometry.

import * as React from "react";
import { ResizeHandle } from "@lenso/ui/resize-handle";

export function InspectorLayout() {
  const [width, setWidth] = React.useState(320);

  return (
    <div style={{ display: "flex" }}>
      <aside id="inspector" style={{ position: "relative", width }}>
        Inspector
        <ResizeHandle
          aria-controls="inspector"
          aria-label="Resize inspector"
          min={240}
          max={560}
          value={width}
          onValueChange={setWidth}
          style={{ position: "absolute", insetBlock: 0, right: -5 }}
        />
      </aside>
      <main style={{ flex: 1 }}>Workspace</main>
    </div>
  );
}
Lenso UI