HySplitterHandle

Usage examples on this page are written for Lit / plain HTML (<hy-splitter-handle>). The same component ships as HySplitterHandle in @whitespaceux/harmony-react (native React 19), with typed wrappers for Angular, Solid, Svelte, and Vue. The API reference below applies to all frameworks.

An interactive separator handle within an hy-splitter group. Implements the WAI-ARIA separator role with keyboard support. Provides a draggable divider between adjacent panels.

This component is not designed to be used standalone - it must be placed between hy-splitter-panel elements inside an hy-splitter.

Examples

Basic handle

<hy-splitter-handle></hy-splitter-handle>

With accessible label

<hy-splitter-handle label="Resize sidebar"></hy-splitter-handle>

With custom grip icon

<hy-splitter-handle>
  <hy-icon name="grip-vertical"></hy-icon>
</hy-splitter-handle>

API

Properties

Property	Attribute	Type	Default	Description
disabled	disabled	boolean	false	Whether this handle is disabled (non-interactive).
label	label	string	''	Accessible label for the separator (used as aria-label).
orientation	orientation	'horizontal' | 'vertical'	'horizontal'	Orientation (set by parent splitter).
dragging	dragging	boolean	false	Whether the handle is currently being dragged (set by parent splitter).
groupDisabled	group-disabled	boolean	false	Whether the parent group is disabled (set by parent splitter).
valueNow	value-now	number	0	Current value for aria-valuenow.
valueMin	value-min	number	0	Minimum value for aria-valuemin.
valueMax	value-max	number	100	Maximum value for aria-valuemax.

Slots

Slot	Description
default	Optional custom grip icon

CSS Parts

Part	Description
handle	The separator container
handle-bar	The visible bar element

CSS Custom Properties

Property	Description
--hy-splitter-handle-size	Visible bar thickness (default: --hy-ornament-tick)
--hy-splitter-handle-hit-area	Invisible drag area (default: --hy-ornament-handle, 44px on touch)
--hy-splitter-handle-color	Bar color at rest
--hy-splitter-handle-color-hover	Bar color on hover
--hy-splitter-handle-color-pressed	Bar color while dragging (CSS :active, transient)
--hy-splitter-handle-radius	Bar border radius
--hy-splitter-handle-hover-duration	Transition duration for hover and focus state feedback
--hy-splitter-handle-hover-easing	Transition easing for hover and focus state feedback