Resizable
Resizable panel with drag handle.
<arc-resizable> Overview
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 for flicker-free resizing
- `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
-
direction'horizontal' | 'vertical''horizontal' - Controls which edge the drag handle appears on. Horizontal places the handle on the right edge and resizes width; vertical places it on the bottom edge and resizes height.
-
min-sizenumber100 - Minimum allowed size in pixels. The panel cannot be dragged smaller than this value.
-
max-sizenumberInfinity - Maximum allowed size in pixels. The panel cannot be dragged larger than this value. Defaults to no limit.
-
sizenumber300 - Current size of the panel in pixels. Updated in real time during drag. Maps to the --panel-size CSS custom property.
Events
-
arc-resizedetail: { size: number } - Fired during and after panel resize with { size } detail