Form.Field required label

[evserykh]

I'm doing the following:

...
<Form loading={loading} onSubmit={submit}>
  <Form.Field error={!!emailError} required>
    <label>Email</label>
    <Input type="email" name="user[email]" />
    {!!emailError && <Label basic color="red" pointing>{emailError}</Label>}
  </Form.Field>
  <Form.Button>Sign In</Form.Button>
<Form />
...

All works fine but I have the warning:

Warning: Failed prop type: `required` prop in `FormField` requires props: `label`.

I've tried to use it something like this:

...
<Form loading={loading} onSubmit={submit}>
  <Form.Field error={!!emailError} label="Email" required>
    <Input type="email" name="user[email]" />
    {!!emailError && <Label basic color="red" pointing>{emailError}</Label>}
  </Form.Field>
  <Form.Button>Sign In</Form.Button>
<Form />
...

but now I don't see the input.

The file /src/collections/Form/FormField.js has code:

...
59  if (_.isNil(control)) {
60    if (_.isNil(label)) return <ElementType {...rest} className={classes}>{children}</ElementType>
61
62   return <ElementType {...rest} className={classes}>{createHTMLLabel(label)}</ElementType>
63  }
...

That's why I don't see the input?
How can I get required field with label and input without the warning?

UPDATED
I can reach goal using:

...
<Form loading={loading} onSubmit={submit}>
  <Form.Field error={!!emailError} className="required">
    <label>Email</label>
    <Input type="email" name="user[email]" required />
    {!!emailError && <Label basic color="red" pointing>{emailError}</Label>}
  </Form.Field>
  <Form.Button>Sign In</Form.Button>
<Form />
...

but it leads me to the question:
What are the cases for using <Form.Field label="Some label">...</Form.Field> if it doesn't use its children?

[levithomason]

Thanks for the report. The prop warning is wrong.

Shorthand props such as label are disallowed with children. You must either define children only or use shorthand props only and allow the component to define the children for you. This is why the children are not rendered when you add a label prop.

The required prop adds a red asterisk to the label and therefore needs a label to be present to work. The prop warning is not accounting for the fact that a user may have passed the label as a child rather than using the label prop.

The work around is to use it anyway ignore the prop warning. There is no consequence beyond the warning log. Your code is valid and we will continue to support this markup.

The use case the current propType warning is expecting is:

<Form.Input label="Email" type="email" name="user[email]" required />

The fix is to relax the label propType validator to allow use without a label prop.

[lazy-ninja]

Can I work on it?

[layershifter]

@nirajk42 Yes, it will be awesome.

[rajchourasia]

@nirajk42 @layershifter
Taking the liberty of providing the small fix. I hope its cool.