5

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>

1 Answers1

3

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;
}
Oro
  • 2,250
  • 1
  • 6
  • 22
  • .ant-form-item-label > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before{ content:none; } – Cll Feb 12 '22 at 15:40