Resizable
Panels the user can resize by dragging the handle between them.
When to use
- Two or three views users size to their task: a record list beside the record detail, a query beside its results.
When not to use
- App navigation that opens and closes: use Sidebar.
- A secondary panel shown on demand: use Sheet.
- A layout with fixed proportions: use CSS grid.
Install
npx shadcn@latest add @clinia/resizableRecords
Record detail
Anatomy
Records
Detail
- 1Panel group
data-slot="resizable-panel-group"flex · orientation - 2Panel
data-slot="resizable-panel"defaultSize · minSize - 3Handle
data-slot="resizable-handle"bg-border · focus-visible:ring-ring
Clinia rules
- Keep
withHandlewhen the split isn't obvious: the grip shows where to drag. - Set
minSizeon every panel, so no panel can shrink until its content is unreadable. - Give each panel a heading or a clear first line, so users know what they're resizing.
Do and don't
Records
Detail
Records
Detail
Accessibility
Built in
- The handle is focusable and moves with the arrow keys.
- Arrow keys move the handle 5% at a time. Home and End jump to the panel's minimum and maximum size.
- Enter collapses and restores a panel set as
collapsible. F6 moves focus to the next handle, Shift+F6 to the previous one.
Your responsibility
- Give each
ResizableHandleanaria-labelthat names the split, such asResize record list. - Don't make dragging the only way to see content: the smallest panel size still has to show its content or let it scroll.
How to test
- Press Tab until the handle has focus: the focus ring appears on it.
- Press Arrow Left and Arrow Right: the panels resize. Press Home, then End: the first panel jumps to its minimum, then its maximum.
- With a screen reader, the handle is announced as a separator with its current position.
API
ResizableHandle
| Prop | Values | Default | Description |
|---|---|---|---|
| withHandle | boolean | – | Shows a grip on the handle. Keep it when the split isn't obvious. |
All other props come from react-resizable-panels.
Related