# SplitView

> `sidebar | list | detail` on one screen, built on Resizable: the selected record lives in the URL, the split and collapsed panes persist in a cookie, the sidebar becomes a sheet below 64rem and one pane per route shows below 48rem.

```ts
import { SplitView } from "@sdxc/ui/app";
```

Renders the view. From 64rem the panes sit side by side; below it the sidebar is a sheet
opened by a SplitViewToggle; below 48rem only the `active` pane shows, and the
detail gains a back link. Each pane scrolls on its own and keeps its id for a frame.

## Examples

```tsx
<SplitView
	id="inbox"
	sidebar={<FolderNav />}
	list={<ConversationList />}
	detail={selected ? <Conversation id={selected} /> : null}
	empty={<Empty title="No conversation selected" />}
	backHref="/inbox"
	layout={readSplitViewLayout(request.headers.get("Cookie"))}
	labels={{ resizeSidebar: "Resize folders", resizeList: "Resize conversations", back: "Inbox" }}
/>
```

```tsx
<SplitView id="customers" list={<CustomerList />} detail={<Customer />} labels={labels} />
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `id` | `string` | The view's id; its panes take `${id}-sidebar`, `${id}-list` and `${id}-detail`. |
| `sidebar?` | `RemixNode` | Folders, views, filters: omit it for a two-pane list + detail. |
| `rail?` | `RemixNode` | What the sidebar shows collapsed to its rail, such as its icons alone. |
| `list` | `RemixNode` | The list of records, each link carrying `data-split-view-item`. |
| `detail?` | `RemixNode` | The selected record, or nothing while none is selected. |
| `empty?` | `RemixNode` | Shown in the detail pane while nothing is selected. |
| `active?` | `Pane` | The pane this route shows below 48rem. |
| `backHref?` | `string` | The list's URL; below 48rem the detail links back to it. |
| `layout?` | `Layout` | The remembered split, from readSplitViewLayout. |
| `cookie?` | `string` | The cookie the layout persists in; give each view on a site its own. |
| `keys?` | `SplitViewKeyScope` | Where j/k answer: `"page"` anywhere, `"view"` only while focus is inside the view. |
| `labels` | `Labels` |  |

Also accepts everything in `Omit<TagProps<"div">, "id">`.