Resizable

Resizable lets people drag the boundary between two regions to change how much room each one gets: the sidebar and the main area, or a conversation and its thread. The seam between the two columns is the only line, and the drag handle sits on it (Built from existing parts).

When to use

Anatomy

• ResizableGroup: the container. orientation="horizontal" (the default) puts its panels side by side; orientation="vertical" stacks them. Required.
• ResizablePanel: one region, with its default, minimum and maximum size. At least 2.
• ResizableHandle: the drag handle between two panels. Required between every adjacent pair: a group without handles is plain layout.

The panels draw no surface, edge or padding. The region inside each panel draws its own, including the one seam between the two (Page structure).

States

Behavior

• The handle is 12px wide and centered on the boundary, overlapping each panel by 6px, so it takes no room from either. Under a coarse pointer (a finger on a tablet) it is 24px wide.
• A double click on the handle puts the column back to its default width.
• Use the widths in Spacing for the default, minimum and maximum: every column has its own range, and the sidebar keeps one width on every page (Resizing columns).
• Pass groupResizeBehavior="preserve-pixel-size" on the sidebar's panel, so the sidebar keeps its width when the window changes and the main area takes up the difference.
• Below 768px there are no side-by-side columns to resize in Raft Chat; a server's public page keeps its columns from 640px (Responsive layout).

Accessibility

• Resizable wraps react-resizable-panels. Each ResizableHandle is a focusable separator with aria-valuenow, aria-valuemin, aria-valuemax and aria-controls.
• Keyboard: the arrow keys along the group's orientation resize in small steps, Home and End go to the minimum and the maximum, Enter collapses or restores a collapsible panel, and F6 moves to the next handle.
• Give every handle an aria-label that says what it resizes: "Resize sidebar".

Rules

• Use Resizable only for splits people adjust. Don't wrap fixed layouts in a group in case they might be resized later.
• Don't draw a line on the handle or a second edge on the panels: the seam of the region is the only line.