/**
 * title: "带描述的多选框"
 * description: "使用 `<Checkbox.Group>` 渲染 `<Checkbox>` 分组,定制Checkbox的children添加描述"
 */
import React, { useState } from 'react';
import { Checkbox } from '@alicloud/console-components';
var List = [
    {
        label: '文本信息',
        value: 'A',
    },
    {
        label: '文本信息',
        value: 'B',
    },
    {
        label: '文本信息',
        value: 'C',
        disabled: true,
    },
];
var itemStyle = {
    marginLeft: '24px',
    color: '#808080',
    display: 'inline-block',
    lineHeight: '16px',
};
export default (function () {
    var _a = useState([]), checkedList = _a[0], setCheckedList = _a[1];
    return (React.createElement(Checkbox.Group, { value: checkedList, direction: "ver", onChange: setCheckedList }, List.map(function (item) { return (React.createElement(Checkbox, { value: item.value, disabled: item.disabled },
        item.label,
        React.createElement("br", null),
        React.createElement("span", { style: itemStyle }, "\u5BF9\u4E8E\u9009\u9879\u7684\u63CF\u8FF0/\u89E3\u91CA\u6587\u6848\uFF0C\u5BF9\u4E8E\u9009\u9879\u7684\u63CF\u8FF0/\u89E3\u91CA\u6587\u6848"))); })));
});
