# EuiResizableDirective

**Type:** directive



Enables interactive resizing of a container element by dragging a handle.
Applies width constraints dynamically and supports left or right-side handle placement.
Intended for use in layouts requiring user-adjustable panel widths, such as sidebars or split views.


**Selector:** `[euiResizable]`

## Inputs
- **euiResizableAriaLabel**: `string` - Accessible label for the separator handle.
- **euiResizableHidden**: `undefined` - Determines if the resizable feature is disable or not
- **euiResizableKeyStep**: `undefined` - Step size in pixels for keyboard arrow key resizing.
- **euiResizableMaxWidth**: `undefined` - Maximum width constraint for the resizable container in pixels. Used for aria-valuemax on the separator handle.
- **euiResizableMinWidth**: `undefined` - Minimum width constraint for the resizable container in pixels. Prevents the container from being resized below this value. Accepts string or number values, automatically converted to non-negative pixels. Defaults to 0.
- **euiResizablePosition**: `EuiResizablePosition` - Determines the placement of the resizable handle and the direction of resizing behavior. 'left' positions the handle on the left edge; 'right' positions it on the right edge. Defaults to 'right'.
- **euiResizableSideContainer**: `undefined` - Determines if the resizable directive is affecting eui-app-side-container