> For the complete documentation index, see [llms.txt](https://docs.wirebootstrap.com/bootstrap/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/bootstrap/checkboxes/data-binding.md).

# Data Binding

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

## Properties

| Name    | Description                                                                                   |
| ------- | --------------------------------------------------------------------------------------------- |
| id      | The field in the data to be used as the unique id for checkboxes                              |
| label   | The field in the data to be used as the display label for checkboxes                          |
| checked | Optional.  The field in the data to determine whether an option should be checked by default. |

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

const checkboxes = new wire.bsCheckboxes().render("#checkboxes", {
    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 checkboxes = new wire.bsCheckboxes().render("#checkboxes", {
    data: users,
    datamap: { id: "user", label: "name" }
});
```