import React from "react";
import {
  Form,
  Input,
  RadioGroup,
  Radio,
  CheckboxGroup,
  Checkbox,
  InputNumber,
  Card,
  Switch,
  InputAdornment,
} from "@tencent/tea-component";

export default function FormValidationExample() {
  return (
    <div className="example-stage">
      <Card>
        <Card.Body>
          <Form.Title>表单验证</Form.Title>
          <Form>
            <Form.Item label="姓名" status="success">
              <Input placeholder="你是谁" />
            </Form.Item>
            <Form.Item
              label="性别"
              status="error"
              message="未选择"
              extra="请选择性别"
            >
              <RadioGroup>
                <Radio name="male">男</Radio>
                <Radio name="female">女</Radio>
              </RadioGroup>
            </Form.Item>
            <Form.Item label="年龄" status="validating">
              <InputNumber defaultValue={18} min={12} max={100} disabled />
            </Form.Item>
            <Form.Item label="兴趣" message="选择一项或多项爱好">
              <CheckboxGroup>
                <Checkbox name="code">编程</Checkbox>
                <Checkbox name="web">抠图</Checkbox>
                <Checkbox name="jinli">超越</Checkbox>
              </CheckboxGroup>
            </Form.Item>
          </Form>
          <hr />
          <Form.Title>为控件单独使用</Form.Title>
          <Form.Control status="error" message="设置失败">
            <Switch>自动重启</Switch>
          </Form.Control>
          <Form.Control
            status="error"
            message="不能设置超过 200M"
            style={{ marginTop: 20 }}
          >
            <InputAdornment after="Mbps" appearance="pure">
              <InputNumber defaultValue={300} />
            </InputAdornment>
          </Form.Control>
        </Card.Body>
      </Card>
    </div>
  );
}