# 可勾选列表 CheckList

- 页面: https://jiguang132.com/zh/resources/ant-design-mobile/docs/check-list
- 资源: Ant Design Mobile (https://jiguang132.com/zh/resources/ant-design-mobile.md)
- 全部指南: https://jiguang132.com/zh/resources/ant-design-mobile/docs.md

列表的勾选操作。

## 安装

```bash
npm install antd-mobile@5.43.0
```

antd-mobile 是移动网页组件库，不是 React Native 或小程序组件。React 19 项目需在入口用 `unstableSetRender` 注册 `createRoot`，否则 Toast、Dialog 等命令式 API 无法渲染；深色模式通过 `<html data-prefers-color-scheme="dark">` 切换。

示例来自 Ant Design Mobile 官方仓库（MIT），固定在 npm 5.43.0 对应的提交；示例中的 `DemoBlock` 等展示辅助组件由 JGuang 重写，不属于 antd-mobile 的 API。

列表的勾选操作。

## 何时使用

在一组列表项中选择一个或多个。

`CheckList` 底层是基于 `List` 实现的，是可以进行勾选的列表。

## 示例

## CheckList

### 属性

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| activeIcon | 选中图标 | `ReactNode` | `<CheckOutline />` |
| extra | 列表右侧区域 | `(active: boolean) => ReactNode` | - |
| defaultValue | 默认项 | `string[]` | `[]` |
| disabled | 是否禁用 | `boolean` | `false` |
| multiple | 是否允许多选 | `boolean` | `false` |
| onChange | 选项改变时触发 | `(value: string[]) => void` | - |
| readOnly | 是否只读 | `boolean` | `false` |
| value | 选中项 | `string[]` | `[]` |

此外，还支持 [List](/zh/components/list) 的 `mode` 属性

### CSS 变量

同 [List](/zh/components/list/#list-2)

## CheckList.Item

### 属性

| 属性     | 说明     | 类型      | 默认值  |
| -------- | -------- | --------- | ------- |
| disabled | 是否禁用 | `boolean` | `false` |
| readOnly | 是否只读 | `boolean` | `false` |
| value    | 选项值   | `string`  | -       |

此外，还支持 [List.Item](/zh/components/list) 的以下属性：`title` `children` `description` `prefix` `onClick`

### CSS 变量

同 [List.Item](/zh/components/list/#listitem-1)

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt