> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.

# Resizable

A layout primitive that splits a view into resizable panels separated by draggable handles. Wraps `react-resizable-panels` with design-system styling.

[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/Resizable) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/layout-resizable--overview)

```tsx
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@wallarm-org/design-system/Resizable';

export const Horizontal = () => (
  <div className='h-[320px] w-[600px] rounded-8 border border-border-primary'>
    <ResizablePanelGroup orientation='horizontal'>
      <ResizablePanel id='left' defaultSize='50%'>
        <div className='flex h-full items-center justify-center p-24'>
          <span className='text-text-secondary'>Panel A</span>
        </div>
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel id='right' defaultSize='50%'>
        <div className='flex h-full items-center justify-center p-24'>
          <span className='text-text-secondary'>Panel B</span>
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
  </div>
);
```

## Usage

```tsx
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@wallarm-org/design-system/Resizable';
```

## Examples

### Vertical

Two panels stacked vertically.

```tsx
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@wallarm-org/design-system/Resizable';

export const Vertical = () => (
  <div className='h-[400px] w-[400px] rounded-8 border border-border-primary'>
    <ResizablePanelGroup orientation='vertical'>
      <ResizablePanel id='top' defaultSize='50%'>
        <div className='flex h-full items-center justify-center p-24'>
          <span className='text-text-secondary'>Top</span>
        </div>
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel id='bottom' defaultSize='50%'>
        <div className='flex h-full items-center justify-center p-24'>
          <span className='text-text-secondary'>Bottom</span>
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
  </div>
);
```

### Three panels

Three panels with two resize handles.

```tsx
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@wallarm-org/design-system/Resizable';

export const ThreePanels = () => (
  <div className='h-[320px] w-[800px] rounded-8 border border-border-primary'>
    <ResizablePanelGroup orientation='horizontal'>
      <ResizablePanel id='left' defaultSize='25%'>
        <div className='flex h-full items-center justify-center p-24'>
          <span className='text-text-secondary'>Sidebar</span>
        </div>
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel id='center' defaultSize='50%'>
        <div className='flex h-full items-center justify-center p-24'>
          <span className='text-text-secondary'>Content</span>
        </div>
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel id='right' defaultSize='25%'>
        <div className='flex h-full items-center justify-center p-24'>
          <span className='text-text-secondary'>Inspector</span>
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
  </div>
);
```

### Nested

A horizontal group with a vertical sub-group nested inside one panel.

```tsx
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@wallarm-org/design-system/Resizable';

export const Nested = () => (
  <div className='h-[400px] w-[700px] rounded-8 border border-border-primary'>
    <ResizablePanelGroup orientation='horizontal'>
      <ResizablePanel id='left' defaultSize='40%'>
        <div className='flex h-full items-center justify-center p-24'>
          <span className='text-text-secondary'>Sidebar</span>
        </div>
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel id='right' defaultSize='60%'>
        <ResizablePanelGroup orientation='vertical'>
          <ResizablePanel id='top' defaultSize='60%'>
            <div className='flex h-full items-center justify-center p-24'>
              <span className='text-text-secondary'>Editor</span>
            </div>
          </ResizablePanel>
          <ResizableHandle />
          <ResizablePanel id='bottom' defaultSize='40%'>
            <div className='flex h-full items-center justify-center p-24'>
              <span className='text-text-secondary'>Terminal</span>
            </div>
          </ResizablePanel>
        </ResizablePanelGroup>
      </ResizablePanel>
    </ResizablePanelGroup>
  </div>
);
```

### Collapsible

A panel that can be collapsed by dragging past its minimum size. Double-click the handle to reset.

```tsx
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@wallarm-org/design-system/Resizable';

export const Collapsible = () => (
  <div className='h-[320px] w-[600px] rounded-8 border border-border-primary'>
    <ResizablePanelGroup orientation='horizontal'>
      <ResizablePanel id='sidebar' defaultSize='30%' collapsible minSize='15%' collapsedSize='0%'>
        <div className='flex h-full items-center justify-center p-24'>
          <span className='text-text-secondary'>Collapsible</span>
        </div>
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel id='content' defaultSize='70%'>
        <div className='flex h-full items-center justify-center p-24'>
          <span className='text-text-secondary'>Content</span>
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
  </div>
);
```

### With constraints

Panels with minimum and maximum size constraints.

```tsx
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@wallarm-org/design-system/Resizable';

export const WithConstraints = () => (
  <div className='h-[320px] w-[600px] rounded-8 border border-border-primary'>
    <ResizablePanelGroup orientation='horizontal'>
      <ResizablePanel id='constrained' defaultSize='40%' minSize='20%' maxSize='60%'>
        <div className='flex h-full items-center justify-center p-24'>
          <span className='text-text-secondary'>Min 20% / Max 60%</span>
        </div>
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel id='flexible' defaultSize='60%'>
        <div className='flex h-full items-center justify-center p-24'>
          <span className='text-text-secondary'>Flexible</span>
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
  </div>
);
```

### With tooltip

A "Drag to resize" tooltip appears on hover, like the Drawer resize handle.

```tsx
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@wallarm-org/design-system/Resizable';
import { Tooltip, TooltipContent, TooltipTrigger } from '@wallarm-org/design-system/Tooltip';

export const WithTooltip = () => (
  <div className='h-[320px] w-[600px] rounded-8 border border-border-primary'>
    <ResizablePanelGroup orientation='horizontal'>
      <ResizablePanel id='left' defaultSize='50%'>
        <div className='flex h-full items-center justify-center p-24'>
          <span className='text-text-secondary'>Panel A</span>
        </div>
      </ResizablePanel>
      <Tooltip positioning={{ placement: 'right' }}>
        <TooltipTrigger asChild>
          <ResizableHandle />
        </TooltipTrigger>
        <TooltipContent>Drag to resize</TooltipContent>
      </Tooltip>
      <ResizablePanel id='right' defaultSize='50%'>
        <div className='flex h-full items-center justify-center p-24'>
          <span className='text-text-secondary'>Panel B</span>
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
  </div>
);
```

### With overflow list

Resizing with content that reflows — the tag list adapts live as the panel width changes. Overflow items appear in a popover.

```tsx
import { OverflowList } from '@wallarm-org/design-system/OverflowList';
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@wallarm-org/design-system/Resizable';
import { Tag } from '@wallarm-org/design-system/Tag';

export const WithOverflowList = () => (
  <div className='h-[320px] w-[600px] rounded-8 border border-border-primary'>
    <ResizablePanelGroup orientation='horizontal'>
      <ResizablePanel id='tags' defaultSize='50%' minSize='20%'>
        <div className='flex h-full items-center p-16'>
          <OverflowList
            className='gap-4'
            items={OVERFLOW_TAGS}
            itemRenderer={item => <Tag key={item}>{item}</Tag>}
          />
        </div>
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel id='content' defaultSize='50%'>
        <div className='flex h-full items-center justify-center p-24'>
          <span className='text-text-secondary'>Content</span>
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
  </div>
);
```

## Props

### ResizableHandle

| Prop               | Type                                                 | Default | Description                                                                                                                                                                                                                                     |
| ------------------ | ---------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| title              | `string \| undefined`                                |         |                                                                                                                                                                                                                                                 |
| defaultChecked     | `boolean \| undefined`                               |         |                                                                                                                                                                                                                                                 |
| defaultValue       | `string \| number \| readonly string[] \| undefined` |         |                                                                                                                                                                                                                                                 |
| autoFocus          | `boolean \| undefined`                               |         |                                                                                                                                                                                                                                                 |
| rel                | `string \| undefined`                                |         |                                                                                                                                                                                                                                                 |
| onChange           | `ChangeEventHandler<T, Element> \| undefined`        |         |                                                                                                                                                                                                                                                 |
| disabled           | `boolean \| undefined`                               |         | When disabled, the separator cannot be used to resize its neighboring panels. ℹ️ The panels may still be resized indirectly (while other panels are being resized). To prevent a panel from being resized at all, it needs to also be disabled. |
| disableDoubleClick | `boolean \| undefined`                               |         | When true, double-clicking this `Separator` will not reset its `Panel` to its default size.                                                                                                                                                     |
| data-testid        | `string \| undefined`                                |         |                                                                                                                                                                                                                                                 |

### ResizablePanel

| Prop                | Type                                                             | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| ------------------- | ---------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| id                  | `string \| undefined`                                            |         | Unique panel identity for layout persistence.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| title               | `string \| undefined`                                            |         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| defaultChecked      | `boolean \| undefined`                                           |         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| defaultValue        | `string \| number \| readonly string[] \| undefined`             |         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| autoFocus           | `boolean \| undefined`                                           |         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| tabIndex            | `number \| undefined`                                            |         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| rel                 | `string \| undefined`                                            |         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| onChange            | `ChangeEventHandler<T, Element> \| undefined`                    |         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| disabled            | `boolean \| undefined`                                           |         | When disabled, a panel cannot be resized either directly or indirectly (by resizing another panel).                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| onResize            | `complex`                                                        |         | Called when panel sizes change.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| collapsedSize       | `string \| number \| undefined`                                  |         | Panel size when collapsed; defaults to 0%.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| collapsible         | `boolean \| undefined`                                           |         | This panel can be collapsed. ℹ️ A collapsible panel will collapse when it's size is less than of the specified `minSize`                                                                                                                                                                                                                                                                                                                                                                                                                        |
| defaultSize         | `string \| number \| undefined`                                  |         | Default size of Panel within its parent group; default is auto-assigned based on the total number of Panels. ℹ️ Interpretation rules: - Numbers are interpreted as pixels (e.g. `defaultSize={200}` is 200 pixels) - Strings without explicit units are interpreted as percentage (e.g. `defaultSize="50"` is 50 percent) - Use explicit units (e.g. "px", "%", "em", "rem", "vh", or "vw") to change interpretation ⚠️ Percentage based sizes may cause slight layout shift when server-rendering. For more information see the documentation. |
| groupResizeBehavior | `"preserve-relative-size" \| "preserve-pixel-size" \| undefined` |         | How should this Panel behave if the parent Group is resized? Defaults to `preserve-relative-size`. - `preserve-relative-size`: Retain the current relative size (as a percentage of the Group) - `preserve-pixel-size`: Retain its current size (in pixels) ℹ️ Panel min/max size constraints may impact this behavior. ⚠️ A Group must contain at least one Panel with `preserve-relative-size` resize behavior.                                                                                                                               |
| maxSize             | `string \| number \| undefined`                                  |         | Maximum size of Panel within its parent group; defaults to `"100%"`. ℹ️ Interpretation rules: - Numbers are interpreted as pixels (e.g. `maxSize={200}` is 200 pixels) - Strings without explicit units are interpreted as percentage (e.g. `maxSize="50"` is 50 percent) - Use explicit units (e.g. "px", "%", "em", "rem", "vh", or "vw") to change interpretation                                                                                                                                                                            |
| minSize             | `string \| number \| undefined`                                  |         | Minimum size of Panel within its parent group; defaults to 0%. ℹ️ Interpretation rules: - Numbers are interpreted as pixels (e.g. `minSize={200}` is 200 pixels) - Strings without explicit units are interpreted as percentage (e.g. `minSize="50"` is 50 percent) - Use explicit units (e.g. "px", "%", "em", "rem", "vh", or "vw") to change interpretation                                                                                                                                                                                  |
| panelRef            | `complex`                                                        |         | Exposes the following imperative API: - `collapse(): void` - `expand(): void` - `getSize(): number` - `isCollapsed(): boolean` - `resize(size: number): void` ℹ️ The `usePanelRef` and `usePanelCallbackRef` hooks are exported for convenience use in TypeScript projects.                                                                                                                                                                                                                                                                     |
| data-testid         | `string \| undefined`                                            |         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |

### ResizablePanelGroup

| Prop            | Type                                                 | Default      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| --------------- | ---------------------------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| autoSaveId      | `string \| undefined`                                |              | Unique id for layout persistence via localStorage.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| title           | `string \| undefined`                                |              |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| defaultChecked  | `boolean \| undefined`                               |              |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| defaultValue    | `string \| number \| readonly string[] \| undefined` |              |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| autoFocus       | `boolean \| undefined`                               |              |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| tabIndex        | `number \| undefined`                                |              |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| rel             | `string \| undefined`                                |              |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| onChange        | `ChangeEventHandler<T, Element> \| undefined`        |              |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| disabled        | `boolean \| undefined`                               |              | Disable resize functionality.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| orientation     | `"vertical" \| "horizontal" \| undefined`            | `horizontal` | Specifies the resizable orientation ("horizontal" or "vertical"); defaults to "horizontal"                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| defaultLayout   | `complex`                                            |              | Default layout for the Group. ℹ️ This value allows layouts to be remembered between page reloads. ⚠️ Slight layout shift may occur when server-rendering panels with percentage-based default sizes. Refer to the documentation for suggestions on how to minimize the impact of this.                                                                                                                                                                                                                                                                                                                                                                                                              |
| groupRef        | `complex`                                            |              | Exposes the following imperative API: - `getLayout(): Layout` - `setLayout(layout: Layout): void` ℹ️ The `useGroupRef` and `useGroupCallbackRef` hooks are exported for convenience use in TypeScript projects.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| onLayoutChange  | `complex`                                            |              | Called when the Group's layout is changing. ⚠️ For layout changes caused by pointer events, this method is called each time the pointer is moved. For most cases, it is recommended to use the `onLayoutChanged` callback instead.                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| onLayoutChanged | `complex`                                            |              | Called after the Group's layout has  been changed. ℹ️ For layout changes caused by pointer events, this method is not called until the pointer has been released. This method is recommended when saving layouts to some storage api. ℹ️ The second argument contains meta information about the layout change. The `isUserInteraction` attribute signals whether the resize was caused by direct user input. It is true for resizes caused by pointer or keyboard input and false for other triggers (e.g. imperative API calls, initial mount, etc.) The `requestedLayout` attribute is the layout before constraints were applied for the current Group size; prefer it when persisting layouts. |
| data-testid     | `string \| undefined`                                |              |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |

## Explorer