Theme
Split view
A main side and a detail panel next to each other, like a record page and its attributes. Each scrolls on its own. The panel is layout.panel wide, or resizable; in a narrow view it moves below.
Examples
The record itself. Narrow the window and the panel moves below it.
A list of records on this side, the chosen one beside it.
Props
SplitView
A main side and a detail panel next to each other, like a record page and its attributes. Each side scrolls on its own. The panel is layout.panel wide, or resizable with a window splitter; when the view is narrow it moves below the main side.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | The main side: a list, or a record's content. |
panel | ReactNode | — | The detail beside it: a record's attributes, or the item chosen from the list. |
panelLabel | string | — | Names the panel's complementary landmark and its resize handle. |
placement? | "end" | "start" | "end" | Which edge the panel sits on; it mirrors in right-to-left text. |
resizable? | boolean | false | Let the reader drag, or move with the arrow keys, the line between the two. |
minPanelSize? | number | 240 | The narrowest the panel can be made, in CSS pixels. |
maxPanelSize? | number | 640 | The widest the panel can be made, in CSS pixels. |
Keyboard
| Key | Does |
|---|---|
| ArrowLeft or ArrowRight | Move the line between the two (mirrored in right-to-left text) |
| Shift + Arrow | Moves it further |
| Home or End | Make the panel its narrowest or widest |
Accessibility
- The panel is a complementary landmark named by panelLabel. It scrolls on its own, so it takes focus, and the arrow keys then scroll it even when it holds only text.
- The resize handle follows the WAI-ARIA window splitter pattern: a focusable separator that reports the panel's width and controls it. React Aria has no splitter, so this one is built to the pattern and tested in the browser.
- The handle is wider than the line it draws, so it is easy to grab.
Browser support
The stacking follows the view's own width through a container query, not the window's.