# GridList

> An interactive row list built from plain, already-ordered markup: each GridList.Item carries a stable key a paired selection, keyboard-navigation, or reorder behavior can read, while the list itself renders as a fully static document by default.

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

Renders the list's root host as a bordered `<div>` with `role="grid"`,
keeping its row-list layer in an inner wrapper since a `@container` query
can't resolve against the host that declares it; reach `parts.list` to adjust it.

## Examples

```tsx
<GridList aria-label={t("playlist.title")}>
	<GridList.Item id="track-1">{t("playlist.track", { title: "Intro" })}</GridList.Item>
	<GridList.Item id="track-2">{t("playlist.track", { title: "Chorus" })}</GridList.Item>
</GridList>
```

```tsx
<GridList aria-label={t("gallery.title")} layout="grid">
	<GridList.Item id="photo-1">{t("gallery.photo", { name: "Sunset" })}</GridList.Item>
	<GridList.Item id="photo-2">{t("gallery.photo", { name: "Harbor" })}</GridList.Item>
</GridList>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `layout?` | `"stack" \| "grid"` | Row arrangement. Defaults to DEFAULT_LAYOUT. |
| `children` | `RemixNode` | GridList.Item, GridList.Section, and GridList.LoadMoreItem rows to render. |
| `parts?` | `PartsProps` | Per-part styling for the list's internal row-list wrapper. |

Also accepts everything in `TagProps<"div">`.


### GridList.Item

Renders a single row: a `<div>` carrying `role="row"`, its `id` mirrored onto a `data-rmx-key` attribute so a paired selection, keyboard-navigation, or reorder behavior can correlate the row with its own state.

| Prop | Type | Description |
| --- | --- | --- |
| `id` | `string` | Stable identifier for this row, mirrored onto both the rendered element's own `id` and a `data-rmx-key` attribute, so the row is already correlation-ready for a paired behavior once one is attached. |

Also accepts everything in `TagProps<"div">`.


### GridList.Section

Renders a titled group of rows: a `<div>` carrying `role="rowgroup"`, stacking an optional GridList.Header above its GridList.Item rows, with a block-start rule before every section but the first.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The section's optional GridList.Header label, followed by its GridList.Item rows. |

Also accepts everything in `TagProps<"div">`.


### GridList.Header

Renders a section's label: a `<header>` styled as small, muted, uppercase text for the GridList.Item rows nested beneath it in a GridList.Section; point the section's `aria-labelledby` at its `id`.

Also accepts everything in `TagProps<"header">`.


### GridList.DragHandle

Renders a row's drag grip as a native `<button type="button">` written before the consumer's attributes, so a `command`/`commandfor` pair still runs inside a `<form>`; its pointer target grows to `--ui-target-size` around the 16px glyph.

| Prop | Type | Description |
| --- | --- | --- |
| `"aria-label"` | `string` | Accessible name for the icon-only control, e.g. "Reorder" or "Drag to reorder". |

Also accepts everything in `Omit<TagProps<"button">, "type" | "children">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Layout` | `"stack" \| "grid"` | Arrangement of GridList.Item rows: `"stack"` renders them as a single column, `"grid"` wraps them into a multi-column layout growing from two columns up to four as the list's own container widens. |