use UI

Split View

Also called split pane, resizable panes, side-by-side, splitter

Two panes shown together with a movable divider between them.

Example

Source

.card {
  border-radius: 12px;
  padding: 16px;
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.06),
    0 8px 24px rgb(0 0 0 / 0.08);
}

Preview

Card

Both panes matter at once. Neither one navigates the other.

What the divider exposes

role="separator" tabindex="0"
aria-orientation="vertical" aria-controls="split-source"
aria-valuenow="50" aria-valuemin="20" aria-valuemax="80"

Tab reaches the divider, arrows move it two percent at a time, Shift makes that ten, Home and End go to the limits and Enter collapses to the minimum and back. The panes cannot be dragged to nothing — 20% is the floor, so neither side can be lost.

When to use it

  • The two panes are consulted together — writing beside a preview, a diff beside its file, a form beside its result.
  • Different people want different proportions, and the split is worth adjusting.
  • Both panes are of equal standing: neither is a menu for the other.

When not to

  • One pane selects what the other shows. That is master-detail, and the selection needs an address.
  • The window is narrow. Two panes below about 700px are two cramped columns; stack them instead.
  • The proportion never changes. Then it is a grid, and a draggable divider is a control nobody needs.

Trade-offs

  • Comparison without switching, which is the entire reason the pattern exists.
  • Adjustable to the task: more room for the editor now, more for the preview later.
  • No routing to design — the split is a view preference, not a location.
  • The divider is a small target, and building it as a plain `div` leaves it unusable by keyboard.
  • Panes that can be dragged to zero width strand content with no way back unless there is a reset.
  • Both panes have to survive being narrow, which doubles the responsive work inside them.

Accessibility

What this pattern needs in order to work for everyone.

Keyboard
  • The divider is focusable and resizes with arrow keys — Left and Right for a vertical split, Up and Down for a horizontal one.
  • Home and End send it to its limits, and Enter can toggle between collapsed and the last size.
  • Never let a drag leave a pane at zero with no route back. Enforce a minimum, or provide a reset control.
Roles and state
  • The divider is `role="separator"` with `tabindex="0"`, `aria-orientation`, and `aria-valuenow`, `aria-valuemin` and `aria-valuemax` describing the first pane's size.
  • Name it: `aria-label="Resize panes"`, and point `aria-controls` at the pane the value refers to.
  • A separator without `tabindex` is decoration — the ARIA role alone does not make it operable.
  • Give it a hit area of at least 8–10px even when the painted line is 1px.
Focus
Focus stays on the divider through the whole resize, keyboard or pointer. Nothing about resizing should move focus into a pane.

In the wild

  • VS Code — Editor and terminal split with keyboard-resizable dividers and a reset command.
  • CodePen — Editor beside preview, dragging between them, with the ratio kept as a per-user setting.

Compared with

Side-by-side breakdowns of patterns that solve a similar problem.