# ListItem (/docs/products/dash-dots/reference/components/list-item)

Anything you put inside it, such as a `Badge`, shows at the end in place of `value`.

**Children:** Components

## Example

![The ListItem component](/assets/images/dash-dots/components/list-item.webp)

```xml title="view.dml"
<List>
  <ListItem icon="receipt" title="Electricity" subtitle="Meter 0412 3456 789" onTap="open" data-id="electricity">
    <Badge tone="warning">Due</Badge>
  </ListItem>
</List>
```

```ts title="controller.ts"
export default definePage({
  initialState: {},
  actions: {
    open(_state, event: DataEvent<{ id: string }>) {
      this.navigation.push('bill', { id: event.data.id });
    },
  },
});
```

## Props

| Prop                                                                   | Type                                                                                                                                                          | What it is                                                                                                |
| ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| `title`                                                                | `string`                                                                                                                                                      |                                                                                                           |
| `subtitle`                                                             | `string`                                                                                                                                                      |                                                                                                           |
| `value`                                                                | `string`                                                                                                                                                      |                                                                                                           |
| `icon`                                                                 | [icon name](/docs/products/dash-dots/reference/components#icon-names), or one of [your own icons](/docs/products/dash-dots/developers/theming#your-own-icons) |                                                                                                           |
| `image`                                                                | `string`                                                                                                                                                      | A picture at the start of the row, in place of `icon`. It takes the same addresses as an `Image`'s `src`. |
| `disabled`                                                             | `boolean`                                                                                                                                                     | Dims it, and the person can't use it. Default: `false`.                                                   |
| `padding`, `paddingTop`, `paddingStart`, `paddingEnd`, `paddingBottom` | [spacing](/docs/products/dash-dots/reference/components#spacing)                                                                                              | Space inside its edges, all round or on one side.                                                         |

## Events

| Event   | Sends   | Notes                            |
| ------- | ------- | -------------------------------- |
| `onTap` | Nothing | A tappable item shows a chevron. |