CheckList
Checklist operation.
Install
npm install antd-mobile@5.43.0
antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register createRoot with unstableSetRender at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with <html data-prefers-color-scheme="dark">.
Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as DemoBlock are JGuang rewrites, not antd-mobile APIs.
Checklist operation.
When to Use
Select one or more of a set of list items.
The bottom layer of CheckList is implemented based on List, which is a list that can be checked.
Demos
CheckList
Props
| Name | Description | Type | Default |
|---|---|---|---|
| activeIcon | The icon displayed when selected | ReactNode | <CheckOutline /> |
| extra | The right area of the list item | (active: boolean) => ReactNode | - |
| defaultValue | The default items | string[] | [] |
| disabled | Is the check list disabled | boolean | false |
| multiple | Whether to allow multiple selection or not | boolean | false |
| onChange | Triggered when the option changes | (value: string[]) => void | - |
| readOnly | Is the check list item readonly | boolean | false |
| value | The selected items | string[] | [] |
In addition, the mode attribute of List is also supported
CSS Variables
The same as List
CheckList.Item
Props
| Name | Description | Type | Default |
|---|---|---|---|
| disabled | Is the check list item disabled | boolean | false |
| readOnly | Is the check list item readonly | boolean | false |
| value | The option value | string | - |
In addition, the following attributes of List.Item are also supported: title children description prefix onClick
CSS Variables
The same as List.Item