ResizablePanel

Stable

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

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.

Source Edit docs Report an issue

Overview

Organisation settings

Email integrations

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>
  );
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

Organisation settings

Email integrations

Light

Organisation settings

Email integrations

Dark

Organisation settings

Email integrations

High contrast

Import

tsx

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

Examples

Collapsed to a rail

A collapsedSize above zero leaves a narrow rail visible.

Signature templates

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.

Draft

Approved

Deployed

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

Prop	Type	Default	Description
`defaultSize`	`number`	None	Initial size in percent.
`minSize`	`number`	`10`	Minimum size in percent.
`maxSize`	`number`	`100`	Maximum size in percent.
`collapsible`	`boolean`	`false`	Allow collapsing to collapsedSize.
`collapsedSize`	`number`	`0`	Size in percent when collapsed.
`id`	`string`	None	Referenced by the following handle’s aria-controls.
`...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.

Usage 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.

Overview

Organisation settings

Email integrations

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>
  );
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

Organisation settings

Email integrations

Light

Organisation settings

Email integrations

Dark

Organisation settings

Email integrations

High contrast

Examples

Collapsed to a rail

A collapsedSize above zero leaves a narrow rail visible.

Signature templates

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.

Draft

Approved

Deployed

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

Prop	Type	Default	Description
`defaultSize`	`number`	None	Initial size in percent.
`minSize`	`number`	`10`	Minimum size in percent.
`maxSize`	`number`	`100`	Maximum size in percent.
`collapsible`	`boolean`	`false`	Allow collapsing to collapsedSize.
`collapsedSize`	`number`	`0`	Size in percent when collapsed.
`id`	`string`	None	Referenced by the following handle’s aria-controls.
`...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.

Overview

Light, dark and high contrast

Import

Examples

Collapsed to a rail

Shared space

API reference

Accessibility

Keyboard

Usage guidelines

Do

Don’t

Related

Overview

Light, dark and high contrast

Import

Examples

Collapsed to a rail

Shared space

API reference

Accessibility

Keyboard

Usage guidelines

Do

Don’t

Related