PF4 Forms (horizontal) alignment of label to checkbox

[jgiardino]

When creating a form that includes a label for a group of checkboxes, the label text and the checkbox text are not aligned. Also, an example of this layout would be nice to see so that we know that we're using the component correctly.

[jkozol]

This is an example of a form that has the misalignment:

<Form isHorizontal>
  <FormGroup label="Your Name" fieldId="horizontal-form-name">
    <Text>John Smith</Text>
  </FormGroup>
  <FormGroup label="Your experience" fieldId="horizontal-form-exp">
    <Checkbox label="Follow up via email" id="alt-form-checkbox-1" name="alt-form-checkbox-1" />
  </FormGroup>
</Form>

[rachael-phillips]

Hi @jgiardino and @jkozol is this issue currently blocking you?

[rachael-phillips]

@mcoker and @jschuler is this a core issue?

[jschuler]

@mcoker would you have an example of how a simple label / value form group should look?

[mcoker]

@jschuler @jessiehuff you can see an example of checkboxes in a horizontal form here - https://www.patternfly.org/v4/documentation/core/demos/basicforms

[jgiardino]

@mcoker That example actually does not have a label included. When I highlight the .pf-c-form__horizontal-group element, I see the grid for that group does not include a label.

If I paste a <label> into the pf-c-form-group element, then I see the following alignment between the label and the checkbox label:

But related to this pattern, there are a couple of other requirements that would be nice to support:

• Ability to have more than one checkbox per text label on the left
• Ability to have more semantic markup, so that the group of checkboxes can be wrapped with a fieldset, with the fieldset labelled by the label on the left.

An issue related to these two requirements already exists in core: patternfly/patternfly#953

[jgiardino]

Hi @jgiardino and @jkozol is this issue currently blocking you?

I don't know that I would consider this blocking us. We can either add custom css as a temporary fix or leave the alignment as is until it is addressed.

[mcoker]

@jgiardino ah sorry about that, I didn't see that the Checkbox component contained a label in the code above - I thought we were just adding a label for the checkbox, not a label for the checkbox + label pair.

@rachael-phillips yes this is a core issue. It's an issue with label alignment when there is anything except for a form control element on the right side of the grid. I filed an issue here for the alignment - patternfly/patternfly#2167

[rachael-phillips]

@jkozol do you mind if I close this issue in favor of patternfly/patternfly#2167?

[jkozol]

@rachael-phillips I am fine with you closing this in favor of patternfly/patternfly#2167

[rachael-phillips]

Thanks!