ResizeHandle

Accessible drag/keyboard separator for single-region resize. Bind value / minValue / maxValue / onChange (often via useResizable().handleProps).

Examples

Default

Horizontal resize between a sidebar and main (default direction="horizontal").

import { ResizeHandle } from '@var-ui/react';

<ResizeHandle value={width} minValue={120} maxValue={280} onChange={setWidth} aria-label="Resize sidebar" />

Vertical

Set direction="vertical" to resize stacked panels along the block axis.

import { ResizeHandle } from '@var-ui/react';

<div style={{ display: 'flex', flexDirection: 'column', height: 200 }}>
  <div style={{ height }}>Top</div>
  <ResizeHandle
    direction="vertical"
    value={height}
    minValue={60}
    maxValue={160}
    onChange={setHeight}
    aria-label="Resize panels"
  />
  <div style={{ flex: 1 }}>Bottom</div>
</div>

Props

Accessibility

Renders as role="separator" with aria-orientation, aria-valuenow / min / max, and a required aria-label. Arrow keys nudge by 10px (50px with Shift); Home/End jump to bounds; Enter/double-click fire onCollapse when provided.