Skip to content

Resizable

C-28 · Components · Content

All elements · Resizable on the Components page

Last checked 2026-10-22 · Awaiting approval · Accessibility tests

Copies the bun run a11y:approve command for Resizable.

Resizable

C-28WCAG 2.2 AA · Passed #421
Axis Values
data-orientation horizontal (default) · vertical
__panel[data-collapsed] · __handle[data-state=dragging] · __grip parts and state
Split panes (hover the handle)
Left pane · 240px
Right pane · fills

Guidance

When to use

  • Split the workspace into panes side by side, such as a list and a reading pane, and let users set the split.
  • Stack panes top and bottom with data-orientation="vertical", such as a document above its comments.
  • Let users collapse a pane to its edge with __panel[data-collapsed] to give the other pane the room.
  • Size the shell navigation, which uses the same handle as .qf-shell__resizer.

When to consider something else

  • When the side content is temporary, open a Task pane or a drawer Overlay instead of a permanent split. See TaskPane.
  • When a table column needs a different width, use the Table column resize instead. See Table.
  • When the layout is fixed and users never need to change it, use Box without a handle. See Box.

Usability

Do
  • Give each pane a minimum and maximum size so neither can be dragged to nothing.
  • Remember the user's split per view.
  • Reset the split to its default on double-click of the handle.
  • Show the __grip on hover and focus so users find the handle.
Don’t
  • Don't nest more than two levels of splits.
  • Don't put a handle where users cannot see what it resizes.
  • Don't make dragging the only way to resize.

Accessibility

Keyboard

Resizable keyboard
Keys Action
Tab Moves focus to the handle.
Arrow Left / Arrow Right Required: the binding must move a side-by-side split by a fixed step (the shell nav uses 16px).
Arrow Up / Arrow Down Required: the binding must move a stacked (data-orientation="vertical") split by a fixed step.
Home / End Required: the binding must move the split to its minimum or maximum.
Enter Should collapse or restore the primary pane when the panes support collapsing.

Roles and names

  • The handle has role="separator" with tabindex="0", which makes it a focusable, adjustable splitter.
  • It needs an aria-label naming what it resizes, such as "Resize panes" or "Resize navigation".
  • aria-orientation describes the separator line: vertical for side-by-side panes, horizontal for stacked panes.
  • It carries aria-valuenow, aria-valuemin and aria-valuemax, which the binding must update as the split moves; aria-controls should point at the primary pane.
  • data-state="dragging" is visual only.

Focus

  • The handle is one Tab stop between the two panes in reading order.
  • Focus stays on the handle while resizing by keyboard; it shows the shared focus ring.
  • When a pane collapses, focus stays on the handle, never on content that has been hidden.

Other requirements

  • Dragging needs a single-pointer alternative, such as Wider and Narrower buttons or a View menu option (2.5.7); the shell offers step buttons.
  • The handle is 0.5rem wide, below 24px; it passes 2.5.8 only through spacing, so keep other targets away from it.
  • The grip and hover line need 3:1 against the panes (1.4.11).
  • At 320px width (1.4.10) the panes should stack or one should collapse instead of squeezing both.

Test your implementation too. This guidance covers the element as specified here. How a screen composes it (labels, order, announcements) still needs its own keyboard and screen reader check.

Accessibility tests

WCAG 2.2 AA · Passed

Passed the gate (run 358b316 on 2026-10-22): no finding in any theme. Awaiting a person’s approval of the checklist below.

Resizable test checklist
Area Automated A person checks
General Passed Color is never the only cue, text alternatives say the same thing as the graphic, and the element reads the same in the light and the dark theme.
Zoom Passed At 200% zoom, at 320 CSS pixels wide and with the WCAG text-spacing overrides, nothing is lost, clipped or overlapping.
Keyboard Passed Every row of the Keyboard table works, focus is always visible and never trapped, and the tab order follows the reading order. (5 rows)
Screen reader Passed With NVDA or JAWS on Windows and VoiceOver on macOS, names, roles and states are announced as Roles and names says, and changes are announced once. (5 items)

Approving. When the checklist passes on the checked run, record it with bun run a11y:approve -- resizable --by "Your name" and commit a11y/approvals.json with the rebuilt pages. All test status

Package

Consumers link one stylesheet, css/classic/index.css, which includes every element. The files below are where this element is defined.

Resizable package
Source css/classic/components/utility.css
Specimens also use Box · Card · Chip · Icon · Table · Text · Toolbar
Sprites sprites/icons.svg
React Not yet available: the React binding has not started.

Latest updates

No recorded changes yet.

All release notes