> For the complete documentation index, see [llms.txt](https://docs.wirebootstrap.com/pro-pack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wirebootstrap.com/pro-pack/icheck/list/data-binding.md).

# Data Binding

The [datamap](https://docs.wirebootstrap.com/wirebootstrap/working-with-components/configuration/data#datamap) for the iCheck List for WireBootstrap component is listed below.  The component expects these field names in its `data` configuration.

## Properties

| Name     | Description                                                                |
| -------- | -------------------------------------------------------------------------- |
| value    | The field in the data to be used as the unique value for a item            |
| label    | The field in the data to be used as the display label for each item        |
| selected | Optional. The field in the data to determine which item should be selected |

```javascript
const users = [
    { value: "bsimmons", label: "Ben Simmons", selected: true },
    { value: "jembiid", label: "Joel Embiid", selected: false }
]

const list = new wire.icheckList().render("#list", {
    data: users
});
```

## Datamap

Use the `datamap` configuration property to bind a data structure to the component that does not have the same field names.

```javascript
const users = [
    { user: "bsimmons", name: "Ben Simmons" },
    { user: "jembiid", name: "Joel Embiid" },
]

const list = new wire.icheckList().render("#list", {
    data: users,
    datamap: { value: "user", label: "name" }
});
```