# @wines/selectable

> The selectable @wines

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

## Install

```sh
npm install @wines/selectable
pnpm add @wines/selectable
yarn add @wines/selectable
bun add @wines/selectable
```

## 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 | 2 |
| Unpacked size | 21.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | tianyingchun |

## Links

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

## Dependencies (2)

- [@wines/core](https://npm.io/package/@wines/core.md) 2.0.0
- [@wines/styles](https://npm.io/package/@wines/styles.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/selectable/versions

## README

# `@wines/selectable`

# Selectable 选框组

选框组。

## 使用指南

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

```json
{
  "navigationBarTitleText": "wux-selectable",
  "usingComponents": {
    "wux-selectable": "@wines/selectable"
  }
}
```

### 示例

```xml
<view class="page">
	<view class="page__hd">
		<view class="page__title">Selectable</view>
		<view class="page__desc">选框组</view>
	</view>
	<view class="page__bd">
		<view class="sub-title">Checkbox & Radio</view>
		<wux-selectable color="light" value="1" defaultChecked />
		<wux-selectable color="stable" value="2" defaultChecked />
		<wux-selectable color="positive" value="3" defaultChecked />
		<wux-selectable color="calm" value="4" />
		<wux-selectable color="balanced" value="5" />
		<wux-selectable color="energized" value="6" />
		<wux-selectable color="assertive" value="7" disabled />
		<wux-selectable color="royal" value="8" disabled />
		<wux-selectable color="dark" value="9" disabled />
		<wux-selectable
		 type="radio"
		 color="light"
		 value="1"
		 defaultChecked
		/>
		<wux-selectable
		 type="radio"
		 color="stable"
		 value="2"
		 defaultChecked
		/>
		<wux-selectable
		 type="radio"
		 color="positive"
		 value="3"
		 defaultChecked
		/>
		<wux-selectable
		 type="radio"
		 color="calm"
		 value="4"
		 defaultChecked
		/>
		<wux-selectable
		 type="radio"
		 color="balanced"
		 value="5"
		 defaultChecked
		/>
		<wux-selectable
		 type="radio"
		 color="energized"
		 value="6"
		 defaultChecked
		/>
		<wux-selectable
		 type="radio"
		 color="assertive"
		 value="7"
		 disabled
		 defaultChecked
		/>
		<wux-selectable
		 type="radio"
		 color="royal"
		 value="8"
		 disabled
		 defaultChecked
		/>
		<wux-selectable
		 type="radio"
		 color="dark"
		 value="9"
		 disabled
		 defaultChecked
		/>
		<view class="sub-title">Controlled</view>
		<wux-selectable
		 color="light"
		 value="1"
		 checked="{{ checked }}"
		 bind:change="onCheckboxChange"
		/>
		<view class="sub-title">Slot</view>
		<wux-selectable color="light" value="1" type="default">
			<view class="icon-on" slot="icon-on" />
			<view class="icon-off" slot="icon-off" />
		</wux-selectable>
		<view class="sub-title">With cellGroup</view>
		<wux-cell-group>
			<block wx:for="{{ items }}" wx:key="index">
				<wux-cell title="{{ item.label }}">
					<wux-selectable slot="header" wux-class="checkbox" value="{{ item.value }}" />
				</wux-cell>
			</block>
		</wux-cell-group>
		<view class="sub-title">With cellGroup</view>
		<wux-cell-group>
			<block wx:for="{{ items }}" wx:key="index">
				<wux-cell title="{{ item.label }}">
					<wux-selectable
					 slot="footer"
					 wux-class="checkbox"
					 type="radio"
					 value="{{ item.value }}"
					 checked="{{ value === item.value }}"
					 controlled
					 bind:change="onChange"
					/>
				</wux-cell>
			</block>
		</wux-cell-group>
		<view class="sub-title">Other</view>
		<wux-selectable color="light" value="1">Agree agreement</wux-selectable>
	</view>
</view>

```

```ts
import { SelectableOnChangeValue } from '@wines/selectable';
import './index.less';

Page({
  data: {
    items: [
      {
        value: '1',
        label: 'Wux',
      },
      {
        value: '2',
        label: 'Weapp',
      },
    ],
    value: '1',
    checked: false,
  },
  onCheckboxChange(e) {
    console.log(e);
    this.setData({
      checked: e.detail.checked,
    });
  },
  onChange(e) {
    const detail = e.detail as SelectableOnChangeValue;
    console.log(detail);
    this.setData({
      value: detail.value,
    });
  },
});
```

## API

### Selectable props

| 参数           | 类型            | 描述                                                                                        | 默认值         |
| -------------- | --------------- | ------------------------------------------------------------------------------------------- | -------------- |
| prefixCls      | `string`        | 自定义类名前缀                                                                              | wux-selectable |
| type           | `string`        | 类型，可选值为 checkbox、radio、default                                                     | checkbox       |
| value          | `string`        | 字段值                                                                                      | -              |
| defaultChecked | `boolean`       | 默认是否选中，当 `controlled` 为 `false` 时才生效                                           | false          |
| checked        | `boolean`       | 当前是否选中，当 `controlled` 为 `true` 时才生效                                            | false          |
| controlled     | `boolean`       | 是否受控 [说明文档](controlled.md)                                                          | false          |
| disabled       | `boolean`       | 是否禁用                                                                                    | false          |
| color          | `string`        | 主题色，可选值为 light、stable、positive、calm、assertive、balanced、energized、royal、dark | balanced       |
| wrapStyle      | `string,object` | 自定义样式                                                                                  | -              |
| bind:change    | `function`      | change 事件触发的回调函数                                                                   | -              |

### Selectable slot

| 名称     | 描述                              |
| -------- | --------------------------------- |
| -        | 自定义内容 (type=`default`时生效) |
| icon-on  | 自定义已选中的内容                |
| icon-off | 自定义未选中的内容                |

### Selectable externalClasses

| 名称            | 描述         |
| --------------- | ------------ |
| wux-class       | 根节点样式类 |
| wux-input-class | 选择框样式类 |

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