Form.Input, div class="error required field", margin-bottom: 1em.

[ghost]

✔ BUGS (I think)

Steps

<Form.Input ... />
myLabel

Expected Result

<div class="error required field"><div class="ui left icon input">...</div></div>
with margin-bottom: 0px

Actual Result

<div class="error required field"><div class="ui left icon input">...</div></div>
with margin-bottom: 1em

from

.ui.form .field {
    clear: both;
    margin: 0 0 1em;
}

Version

"semantic-ui-react": "^0.75.1",

[ghost]

Or maybe the problem is this:

.ui.pointing.label, .ui[class*="pointing above"].label {
    margin-top: 1em;
}

Why this?

I think this is good instead:

.ui.pointing.label, .ui[class*="pointing above"].label {
    margin-bottom: 1em;
}

[brianespinosa]

Hello, @johnunclesam without completing the required codesandbox example with your report, we can't tell for sure what the problem is that you are experiencing. However, it does look like you are referencing CSS rules, which are out of scope for SUIR. All CSS issues should be reported to the core SUI repository here: https://github.com/Semantic-Org/Semantic-UI

[ghost]

After this Semantic-Org/Semantic-UI#5918 (comment) I ask to reopen this issue because of this below SUIR code that generates wrong html.

<Form className="attached segment" size="large">
  <Form.Input
    type="email"
    name="email"
    icon="at"
    iconPosition="left"
    label="Email"
    error={true}
    required
    value={email}
    onChange={this.onChange}
  />
  <Label color="red" pointing="above">
    myLabel
  </Label>
</Form>

[brianespinosa]

@johnunclesam This issue was closed because it was related to applying inline styles incorrectly and it did not include a codesandbox example which is required for all bug reports. What you are pointing out here is different.

Please open a new issue and complete the entire report including a codesandbox example.