Search code examples
antdant-design-pro

Antd, Form, No label but I want to display required red mark


I'm using Ant design on my reactjs project. Without label, the design is better but required red mark is gone. And I want it back if it's possible.

Thank you

<Form
  name="normal_login"
  className="login-form"
  initialValues={{ remember: true }}
  onFinish={onFinish}
>
  <Form.Item
    name="username"
    rules={[{ required: true, message: 'Please input your Username!' }]}
  >
    <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
  </Form.Item>
  <Form.Item
    name="password"
    rules={[{ required: true, message: 'Please input your Password!' }]}
  >
    <Input
      prefix={<LockOutlined className="site-form-item-icon" />}
      type="password"
      placeholder="Password"
    />
  </Form.Item>
  <Form.Item>
    <Form.Item name="remember" valuePropName="checked" noStyle>
      <Checkbox>Remember me</Checkbox>
    </Form.Item>

    <a className="login-form-forgot" href="">
      Forgot password
    </a>
  </Form.Item>

  <Form.Item>
    <Button type="primary" htmlType="submit" className="login-form-button">
      Log in
    </Button>
    Or <a href="">register now!</a>
  </Form.Item>
</Form>

Solution

  • Probably my solution is not good enough. But anyway it works

    <Form.Item
      label={<span></span>}
      name="name"
      rules={[{ required: true, message: "This field is required" }]}
    >
      <Input />
    </Form.Item>
    

    Just hide it from css

    .ant-form-item-required span {
      display: none;
    }
    
    .ant-form-item-required:after {
      display: none;
    }