Resizable

Resizable region with pointer dragging, keyboard adjustment, size limits, and preview and commit callbacks.

Preview

A live, theme-aware example rendered with the published component.

Loading preview…

Import

Import from the focused entry point below, or use the same named export from @tavojs/ui. Both are public APIs; measure the built application when comparing their bundle cost.

TSX

tsximport { Resizable } from "@tavojs/ui/resizable";

The component import loads compiled component CSS. Enable tavoUi() for your project theme variables, or import @tavojs/ui/theme.css once for the package default theme. The equivalent CSS-safe component alias is @tavojs/ui/css/resizable.

When to use

Use it when

Use Resizable for an inspector or panel whose width or height can change. Set a meaningful initial size and limits, and use onValueChange to persist the committed size.

Choose something else when

Use SplitPane for a fixed two-region layout. Resizable changes its own root size; the surrounding layout and persistence remain application responsibilities.

Examples

These examples include imports and local state where interaction requires it. Render the exported component in a page after completing UI installation. Demo state stays in the mounted component; connect file handling, persistence, and data loading to your application as needed.

Resizable example

TSXCreate: src/components/examples/ResizableExample1.tsx

tsximport { createTavo } from "@tavojs/core";
import { Resizable } from "@tavojs/ui/resizable";
import { Text } from "@tavojs/ui";

type State = { width: number };

export const ResizableExample1 = createTavo<Record<string, never>, State>({
  model: () => ({ width: 320 }),
  view: ({ state, model }) => (
    <>
      <Resizable
        orientation="vertical"
        value={state.width}
        min={260}
        max={560}
        step={8}
        onValueChange={(width) => model.set("width", width)}
      >
        <Resizable.Panel><Text>Inspector width: {state.width}px</Text></Resizable.Panel>
        <Resizable.Handle aria-label="Resize inspector" />
      </Resizable>
    </>
  )
});

Common props and defaults

A curated starting point. The complete TypeScript API below includes additional props and compound member contracts.

Prop	Type	Default	Description
`className`	`string`	—	Optional class hook applied to the public root element owned by the component.
`direction`	`"horizontal" \| "vertical"`	—	Configures direction for this component.
`orientation`	`"horizontal" \| "vertical"`	—	Separator orientation; `direction` remains supported for compatibility.
`Resizable.Panel.defaultSize`	`ResponsiveValue<string>`	—	Configures Resizable.Panel.defaultSize for this component.

Complete TypeScript API

Import from @tavojs/ui/resizable. Published exports: Resizable, ResizableHandle, ResizableHandleProps, ResizableOrientation, ResizablePanel, ResizablePanelProps, ResizableProps, ResizableRoot, clampResizableValue.

`ResizableProps`

Property	Type	Required	Description
`children`	`Child`	No	Inherited children attribute accepted by Resizable.
`className`	`string`	No	Optional class hook applied to the public root element owned by the component.
`sx`	`Sx`	No	Inherited sx attribute accepted by Resizable.
`id`	`string`	No	Inherited id attribute accepted by Resizable.
`role`	`string`	No	Inherited role attribute accepted by Resizable.
`style`	`Record<string, unknown>`	No	Inherited style attribute accepted by Resizable.
`title`	`string`	No	Inherited title attribute accepted by Resizable.
`tabIndex`	`number`	No	Inherited tabIndex attribute accepted by Resizable.
`hidden`	`boolean`	No	Inherited hidden attribute accepted by Resizable.
`disabled`	`boolean`	No	Inherited disabled attribute accepted by Resizable.
`onClick`	`TavoEventHandler<MouseEvent>`	No	Inherited onClick attribute accepted by Resizable.
`onChange`	`TavoEventHandler<Event>`	No	Inherited onChange attribute accepted by Resizable.
`onInput`	`TavoEventHandler<Event>`	No	Inherited onInput attribute accepted by Resizable.
`onKeyDown`	`TavoEventHandler<KeyboardEvent>`	No	Inherited onKeyDown attribute accepted by Resizable.
`onFocus`	`TavoEventHandler<FocusEvent>`	No	Inherited onFocus attribute accepted by Resizable.
`onBlur`	`TavoEventHandler<FocusEvent>`	No	Inherited onBlur attribute accepted by Resizable.
`direction`	`"horizontal" \| "vertical"`	No	Configures direction for this component.
`orientation`	`ResizableOrientation`	No	Separator orientation; `direction` remains supported for compatibility.
`value`	`number`	No	Inherited value attribute accepted by Resizable.
`defaultValue`	`number`	No	Inherited defaultValue attribute accepted by Resizable.
`min`	`number`	No	Inherited min attribute accepted by Resizable.
`max`	`number`	No	Inherited max attribute accepted by Resizable.
`step`	`number`	No	Inherited step attribute accepted by Resizable.
`largeStep`	`number`	No	Inherited largeStep attribute accepted by Resizable.
`onResizeStart`	`(value: number) => void`	No	Inherited onResizeStart attribute accepted by Resizable.
`onValueInput`	`(value: number) => void`	No	Inherited onValueInput attribute accepted by Resizable.
`onValueChange`	`(value: number) => void`	No	Inherited onValueChange attribute accepted by Resizable.
`onResizeCancel`	`(value: number) => void`	No	Inherited onResizeCancel attribute accepted by Resizable.

`ResizablePanelProps`

Property	Type	Required	Description
`children`	`Child`	No	Inherited children attribute accepted by Resizable.
`className`	`string`	No	Optional class hook applied to the public root element owned by the component.
`sx`	`Sx`	No	Inherited sx attribute accepted by Resizable.
`id`	`string`	No	Inherited id attribute accepted by Resizable.
`role`	`string`	No	Inherited role attribute accepted by Resizable.
`style`	`Record<string, unknown>`	No	Inherited style attribute accepted by Resizable.
`title`	`string`	No	Inherited title attribute accepted by Resizable.
`tabIndex`	`number`	No	Inherited tabIndex attribute accepted by Resizable.
`hidden`	`boolean`	No	Inherited hidden attribute accepted by Resizable.
`disabled`	`boolean`	No	Inherited disabled attribute accepted by Resizable.
`onClick`	`TavoEventHandler<MouseEvent>`	No	Inherited onClick attribute accepted by Resizable.
`onChange`	`TavoEventHandler<Event>`	No	Inherited onChange attribute accepted by Resizable.
`onInput`	`TavoEventHandler<Event>`	No	Inherited onInput attribute accepted by Resizable.
`onKeyDown`	`TavoEventHandler<KeyboardEvent>`	No	Inherited onKeyDown attribute accepted by Resizable.
`onFocus`	`TavoEventHandler<FocusEvent>`	No	Inherited onFocus attribute accepted by Resizable.
`onBlur`	`TavoEventHandler<FocusEvent>`	No	Inherited onBlur attribute accepted by Resizable.
`defaultSize`	`ResponsiveValue<string>`	No	Inherited defaultSize attribute accepted by Resizable.

`ResizableHandleProps`

Property	Type	Required	Description
`children`	`Child`	No	Inherited children attribute accepted by Resizable.
`className`	`string`	No	Optional class hook applied to the public root element owned by the component.
`sx`	`Sx`	No	Inherited sx attribute accepted by Resizable.
`id`	`string`	No	Inherited id attribute accepted by Resizable.
`role`	`string`	No	Inherited role attribute accepted by Resizable.
`style`	`Record<string, unknown>`	No	Inherited style attribute accepted by Resizable.
`title`	`string`	No	Inherited title attribute accepted by Resizable.
`tabIndex`	`number`	No	Inherited tabIndex attribute accepted by Resizable.
`hidden`	`boolean`	No	Inherited hidden attribute accepted by Resizable.
`disabled`	`boolean`	No	Inherited disabled attribute accepted by Resizable.
`onClick`	`TavoEventHandler<MouseEvent>`	No	Inherited onClick attribute accepted by Resizable.
`onChange`	`TavoEventHandler<Event>`	No	Inherited onChange attribute accepted by Resizable.
`onInput`	`TavoEventHandler<Event>`	No	Inherited onInput attribute accepted by Resizable.
`onKeyDown`	`TavoEventHandler<KeyboardEvent>`	No	Inherited onKeyDown attribute accepted by Resizable.
`onFocus`	`TavoEventHandler<FocusEvent>`	No	Inherited onFocus attribute accepted by Resizable.
`onBlur`	`TavoEventHandler<FocusEvent>`	No	Inherited onBlur attribute accepted by Resizable.
`hitArea`	`string \| number`	No	Inherited hitArea attribute accepted by Resizable.
`onPointerDown`	`TavoEventHandler<PointerEvent>`	No	Inherited onPointerDown attribute accepted by Resizable.

State ownership and DOM target

Concern	Contract
State	Use value for controlled size or defaultValue for an initial size. onValueInput previews, onValueChange commits, and onResizeCancel restores a cancelled drag.
DOM target	Public passthrough props target the component root. Treat nested elements and private class names as implementation details.

Anatomy and related components

Public compound members: Root, Panel, Handle

Limitations

Use SplitPane for a fixed two-region layout. Resizable changes its own root size; the surrounding layout and persistence remain application responsibilities.

Use only the documented props, entry points, and compound members. Internal DOM nesting and CSS class names can change without becoming part of the public component contract.

Accessibility

Handles expose separator orientation and numeric ARIA values. Arrow keys resize by `step`; Shift+Arrow uses `largeStep`; Escape cancels pointer drags.

Handles expose separator orientation and numeric ARIA values. Arrow keys resize by `step`; Shift+Arrow uses `largeStep`; Escape cancels pointer drags.

Component status

Contract	Current value
Maturity	stable
Category	layout
Component import	`@tavojs/ui/resizable`
Explicit CSS import	`@tavojs/ui/css/resizable`
Preview	Interactive preview available on this page