> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.

# List

A semantic `ul` or `ol` with its spacing and markers under control — reach for `ordered` only when the sequence matters, and for a `Table` as soon as each item carries fields of its own. Markers are off by default and `role="list"` is set either way, so a list without bullets is still a list to a screen reader.

[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/List) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/data-display-list--overview)

```tsx
import { List, ListItem } from '@wallarm-org/design-system/List';

export const Basic = () => (
  <List>
    <ListItem>First item</ListItem>
    <ListItem>Second item</ListItem>
    <ListItem>Third item</ListItem>
  </List>
);
```

## Usage

```tsx
import { List, ListItem } from '@wallarm-org/design-system/List';
```

## Examples

### Ordered

`variant='ordered'` changes the element to `ol`; the numbers themselves come from
`marker='decimal'`, which is a separate decision from the element.

```tsx
import { List, ListItem } from '@wallarm-org/design-system/List';

export const Ordered = () => (
  <List variant='ordered' marker='decimal'>
    <ListItem>First step</ListItem>
    <ListItem>Second step</ListItem>
    <ListItem>Third step</ListItem>
  </List>
);
```

### With disc

`marker='disc'` turns the bullets on and indents the list by 24px to make room for them.

```tsx
import { List, ListItem } from '@wallarm-org/design-system/List';

export const WithDisc = () => (
  <List marker='disc'>
    <ListItem>Apples</ListItem>
    <ListItem>Bananas</ListItem>
    <ListItem>Cherries</ListItem>
  </List>
);
```

### With icons

`ListIcon` puts a meaningful glyph where the marker would be, coloured by what the row
says; `ListItem` is a flex row, so the icon and its text share a baseline.

```tsx
import { List, ListIcon, ListItem } from '@wallarm-org/design-system/List';

export const WithIcons = () => (
  <List>
    <ListItem>
      <ListIcon className='text-text-success'>&#10003;</ListIcon>
      Completed task
    </ListItem>
    <ListItem>
      <ListIcon className='text-text-warning'>&#9888;</ListIcon>
      Pending review
    </ListItem>
    <ListItem>
      <ListIcon className='text-text-error'>&#10007;</ListIcon>
      Failed check
    </ListItem>
  </List>
);
```

### Spacing

Three of the seven spacing steps. The gap sits between items only, so a wrapped item
keeps its own lines tight while the list stays loose.

```tsx
import { List, ListItem } from '@wallarm-org/design-system/List';

export const Spacing = () => (
  <div className='flex gap-48'>
    <div>
      <List spacing={0}>
        <ListItem>Item A</ListItem>
        <ListItem>Item B</ListItem>
        <ListItem>Item C</ListItem>
      </List>
    </div>
    <div>
      <List spacing={8}>
        <ListItem>Item A</ListItem>
        <ListItem>Item B</ListItem>
        <ListItem>Item C</ListItem>
      </List>
    </div>
    <div>
      <List spacing={16}>
        <ListItem>Item A</ListItem>
        <ListItem>Item B</ListItem>
        <ListItem>Item C</ListItem>
      </List>
    </div>
  </div>
);
```

## Props

| Prop           | Type                                                 | Default     | Description |
| -------------- | ---------------------------------------------------- | ----------- | ----------- |
| variant        | `ListVariant \| undefined`                           | `unordered` |             |
| spacing        | `ListSpacing \| undefined`                           |             |             |
| marker         | `ListMarker \| undefined`                            |             |             |
| defaultChecked | `boolean \| undefined`                               |             |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |             |             |
| autoFocus      | `boolean \| undefined`                               |             |             |
| id             | `string \| undefined`                                |             |             |
| tabIndex       | `number \| undefined`                                |             |             |
| title          | `string \| undefined`                                |             |             |
| rel            | `string \| undefined`                                |             |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |             |             |
| data-testid    | `string \| undefined`                                |             |             |

### ListIcon

| Prop           | Type                                                 | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | ----------- |
| defaultChecked | `boolean \| undefined`                               |         |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |             |
| autoFocus      | `boolean \| undefined`                               |         |             |
| id             | `string \| undefined`                                |         |             |
| tabIndex       | `number \| undefined`                                |         |             |
| title          | `string \| undefined`                                |         |             |
| rel            | `string \| undefined`                                |         |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |             |

### ListItem

| Prop           | Type                                                 | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | ----------- |
| defaultChecked | `boolean \| undefined`                               |         |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |             |
| autoFocus      | `boolean \| undefined`                               |         |             |
| id             | `string \| undefined`                                |         |             |
| tabIndex       | `number \| undefined`                                |         |             |
| title          | `string \| undefined`                                |         |             |
| rel            | `string \| undefined`                                |         |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |             |

## Explorer