---
name: "checkbox-group"
mode: "component"
versionRequirements:
  - { name: "Base Library", version: "2.10.0" }
title: "checkbox-group - Multi-select picker group"
---

## checkbox-group

> [VERSION] Base Library >= 2.10.0

### Description

Multiple-choice group composed of multiple checkbox components.

### Props

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `name` | `string` | No | - | Field name in the form |

#### Events

| Event | Type | Description |
| --- | --- | --- |
| `change` | `(event: CheckboxGroupChangeEvent) => void` | Triggered when the selected item changes |

**CheckboxGroupChangeEvent**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"change"` | Event type |
| `detail` | `CheckboxGroupChangeDetail` | Event data |

### Examples

#### Basic usage

*index.tyml*

```xml
<checkbox-group bind:change="onChange">
  <label ty:for="{{items}}" ty:key="{{item.value}}" class="item">
    <checkbox value="{{item.value}}" checked="{{item.checked}}" />
    <text>{{item.name}}</text>
  </label>
</checkbox-group>
<text class="result">Selected:{{selected.join(', ')}}</text>
```

*index.tyss*

```css
.item {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}
.result {
  margin-top: 20rpx;
}
```

*index.js*

```javascript
Page({
  data: {
    items: [
      { value: 'apple', name: 'Apple', checked: false },
      { value: 'banana', name: 'Banana', checked: false },
      { value: 'grape', name: 'Grape', checked: false },
    ],
    selected: [],
  },
  onChange(e) {
    this.setData({ selected: e.detail.value });
  },
});
```