# ResizablePanel

> One resizable region inside a SplitPanel, with size limits and optional collapse.

Category: Advanced · Status: stable · Package: @bindshq/stance-react@0.1.1 · Docs: https://stanceui.com/components/resizable-panel

ResizablePanel is the building block of SplitPanel. Each panel declares its default, minimum and maximum size in percent and whether it can collapse. Place panels as direct children of SplitPanel, separated by ResizeHandle.

## Import

```tsx
import { ResizablePanel, SplitPanel, ResizeHandle } from '@bindshq/stance-react';
```

Styles are imported once per app: `@bindshq/stance-tokens/css` and `@bindshq/stance-react/styles.css`.

## Examples

### Limits

The navigation panel is limited to 15 to 40% and can collapse.

```tsx
import { ResizablePanel, ResizeHandle, SplitPanel } from '@bindshq/stance-react';

const pane = { padding: 16, height: '100%', boxSizing: 'border-box' as const };

export function Basic() {
  return (
    <div
      style={{
        height: 220,
        border: '1px solid var(--st-color-border-default)',
        borderRadius: 12,
        overflow: 'hidden',
      }}
    >
      <SplitPanel>
        <ResizablePanel id="rp-nav" defaultSize={25} minSize={15} maxSize={40} collapsible>
          <div style={pane}>Organisation settings</div>
        </ResizablePanel>
        <ResizeHandle aria-label="Resize settings navigation" />
        <ResizablePanel id="rp-main">
          <div style={{ ...pane, background: 'var(--st-color-bg-subtle)' }}>Email integrations</div>
        </ResizablePanel>
      </SplitPanel>
    </div>
  );
}
```

### Collapsed to a rail

A collapsedSize above zero leaves a narrow rail visible.

```tsx
import { ResizablePanel, ResizeHandle, SplitPanel } from '@bindshq/stance-react';

const pane = { padding: 16, height: '100%', boxSizing: 'border-box' as const };

export function Collapsed() {
  return (
    <div
      style={{
        height: 220,
        border: '1px solid var(--st-color-border-default)',
        borderRadius: 12,
        overflow: 'hidden',
      }}
    >
      <SplitPanel>
        <ResizablePanel id="rp-rail" defaultSize={6} minSize={20} collapsible collapsedSize={6}>
          <div style={pane}>
            <span aria-hidden="true">☰</span>
            <span className="st-sr-only">Navigation (collapsed)</span>
          </div>
        </ResizablePanel>
        <ResizeHandle aria-label="Resize navigation" />
        <ResizablePanel id="rp-content">
          <div style={pane}>Signature templates</div>
        </ResizablePanel>
      </SplitPanel>
    </div>
  );
}
```

### Shared space

Panels without defaultSize share the remaining space equally.

```tsx
import { ResizablePanel, ResizeHandle, SplitPanel } from '@bindshq/stance-react';

const pane = { padding: 16, height: '100%', boxSizing: 'border-box' as const };

export function Equal() {
  return (
    <div
      style={{
        height: 180,
        border: '1px solid var(--st-color-border-default)',
        borderRadius: 12,
        overflow: 'hidden',
      }}
    >
      <SplitPanel>
        <ResizablePanel id="rp-a">
          <div style={pane}>Draft</div>
        </ResizablePanel>
        <ResizeHandle aria-label="Resize draft" />
        <ResizablePanel id="rp-b">
          <div style={pane}>Approved</div>
        </ResizablePanel>
        <ResizeHandle aria-label="Resize approved" />
        <ResizablePanel id="rp-c">
          <div style={pane}>Deployed</div>
        </ResizablePanel>
      </SplitPanel>
    </div>
  );
}
```

## API reference

| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| ResizablePanel | `defaultSize` | `number` | None | Initial size in percent. |
| ResizablePanel | `minSize` | `number` | `10` | Minimum size in percent. |
| ResizablePanel | `maxSize` | `number` | `100` | Maximum size in percent. |
| ResizablePanel | `collapsible` | `boolean` | `false` | Allow collapsing to collapsedSize. |
| ResizablePanel | `collapsedSize` | `number` | `0` | Size in percent when collapsed. |
| ResizablePanel | `id` | `string` | None | Referenced by the following handle’s aria-controls. |
| ResizablePanel | `...props` | `HTMLAttributes<HTMLDivElement>` | None | Passed to the panel element. data-size and data-collapsed reflect state. |

## Accessibility

- Panels are plain containers; the adjacent ResizeHandle carries the separator semantics and keyboard support.
- A panel collapsed to 0% is hidden, so its content leaves the tab order and the accessibility tree.
- Panels scroll independently when their content overflows.

## Keyboard

| Keys | Action |
| --- | --- |
| `Enter` | On the following handle: collapse or restore a collapsible panel. |

## Guidelines

**Do**

- Give collapsible panels a visible way back, such as a rail or a toggle button.

**Don’t**

- Allow panels to shrink below a usable width for their content.

## Related

- https://stanceui.com/components/split-panel