Navigation

Resizer

A separator you drag or arrow to resize the thing beside it.

When to use it: Use it for adjustable panes and composable column resizing.

On this page

Example
Anatomy
Step by step
Keyboard
Forms and accessibility
API reference

Example

Sidebar (180px)

Drag the divider, or focus it and press the arrow keys.

Resizer.tsxtsx

import { useState } from "react";
import { Resizer } from "@comp0/react";

export function Example() {
  const [width, setWidth] = useState(180);

  return (
    <div className="flex h-40 w-full max-w-md overflow-hidden rounded border border-zinc-950/10 dark:border-white/10">
      <div
        className="relative shrink-0 bg-zinc-50 p-3 text-base text-zinc-700 sm:text-sm dark:bg-zinc-900 dark:text-zinc-200"
        style={{ width }}
      >
        Sidebar ({width}px)
        <Resizer
          aria-label="Resize sidebar"
          className="absolute inset-y-0 right-0 w-1.5 bg-zinc-950/10 outline-teal-600 focus-visible:outline-2 data-dragging:bg-teal-600 dark:bg-white/10 dark:outline-teal-400 dark:data-dragging:bg-teal-400"
          min={120}
          max={320}
          size={width}
          onResize={setWidth}
        />
      </div>
      <div className="flex-1 p-3 text-base text-zinc-600 sm:text-sm dark:text-zinc-300">
        Drag the divider, or focus it and press the arrow keys.
      </div>
    </div>
  );
}

Anatomy

Dashed frames are invisible state providers; shaded shapes own real DOM. Numbered pins match the list below.

Resizer
Native separator that resizes its target. Owns a DOM element.

Step by step

1
Add the main part
Place Resizer inside the element it should resize.
2
Add the supporting parts
Keep the size in your state: pass size and apply it back as a style.
3
Make the behavior clear
Set min and max so dragging and End or Home stay inside sane bounds.
Exampletsx
```
<Resizer size={width} min={120} max={320} onResize={setWidth} />
```

Keyboard

→: Widens a vertical split.
←: Narrows a vertical split.
↓: Grows a horizontal split.
↑: Shrinks a horizontal split.
Home: Jumps to the minimum size.
End: Jumps to the maximum size.

Forms and accessibility

No native form behavior.

Accessibility checklist

Keep the handle large enough to grab; style the drag state via data-dragging.
Pass size so assistive technology hears the separator position.
Inside a resizable TableColumn the handle hides itself; keyboard resizing stays on the header.

API reference

Importtsx

import { Resizer } from "@comp0/react";

`Resizer`

DOM element

Native separator that resizes its target.

Prop	Type	Description
`orientation`	`"vertical" \| "horizontal"`	Vertical resizes width; horizontal resizes height.
`onResize`	`(size: number) => void`	Receives the next size; you apply it as a style.
`size`	`number`	Current size, exposed as aria-valuenow.
`min / max`	`number`	Clamp bounds, also used by Home and End.
`target`	`RefObject<HTMLElement>`	Element to measure; defaults to the parent or the table column.

Style hooks

Attributes that appear while a state is true. Target them with Tailwind data variants such as data-open:bg-zinc-100, or with any CSS selector.

[data-dragging] on Resizer: A pointer drag is in progress.
:focus-visible on Resizer: The separator has keyboard focus.

Keep exploring

Table