Non-horizontal form-group using fieldset renders legend font-size different than label

[tmorehouse]

When using a <fieldset> as the root element of a non-horizontal .form-group (i.e. no .form-row or .row), the <legend> element renders differently than a <label> (specifically the font-size being set to 1.5rem via reboot)

<div class="form-group">
  <label for="input">Label</label>
  <input type="text" class="form-control">
</div>

<fieldset class="form-group">
  <legend>Foobar</legend>
  <div role="group">
    <div class="form-check form-check-inline">
      <input id="check1" class="form-check-input" type="checkbox" name="checks" value="A">
      <label for="check1" class="form-check-label">Radio A</label> 
    </div>
    <div class="form-check form-check-inline">
      <input id="check2" class="form-check-input" type="checkbox" name="checks" value="B">
      <label for="check2" class="form-check-label">Radio B</label> 
    </div>
  </div>
</fieldset>

Renders:

Manually adding a style font-size: inherit; or font-size: 1rem; to the <legend> appears to fix this issue, but it would be preferential not to have to add the additional styling.

Proposed solution (to mimic <label> default) in /scss/_forms.scss before the .col-form-label rule definition:

.form-group legend {
  font-size: inherit;
}

Which renders the following (using the same above HTML):

[mdo]

Every <legend> has that font-size though, it's not a matter of being in a particular form layout. See https://codepen.io/anon/pen/BvKwNV for an example. I don't think this is something we'd change.

Thoughts @MartijnCuppens or @andresgalante?

[tmorehouse]

When in horizontal forms, one can apply the col-form-label class (as all the examples show in the docs) to make it appear the same as a regular <label>.

The form group docs state the following:

The .form-group class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging. By default it only applies margin-bottom, but it picks up additional styles in .form-inline as needed. Use it with <fieldset>s, <div>s, or nearly any other element.

Since it is suggested it can be used on fieldsets, the form-group component should probably treat labels and legends the same stylistically.

[tmorehouse]

When creating a form composed of multiple inputs (inputs and labels are in a non-horizontal layout... i.e. no form-row/cols) and, say, a group of radios or checkboxes.

The checkboxes and radios should be placed in a fieldset for proper semantic markup (and for screen readers). Labels cant be associated with fieldsets, so one uses a legend.

The default behaviour breaks the cadence of the form as the <legend> pops out visually at 50% larger font size than a <label>.

[mdo]

Oh I agree it should be improved, but overriding like that could cause issues for folks who've built around this existing behavior.

Since it is suggested it can be used on fieldsets, the form-group component should probably treat labels and legends the same stylistically.

Eh, just because a particular HTML element can have a class doesn't mean something nested within that element should change. Again, I agree there should be some control here, just not in the solution offered here thus far.

In all likelihood, we should move from general label { ... } rulesets to .form-label { ... } to help avoid issues like this as we could just apply that class. Perhaps for now v4 should have label, .form-label { ... } or something akin?

[tmorehouse]

That would work... similar to the .col-form-label used in horizontal forms.

Your suggestion of label, .form-label { ... } would allow for backwards compatibility, and then in future releases remove the label selector (except for reboot).

[akrawchyk]

This is already merged #28450 but would a follow-up PR that includes the above decision make sense @mdo ?

[akrawchyk]

@tmorehouse looks like a $legend-font-size variable was added to allow theming the default <legend> element: 855d763#diff-d8ee409a461718bfb6240710c8c73382R345

Can this be backported to v4?

[louismaximepiton]

As the v4 reached the end of support is this still a thing ? Should Bootstrap default to $legend-font-size: null/inherit/$form-label-font-size !default; in v5? Imo, since it is a value to change it shouldn't be breaking for folks so it might be a thing to think about.

[mdo]

Going to close this out as stale. If there's still desired effort here, we could see about a new class or something for the legend, but that's probably covered already by our font-size utilities.