> For AI agents: the complete documentation index is at [llms.txt](https://reflex.dev/docs/llms.txt). Markdown versions are available by appending `.md` or sending `Accept: text/markdown`.

---
components:
  - rx.data_list.root
  - rx.data_list.item
  - rx.data_list.label
  - rx.data_list.value
DataListRoot: |
  lambda **props: rx.data_list.root(
      rx.foreach(
          [["Status", "Authorized"], ["ID", "U-474747"], ["Name", "Developer Success"], ["Email", "foo@reflex.dev"]],
          lambda item: rx.data_list.item(rx.data_list.label(item[0]), rx.data_list.value(item[1])),
      ),
      **props,
  )
DataListItem: |
  lambda **props: rx.data_list.root(
      rx.data_list.item(
          rx.data_list.label("Status"),
          rx.data_list.value(rx.badge("Authorized", variant="soft", radius="full", size="2")),
          **props,
      ),
      rx.data_list.item(
          rx.data_list.label("Name"),
          rx.data_list.value(rx.heading("Developer Success", size="4")),
          **props,
      ),
      rx.data_list.item(
          rx.data_list.label("Email"),
          rx.data_list.value(rx.link("foo@reflex.dev", href="mailto:foo@reflex.dev")),
          **props,
      ),
  )
DataListLabel: |
  lambda **props: rx.data_list.root(
      rx.foreach(
          [["Status", "Authorized"], ["ID", "U-474747"], ["Name", "Developer Success"], ["Email", "foo@reflex.dev"]],
          lambda item: rx.data_list.item(rx.data_list.label(item[0], **props), rx.data_list.value(item[1])),
      ),
  )
DataListValue: |
  lambda **props: rx.data_list.root(
      rx.foreach(
          [["Status", "Authorized"], ["ID", "U-474747"], ["Name", "Developer Success"], ["Email", "foo@reflex.dev"]],
          lambda item: rx.data_list.item(rx.data_list.label(item[0]), rx.data_list.value(item[1], **props)),
      ),
  )
---

```python exec
import reflex as rx
```

# Data List

The `DataList` component displays key-value pairs and is particularly helpful for showing metadata.

A `DataList` needs to be initialized using `rx.data_list.root()` and currently takes in data list items: `rx.data_list.item`

```python demo
(
    rx.card(
        rx.data_list.root(
            rx.data_list.item(
                rx.data_list.label("Status"),
                rx.data_list.value(
                    rx.badge(
                        "Authorized",
                        variant="soft",
                        radius="full",
                    )
                ),
                align="center",
            ),
            rx.data_list.item(
                rx.data_list.label("ID"),
                rx.data_list.value(rx.code("U-474747")),
            ),
            rx.data_list.item(
                rx.data_list.label("Name"),
                rx.data_list.value("Developer Success"),
                align="center",
            ),
            rx.data_list.item(
                rx.data_list.label("Email"),
                rx.data_list.value(
                    rx.link(
                        "success@reflex.dev",
                        href="mailto:success@reflex.dev",
                    ),
                ),
            ),
            rx.data_list.item(
                rx.data_list.label("Company"),
                rx.data_list.value(
                    rx.link(
                        "Reflex",
                        href="https://reflex.dev",
                    ),
                ),
            ),
        ),
    ),
)
```

## API Reference

### rx.data_list.root

Root element for a DataList component.

#### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `orientation` | Literal["horizontal", "vertical"], Breakpoints[str, Literal["horizontal", "vertical"]] | - | The orientation of the data list item: "horizontal", "vertical". |
| `size` | Literal["1", "2", "3"], Breakpoints[str, Literal["1", "2", "3"]] | - | The size of the data list item: "1", "2", "3". |
| `trim` | Literal["normal", "start", "end", "both"], Breakpoints[str, Literal["normal", "start", "end", "both"]] | - | Trims the leading whitespace from the start or end of the text. |

#### Event Triggers

Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/

### rx.data_list.item

An item in the DataList component.

#### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `align` | Literal["start", "center", "end", "baseline", "stretch"], Breakpoints[str, Literal["start", "center", "end", "baseline", "stretch"]] | - | The alignment of the data list item within its container. |

#### Event Triggers

Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/

### rx.data_list.label

A label in the DataList component.

#### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `width` | str, Breakpoints[str, str] | - | The width of the component. |
| `min_width` | str, Breakpoints[str, str] | - | The minimum width of the component. |
| `max_width` | str, Breakpoints[str, str] | - | The maximum width of the component. |
| `color_scheme` | Literal["tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "brown", "orange", "sky", "mint", "lime", "yellow", "amber", "gold", "bronze", "gray"] | - | The color scheme for the DataList component. |

#### Event Triggers

Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/

### rx.data_list.value

A value in the DataList component.

#### Event Triggers

Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/