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 (Composites).

PageLightDarkBoth

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.
• Use the widths in Spacing for the default, minimum and maximum: the sidebar and the thread panel each have their own range.
• 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 (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.