# List

Structured vertical list with `List.Item` rows for labels, descriptions, and optional start/end content. Supports compound children or an `items` array.

## Examples

### Default

A member list with labels and secondary descriptions.

```tsx
import { List } from '@var-ui/react';

<List header="Members">
  <List.Item label="Ada Lovelace" description="Admin" />
  <List.Item label="Grace Hopper" description="Editor" />
</List>
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

### Icons

Pass decorative `startContent` (for example `Icon`) for shortcut or settings rows. Keep start/end slots non-interactive when the row uses `href` / `onPress`.

```tsx
import { Icon, List } from '@var-ui/react';

<List header="Shortcuts" hasDividers>
  <List.Item
    label="Search"
    description="Find anything"
    startContent={<Icon name="search" size="sm" />}
  />
  <List.Item
    label="Recent"
    description="Opened today"
    startContent={<Icon name="clock" size="sm" />}
  />
</List>
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| children | ReactNode | no |  |  |
| className | string \| undefined | no |  |  |
| density | "compact" \| "balanced" \| "spacious" \| undefined | no |  |  |
| hasDividers | boolean \| undefined | no |  |  |
| header | ReactNode | no |  |  |
| items | ListItemData[] \| undefined | no |  |  |
| listStyle | "none" \| "decimal" \| "disc" \| undefined | no |  |  |
| onAction | ((id: string) => void) \| undefined | no |  | Fired for interactive items without href (items mode / Item onPress). |
| renderEnd | ((item: ListItemData) => ReactNode) \| undefined | no |  |  |
| renderStart | ((item: ListItemData) => ReactNode) \| undefined | no |  |  |

## Accessibility

Renders a `<ul>` (or `<ol>` when `listStyle="decimal"`). Interactive rows use an invisible overlay as the sole hit target — do not nest links or buttons in `startContent` / `endContent` on those rows. Prefer string `label`s so the overlay gets a clear accessible name.