Indicator

Provide a draggable resize handle for panels and content areas, with mouse and keyboard support.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use Indicator for a public resize handle or size indication. On an application page, prefer built-in resizing in Sidebar, SidePanel, or table columns rather than copying their drag behavior.

target defaults to the direct parent, but can point to another element. minSize and maxSize constrain the dimension.
applySize controls whether Indicator writes the size directly; onSizeChange reports updates. step and largeStep control keyboard increments.

Import

import { Indicator } from '@snowui-design-system/components';

Usage

Height

Edges

Corner

Hit area

Controlled size

Separate target

Resize events

Disabled

API Reference

Property	Type	Default	Example	Description
`axis`	`IndicatorAxis`	`width for line; both for corner`	`axis={value}`	Resize the host width, height, or both. both is available only with corner appearance.
`edge`	`IndicatorEdge`	`Derived from axis`	`edge={value}`	Drag direction and default placement edge.
`appearance`	`IndicatorAppearance`	`"line"`	`appearance={value}`	Line handle or lower-right corner icon.
`hitAreaPadding`	`number \| string`	`—`	`hitAreaPadding="Example"`	Legacy input retained for compatibility; it no longer narrows the hit area. line always covers the full edge.
`target`	`HTMLElement`	`Direct parent element`	`target={target}`	Element to resize. It may be any page element; Indicator need not be its DOM descendant.
`revealTarget`	`HTMLElement`	`target`	`revealTarget={revealTarget}`	Host whose hover state controls handle visibility.
`value`	`number`	`Measured target size`	`value={42}`	Current controlled size baseline, also reflected as the ARIA current value.
`minSize`	`number`	`0`	`minSize={42}`	Minimum size in pixels along the active resize axis.
`maxSize`	`number`	`Infinity`	`maxSize={42}`	Maximum size in pixels along the active resize axis.
`minWidth`	`number`	`—`	`minWidth={42}`	Minimum width for width or both, taking precedence over minSize.
`maxWidth`	`number`	`—`	`maxWidth={42}`	Maximum width for width or both, taking precedence over maxSize.
`minHeight`	`number`	`—`	`minHeight={42}`	Minimum height for height or both, taking precedence over minSize.
`maxHeight`	`number`	`—`	`maxHeight={42}`	Maximum height for height or both, taking precedence over maxSize.
`step`	`number`	`8`	`step={42}`	Pixels adjusted by each arrow-key press.
`largeStep`	`number`	`32`	`largeStep={42}`	Pixels adjusted by each arrow-key press while Shift is held.
`applySize`	`boolean`	`true`	`applySize`	Write width or height directly to target.
`disabled`	`boolean`	`false`	`disabled`	Disable pointer and keyboard resizing.
`ariaLabel`	`string`	`LocaleProvider`	`ariaLabel="Example"`	Accessible handle name. Defaults according to axis and LocaleProvider.
`onResizeStart`	`(value: number, axis: "width" \| "height") => void`	`—`	`onResizeStart={(value) => { /* handle value */ }}`	Callback when resizing starts.
`onSizeChange`	`(value: number, axis: "width" \| "height") => void`	`—`	`onSizeChange={(value) => { /* handle value */ }}`	Callback when the size changes.
`onResizeEnd`	`(value: number, axis: "width" \| "height") => void`	`—`	`onResizeEnd={(value) => { /* handle value */ }}`	Callback when resizing ends.