Resizable
Resizable panel with drag handle.
<arc-resizable>Overview
Resizable wraps a single content panel and exposes a drag handle on one edge that the user can pull to change the panel's width or height. It is the right building block for sidebars, property panels, console drawers, and any region where the user should be able to claim more or less screen space. The direction prop controls whether the handle appears on the right edge (horizontal) or bottom edge (vertical).
Drag interaction uses the Pointer Events API with pointer capture, so it works with mouse, touch, and pen. As the user drags, the component clamps the new size between min-size and max-size and updates the --panel-size CSS custom property in real time, so resizing doesn't flicker. An arc-resize custom event fires on every size change so you can persist the user's preference or synchronize adjacent layout regions.
The handle is also keyboard-accessible. It renders with role="separator", tabindex="0", and ARIA value attributes (aria-valuenow, aria-valuemin, aria-valuemax). Arrow keys resize in 5px steps, or 20px steps when Shift is held. The handle highlights on hover and focus with the --accent-primary token, and an expanded invisible hit area (8px wider than the visible 4px bar) makes the handle easy to grab, even on high-density displays.
Guidelines
When to use
- Use Resizable for sidebars, property panels, and console drawers that users should resize
- Set min-size to prevent the panel from collapsing below a usable minimum (e.g. 150px for a sidebar)
- Set max-size to prevent the panel from consuming the entire viewport
- Listen for the arc-resize event to persist the user preference to localStorage or a database
- Pair with SplitPane when you need two resizable regions that share a single divider
When not to use
- Do not use Resizable for content that should never be resized; use a fixed-width Container instead
- Do not set min-size and max-size to the same value: this effectively disables resizing
- Do not forget to give the parent a defined height when using direction="vertical"
- Do not place the Resizable handle adjacent to a scrollbar; users may confuse the two controls
- Do not override the handle styles without preserving the expanded hit area pseudo-element
Features
- Horizontal and vertical resize directions via the direction prop
- Pointer Events API with pointer capture for mouse, touch, and pen support
- Configurable min-size and max-size constraints to prevent over-shrinking or over-expanding
- Real-time `--panel-size` CSS custom property updates, so resizing does not flicker
- `arc-resize` custom event dispatched on every size change
- Keyboard-accessible handle with Arrow key steps (5px default, 20px with Shift)
- ARIA separator role with `aria-valuenow`, `aria-valuemin`, and `aria-valuemax`
- Expanded invisible hit area for easier grab targeting on the 4px handle
Preview
Usage
This component requires JavaScript. No pure HTML/CSS version is available. Use the Web Component directly or a framework wrapper.
<arc-resizable direction="horizontal" size="200">
<div>Resizable panel</div>
</arc-resizable>import { Resizable } from '@arclux/arc-ui-react';
export default function Example() {
return (
<Resizable direction="horizontal" size="200">
<div>Resizable panel</div>
</Resizable>
);
}<script setup>
import { Resizable } from '@arclux/arc-ui-vue';
</script>
<template>
<Resizable direction="horizontal" size="200">
<div>Resizable panel</div>
</Resizable>
</template><script>
import { Resizable } from '@arclux/arc-ui-svelte';
</script>
<Resizable direction="horizontal" size="200">
<div>Resizable panel</div>
</Resizable>import { Component } from '@angular/core';
import { Resizable } from '@arclux/arc-ui-angular';
@Component({
imports: [Resizable],
template: `
<arc-resizable direction="horizontal" size="200">
<div>Resizable panel</div>
</arc-resizable>
`,
})
export class MyComponent {}import { Resizable } from '@arclux/arc-ui-solid';
export default function Example() {
return (
<Resizable direction="horizontal" size="200">
<div>Resizable panel</div>
</Resizable>
);
}import { Resizable } from '@arclux/arc-ui-preact';
export default function Example() {
return (
<Resizable direction="horizontal" size="200">
<div>Resizable panel</div>
</Resizable>
);
}API
sizenumber300- Current size of the panel in pixels. Updated in real time during drag. Maps to the --panel-size CSS custom property.
direction'horizontal' | 'vertical''horizontal'- Which dimension the handle resizes. Horizontal resizes width, with the handle on an inline edge; vertical resizes height, with the handle on the top or bottom edge.
handle'end' | 'start''end'- Which edge the handle sits on.
end(the default) is the inline end (the right edge in a left-to-right page) or the bottom;startis the inline start or the top, for a panel docked against the far side of its container. Dragging the handle away from the panel grows it either way. minSizenumber100- Minimum allowed size in pixels. The panel cannot be dragged smaller than this value.
maxSizenumber0- Maximum allowed size in pixels. The panel cannot be dragged larger than this value. Defaults to no limit.
Events
arc-resizedetail:{ size: number }- Fired during and after panel resize with { size } detail