# @wines/checkbox-group

> The checkbox-group @wines

Latest version **2.0.0** (published 2025-04-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @wines/checkbox-group
pnpm add @wines/checkbox-group
yarn add @wines/checkbox-group
bun add @wines/checkbox-group
```

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2025-04-01 |
| First published | 2021-04-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Node | >=16.0.0 |
| Dependencies | 3 |
| Unpacked size | 29.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | tianyingchun |

## Links

- npm: https://www.npmjs.com/package/@wines/checkbox-group
- Repository: https://gitlab.itcjf.com/wines/checkbox-group
- npm.io page: https://npm.io/package/@wines/checkbox-group

## Dependencies (3)

- [@wines/core](https://npm.io/package/@wines/core.md) 2.0.0
- [@wines/checkbox](https://npm.io/package/@wines/checkbox.md) 2.0.0
- [@wines/cell-group](https://npm.io/package/@wines/cell-group.md) 2.0.0

## Recent versions

- 2.0.0 (latest) — 2025-04-01
- 2.0.0-next.7 (next) — 2025-04-01
- 2.0.0-next.6 — 2025-03-06
- 2.0.0-next.5 — 2025-03-05
- 2.0.0-next.4 — 2025-03-05
- 2.0.0-next.3 — 2025-03-04
- 2.0.0-next.2 — 2025-02-28
- 2.0.0-next.1 — 2025-02-27
- 2.0.0-next.0 — 2025-02-27
- 1.5.1 — 2023-03-07
- 1.5.0 — 2022-11-22
- 1.4.0 — 2022-02-23
- 1.3.5 — 2021-12-03
- 1.3.2 — 2021-09-24
- 1.3.1 — 2021-04-25
- … 1 more at https://npm.io/package/@wines/checkbox-group/versions

## README

# `@wines/checkbox-group`

# Checkbox 复选框

用于展现一组可选项多项选择，或者单独用于标记切换某种状态，预设 9 种颜色 `light`, `stable`, `positive`, `calm`, `assertive`, `balanced`, `energized`, `royal`, `dark` 可选用。

## 使用指南

### 在 page.json 中引入组件

```json
{
  "navigationBarTitleText": "Checkbox",
  "usingComponents": {
    "wux-checkbox": "@wines/checkbox",
    "wux-checkbox-group": "@wines/checkbox-group"
  }
}
```

### 示例

```xml
<view class="page">
	<view class="page__hd">
		<view class="page__title">Checkbox</view>
		<view class="page__desc">复选框</view>
	</view>
	<view class="page__bd">
		<form bindsubmit="formSubmit">
			<wux-checkbox-group
			 name="a"
			 value="{{ value1 }}"
			 title="Default"
			 bind:change="onChange1"
			>
				<wux-checkbox color="light" title="Light" value="1" />
				<wux-checkbox color="stable" title="Stable" value="2" />
				<wux-checkbox color="positive" title="Positive" value="3" />
				<wux-checkbox color="calm" title="Calm" value="4" />
				<wux-checkbox color="balanced" title="Balanced" value="5" />
				<wux-checkbox color="energized" title="Energized" value="6" />
				<wux-checkbox color="assertive" title="Assertive" value="7" />
				<wux-checkbox color="royal" title="Royal" value="8" />
				<wux-checkbox color="dark" title="Dark" value="9" />
			</wux-checkbox-group>
			<wux-checkbox-group
			 name="b"
			 value="{{ value2 }}"
			 title="Label"
			 bind:change="onChange2"
			>
				<wux-checkbox title="Java" label="details" value="1" />
				<wux-checkbox title="PHP" label="details" value="2" />
			</wux-checkbox-group>
			<wux-checkbox-group
			 name="c"
			 value="{{ value3 }}"
			 title="Extra"
			 bind:change="onChange3"
			>
				<wux-checkbox title="Java" extra="extra" value="1" />
				<wux-checkbox title="PHP" extra="extra" value="2" />
			</wux-checkbox-group>
			<wux-checkbox-group
			 name="d"
			 value="{{ value4 }}"
			 title="Trigger onChange"
			 bind:change="onChange4"
			>
				<wux-checkbox title="Java" value="1" />
				<wux-checkbox title="PHP" value="2" />
			</wux-checkbox-group>
			<wux-checkbox-group name="e" value="{{ ['1'] }}" title="Disabled">
				<wux-checkbox title="AV" value="1" disabled />
				<wux-checkbox title="PHP" value="2" disabled />
			</wux-checkbox-group>
			<wux-checkbox-group
			 name="f"
			 value="{{ value5 }}"
			 options="{{ options }}"
			 title="Options"
			 bind:change="onChange5"
			/>
			<view class="btn-area">
				<button formType="submit">Submit</button>
			</view>
		</form>
	</view>
</view>

```

```ts
import './index.less';
import { CheckboxGroupOnChangeValue } from '@wines/checkbox-group';

Page({
  data: {
    value1: ['1'],
    value2: ['1'],
    value3: ['1'],
    value4: ['1'],
    value5: ['1'],
    options: [
      { title: 'Java', value: '1' },
      { title: 'PHP', value: '2' },
    ],
    // options: ['1', '2'],
  },
  onChange(field, e) {
    const detail = e.detail as CheckboxGroupOnChangeValue;
    console.log('onchange:', detail);
    const { value } = detail;
    this.setData({
      [field]: value,
    });

    console.log('checkbox发生change事件，携带value值为：', e.detail.value);
  },
  onChange1(e) {
    this.onChange('value1', e);
  },
  onChange2(e) {
    this.onChange('value2', e);
  },
  onChange3(e) {
    this.onChange('value3', e);
  },
  onChange4(e) {
    this.onChange('value4', e);
  },
  onChange5(e) {
    this.onChange('value5', e);
  },
  formSubmit(e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value);
  },
});
```

## API

### CheckboxGroup props

| 参数               | 类型       | 描述                                  | 默认值             |
| ------------------ | ---------- | ------------------------------------- | ------------------ |
| prefixCls          | `string`   | 自定义类名前缀                        | wux-checkbox-group |
| cellGroupPrefixCls | `string`   | 自定义 cellGroup 类名前缀             | wux-cell-group     |
| name               | `string`   | 在表单中的字段名                      | -                  |
| value              | `array`    | 在表单中的字段值（当前选中项的值）    | []                 |
| title              | `string`   | 标题                                  | -                  |
| label              | `string`   | 描述                                  | -                  |
| options            | `array`    | 以配置形式设置子元素，优先级高于 slot | []                 |
| bind:change        | `function` | change 事件触发的回调函数             | -                  |

### Checkbox props

| 参数                | 类型       | 描述                                                                                        | 默认值         |
| ------------------- | ---------- | ------------------------------------------------------------------------------------------- | -------------- |
| prefixCls           | `string`   | 自定义类名前缀                                                                              | wux-checkbox   |
| cellPrefixCls       | `string`   | 自定义 cell 类名前缀                                                                        | wux-cell       |
| selectablePrefixCls | `string`   | 自定义 selectable 类名前缀                                                                  | wux-selectable |
| title               | `string`   | 左侧标题                                                                                    | -              |
| label               | `string`   | 标题下方的描述信息                                                                          | -              |
| extra               | `string`   | 右侧内容                                                                                    | -              |
| value               | `string`   | 当前项的值                                                                                  | -              |
| checked             | `boolean`  | 是否默认选中                                                                                | false          |
| disabled            | `boolean`  | 是否不可修改                                                                                | false          |
| color               | `string`   | 主题色，可选值为 light、stable、positive、calm、assertive、balanced、energized、royal、dark | balanced       |
| bind:change         | `function` | change 事件触发的回调函数，优先级低于父级 change 事件                                       | -              |

---
_Source: https://npm.io/package/@wines/checkbox-group · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._