## Usage

The `<List />` component is used to display a collection of items in either an unordered (`<ul>`) or ordered (`<ol>`) format. It supports custom rendering for each list item and flexible styling options.

```tsx live
<Box padding="small">
  <List type="ul">
    <ListItem>Item 1</ListItem>
    <ListItem>Item 2</ListItem>
    <ListItem>Item 3</ListItem>
  </List>
</Box>
```

## List Styling

The `listStyle` prop allows you to choose between different list styles:

- `none`: Removes default list styling.
- `initial`: Uses the default styling for the list type.

```tsx live
<Flex flexDirection="column" gap="small" padding="small">
  <List type="ul" listStyle="none">
    <ListItem>Item without bullets</ListItem>
    <ListItem>Another item without bullets</ListItem>
  </List>
  <List type="ul" listStyle="initial">
    <ListItem>Item with circle bullets</ListItem>
    <ListItem>Another item with circle bullets</ListItem>
  </List>
</Flex>
```

## Gap Between Items

The `gap` prop controls the space between list items. You can specify the gap size using EDS's spacing tokens `small`, `medium`, `large`, etc. See [props](/packages/list/props) for a full list.

```tsx live
<Flex flexDirection="column" gap="xlarge" padding="small">
  <List type="ul" gap="small">
    <ListItem>Item with small gap</ListItem>
    <ListItem>Another item with small gap</ListItem>
  </List>
  <List type="ul" gap="large">
    <ListItem>Item with large gap</ListItem>
    <ListItem>Another item with large gap</ListItem>
  </List>
</Flex>
```

## Advanced example

The following example shows how to utilise `<List/>` to create more complex UI patterns.

**Note**: Using the ‘none’ value with the ‘listStyle’ prop will allow you to compose advanced list items.

```tsx live
const data = [
  { id: 1, label: 'Todo Item 1' },
  { id: 2, label: 'Todo Item 1' },
];

return (
  <List type="ul" listStyle="none">
    {data.map((item, index) => (
      <>
        {!!index && <Divider vertical={false} />}
        <ListItem tabIndex={1} padding="small" key={item.id}>
          <RailTrack alignItems="center" railLeft={<ClockIcon />} railRight={<ChevronRightIcon />}>
            <Text paddingLeft="small">{item.label}</Text>
          </RailTrack>
        </ListItem>
      </>
    ))}
  </List>
);
```

A component for displaying lists with optional styling and custom rendering.

List

Accessibility

Responsive layouts

Tokens

Foundations

a11y

Accordion

Actions

AddressInput

AppLayout

Avatar

Badge

Blanket

Breadcrumbs

BulkActionBar

Button

Card

Checkbox

Core

DateDropdown

DateInput

Divider

EmptyState

Field

Fieldset

FileInput

Filtering

Flex

Grid

Heading

Icon

Illustration

Link

Loading

Modal

Notice

PageHeader

Pagination

PhoneInput

Popover

Radio

RailTrack

RichTextEditor

ScrollWrap

SearchInput

SelectDropdown

SelectInput

ShowMore

Table

Tabs

Text

TextAreaInput

TextInput

Toast

Toggle

Tooltip

Utils

Utils - NextJS

Components

Forms

Search

Tables

Patterns

Introduction

Product tone and voice

Capitalisation

Date and time

Inclusive design

Content

Welcome to EDS

Start designing

Start developing

Contributing

Releases

The EDS way

Coding style guide

Guide to Pendo

Setting up the EDS repo

Creating a new component

Automated testing

PR and changeset process

Publishing snapshots

Publishing packages

Monorepo tools

Team resources