## 简介
复选框常用于信息输入的场景，用户在可见选项中选择一条或多条内容。
## 示例
```tsx
import React from 'react';
import { Checkbox } from '@alicloud/console-components';
export default () => {
return (
文本信息
文本信息
文本信息
文本信息
文本信息
文本信息
);
};
export const meta = {
title: '交互',
describe:
'Checkbox 组件使用，分 label 和无 label 两种情况。defaultChecked 属性默认选中，checked 属性选中，disabled 属性不可操作，defaultIndeterminate 属性设置半选状态。',
};
```
```tsx
import React, { useState } from 'react';
import { Checkbox } from '@alicloud/console-components';
const List = [
{
label: '文本信息',
value: 'A',
},
{
label: '文本信息',
value: 'B',
},
{
label: '文本信息',
value: 'C',
disabled: true,
},
{
label: '文本信息',
value: 'D',
},
];
export default () => {
const [checkedList, setCheckedList] = useState>([]);
return (
);
};
export const meta = {
title: '纵向排列',
describe: '通过direction属性控制选项排列方向。',
};
```
```tsx
import React, { useState } from 'react';
import { Checkbox } from '@alicloud/console-components';
const List = [
{
label: '文本信息',
value: 'A',
},
{
label: '文本信息',
value: 'B',
},
{
label: '文本信息',
value: 'C',
disabled: true,
},
{
label: '文本信息',
value: 'D',
},
];
export default () => {
const [checkedList, setCheckedList] = useState>([]);
return (
);
};
export const meta = {
title: '横向排列',
describe: '通过direction属性控制选项排列方向，默认横向。',
};
```
```tsx
import React, { useState } from 'react';
import { Checkbox } from '@alicloud/console-components';
const List = [
{
label: '文本信息',
value: 'A',
},
{
label: '文本信息',
value: 'B',
},
{
label: '文本信息',
value: 'C',
disabled: true,
},
];
const itemStyle = {
margin: '0 0 0 24px',
color: '#808080',
};
export default () => {
const [checkedList, setCheckedList] = useState>([]);
return (
{List.map((item) => (
{item.label}
对于选项的描述/解释文案，对于选项的描述/解释文案
))}
);
};
export const meta = {
title: '带描述的多选框',
describe:
'使用 `` 渲染 `` 分组,定制Checkbox的children添加描述',
};
```
```tsx
import React, { useState } from 'react';
import { Checkbox } from '@alicloud/console-components';
import styled from 'styled-components';
const List = [
{
label: '文本信息A',
value: 'A',
},
{
label: '文本信息B',
value: 'B',
},
{
label: '文本信息C',
value: 'C',
disabled: true,
},
{
label: '文本信息D',
value: 'D',
},
];
const disableStyle = {
backgroundColor: '#f6f6f6',
};
const checkedStyle = {
backgroundColor: '#eff3f8',
};
export default () => {
const [checkedList, setCheckedList] = useState>([]);
const getStyle = (item) => {
if (item.disabled) {
return disableStyle;
}
if (checkedList.find((i) => i === item.value)) {
return checkedStyle;
}
return {};
};
return (
{List.map((item) => (
{item.label}
对于选项的描述/解释文案，对于选项的描述/解释文案
))}
);
};
export const meta = {
title: '多项选项卡（支持横纵布局）',
describe:
'使用 `` 渲染 `` 分组,定制Checkbox的为卡片样式',
};
const CheckItem = styled.div`
border-radius: 4px;
border: 1px solid #e5e5e5;
padding: 16px 16px 0 16px;
margin: 2px;
width: 230px;
display: inline-block;
&:hover {
background-color: #f7f9fa;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
}
`;
```
## API
### Checkbox
| 参数 | 说明 | 类型 | 默认值 | 是否必填 | 支持版本 |
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | ------ | -------- | -------- |
| className | 自定义类名 | string | - | | - |
| id | checkbox id, 挂载在 input 上 | string | - | | - |
| style | 自定义内联样式 | React.CSSProperties | - | | - |
| checked | 选中状态 | boolean | - | | - |
| value | checkbox 的 value | ValueItem | - | | - |
| name | name | string | - | | - |
| defaultChecked | 默认选中状态 | boolean | false | | - |
| disabled | 禁用 | boolean | - | | - |
| label | 通过属性配置 label， | React.ReactNode | - | | - |
| indeterminate | Checkbox 的中间状态，只会影响到 Checkbox 的样式，并不影响其 checked 属性 | boolean | - | | - |
| defaultIndeterminate | Checkbox 的默认中间态，只会影响到 Checkbox 的样式，并不影响其 checked 属性 | boolean | false | | - |
| onChange | 状态变化时触发的事件 | (checked: boolean, e: React.ChangeEvent\) => void | - | | - |
| onMouseEnter | 鼠标进入 enter 事件 | (e: React.MouseEvent\) => void | - | | - |
| onMouseLeave | 鼠标离开 Leave 事件 | (e: React.MouseEvent\) => void | - | | - |
| isPreview | 是否为预览态 | boolean | false | | 1.19 |
| renderPreview | 预览态模式下渲染的内容
**签名**:
**参数**:
*checked*: 是否选中
*props*: 所有传入的参数
**返回值**:
定制渲染内容 | (checked: boolean, props: CheckboxProps) => React.ReactNode | - | | 1.19 |
### Checkbox.Group
| 参数 | 说明 | 类型 | 默认值 | 是否必填 | 支持版本 |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- | -------- |
| className | 自定义类名 | string | - | | - |
| style | 自定义内联样式 | React.CSSProperties | - | | - |
| disabled | 整体禁用 | boolean | - | | - |
| dataSource | 可选项列表 | Array\ | Array\ | - | | - |
| value | 被选中的值列表 | ValueItem\[] | ValueItem | - | | - |
| defaultValue | 默认被选中的值列表 | ValueItem\[] | ValueItem | - | | - |
| name | name | string | - | | - |
| children | 通过子元素方式设置内部 checkbox | React.ReactNode | - | | - |
| onChange | 选中值改变时的事件 | (value: ValueItem\[], e: React.ChangeEvent\) => void | - | | - |
| direction | 子项目的排列方式 | 'hoz' | 'ver' | - | | - |
| itemDirection | \[废弃] 子项目的排列方式 | 'hoz' | 'ver' | - | | - |
| isPreview | 是否为预览态 | boolean | - | | 1.19 |
| renderPreview | 预览态模式下渲染的内容
**签名**:
**参数**:
*previewed*: 预览值 \[{label: '', value:''},...]
*props*: 所有传入的参数
**返回值**:
定制渲染内容 | (
previewed: {
label: string | React.ReactNode;
value: string | React.ReactNode;
}\[],
props: object
) => React.ReactNode | - | | 1.19 |