SplitPane

Two controlled panes with keyboard resizing and a responsive stacked layout.

Use Left and Right arrow keys to resize. Home and End move to the allowed limits.

Resize the panes using the separator.

Owner: Project team

Document 65% · Details 35%

Loading example…

Interactions use local sample data.

Usage and props

Keep sizes in application state and supply bounded container space. Collapsing a pane unmounts its content; persist drafts above it.

This is the public signature used by this example. Open Code to see how the values and callbacks fit together.

label · primary · secondary · sizes: readonly [number, number] · onSizesChange? · presentation? · orientation? · disabled?

These are the main props for the example. The package's TypeScript declarations include the full API.