/**
 * title: "带描述的单选框"
 * description: "在Radio中添加描述文案。"
 */
import React, { useState } from 'react';
import { Radio } from '@alicloud/console-components';

const List = [
  {
    label: '输入文字',
    value: 'A',
  },
  {
    label: '输入文字',
    value: 'B',
  },
  {
    label: '输入文字',
    value: 'C',
  },
];

export default () => {
  const [checkedList, setCheckedList] = useState<string | number>('');

  return (
    <div>
      <h5>单选合集标题</h5>
      <Radio.Group
        value={checkedList}
        itemDirection="ver"
        onChange={(value) => setCheckedList(`${value}`)}
      >
        {List.map((item) => (
          <Radio value={item.value} style={{ height: '40px' }}>
            {item.label}
            <p
              style={{
                margin: '0 0 0 24px',
                color: '#808080',
              }}
            >
              对于选项的描述/解释文案，对于选项的描述/解释文案
            </p>
          </Radio>
        ))}
      </Radio.Group>
    </div>
  );
};