Resize Handle

Beta

A drag handle that lets users resize the width of an adjacent element using the pointer or the keyboard.

install	yarn add @clayui/core
version
use	import {ResizeHandle} from '@clayui/core';

Example

import { Provider, ResizeHandle } from "@clayui/core";
import React from "react";

import "@clayui/css/lib/css/atlas.css";

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

  return (
    <Provider spritemap="/public/icons.svg">
      <div
        className="border rounded d-flex overflow-hidden"
        style={{ height: 280 }}
      >
        <div
          className="bg-light p-3 position-relative"
          id="resizable-region"
          style={{ width }}
        >
          <div className="text-secondary">Resizable region</div>
          <div className="text-weight-semi-bold">{width}px</div>

          <ResizeHandle
            aria-controls="resizable-region"
            maxWidth={480}
            minWidth={240}
            onWidthChange={setWidth}
            position="left"
            width={width}
          />
        </div>

        <div className="bg-white flex-grow-1 p-3">
          <div className="text-secondary">Remaining region</div>
          <div className="text-weight-semi-bold">Fills the rest</div>
        </div>
      </div>
    </Provider>
  );
}

Introduction

ResizeHandle is a low-level primitive used to resize an adjacent element. It is the building block behind the resizable behavior of components like SidePanel and VerticalBar, but you can use it directly whenever you need to expose a draggable handle on the edge of a resizable element.

The component is fully controlled: it does not store the width internally. You must hold the width in state and update it from onWidthChange.

Anatomy

import { ResizeHandle } from "@clayui/core";

<ResizeHandle
  aria-controls="resizable-region"
  maxWidth={480}
  minWidth={240}
  onWidthChange={setWidth}
  position="left"
  width={width}
/>;

Position

The position prop indicates which side of the screen the resized element is anchored to. It controls how horizontal pointer movement and the Left / Right arrow keys map to increase or decrease the width.

• position="left" — the element is on the left side of the screen. Dragging the handle to the right (or pressing Right ) increases the width.
• position="right" — the element is on the right side of the screen. Dragging the handle to the left (or pressing Left ) increases the width.

Constraints

minWidth and maxWidth are required and define the boundaries the handle will respect when the user drags or presses an arrow key. The component snaps to the limit when the pointer crosses it, preventing the element from shrinking or growing beyond what the design allows.

Accessibility

ResizeHandle follows the WAI-ARIA separator pattern for window splitters:

• Renders with role="separator" and aria-orientation="vertical" .
• Reflects the current width through aria-valuenow , with aria-valuemin / aria-valuemax matching the configured boundaries.
• Sets aria-valuetext to the current width in pixels (for example, “320px” ). Without it, screen readers fall back to announcing the value as a percentage of the aria-valuemin / aria-valuemax range, which is misleading because the underlying values are pixel measurements.
• Provides a localized accessible name through aria-label , with a default per position ( “Resize left side” or “Resize right side” ). Pass aria-label explicitly to override it with a more specific or translated string (for example, “Resize navigation panel” ).
• Requires aria-controls to be set to the id of the element being resized. The component cannot infer it because it does not know which element it resizes — it only emits the new width through onWidthChange , and the consumer is the one that applies it. Supplying aria-controls lets assistive technology identify the controlled region.
• tabIndex={0} so the handle is reachable with the keyboard.

Keyboard interaction

• Left / Right — decrease or increase the width (mapping depends on position ).
• Up / Down — increase or decrease the width.
• Holding a key accelerates the change after a few key repeats (1px per step, then 10px per step).