When to nest "fields" inside a "field"?

[h0lg]

I'm confused by the semantics of either the field or the fields class or both when it comes to nesting them.
From https://fomantic-ui.com/collections/form.html#field I understand that

A field is a form element containing a label and an input

and from the examples in https://fomantic-ui.com/collections/form.html#fields I understand that fields can be used to group multiple field together. So far, so good.

But then there is also the second example in https://fomantic-ui.com/collections/form.html#form (the one that contains Shipping & Billing Information) that nests field > fields > field without giving me a hint as to why/for what purpose I would want to do that.

I am stumbling across the checkbox margin styles added here https://github.com/fomantic/Fomantic-UI/pull/613/files and commented on by @lubber-de here #613 (review) suggesting to me that there must be a valid use case for this.

.ui.ui.form .field .fields .field:not(:only-child) .ui.checkbox {
  margin-top: @checkboxFieldTopMargin / 2;
}

However, I still don't understand when/why I would want to even try a nesting like that, since I don't find it documented.

Can you enlighten me?

I also found this discussion that may be related: #651

[h0lg]

Additionally, I'm confused by the duplicated .ui.ui selector for those CSS rules (see above). As far as I know, that doesn't have any effect, does it?

[lubber-de]

The multiple same css selector increases specificity to avoid using !important

See simple explanation here
https://jsfiddle.net/lubber/4qk5vzcg/4/

[h0lg]

Wow, how have I missed that CSS feature for so long? Thanks for clarifying!

[lubber-de]

By using fields inside a field you can specify only one single label for several fields. Using fields directly as the parent needs to have labels for each field separately.
See difference here:
https://jsfiddle.net/lubber/42nqrgbj/4/

[h0lg]

Thanks for your answer & fiddle. Yeah, you hinted at the use case of only specifying one single label for several fields in this comment #613 (review) .

My intuitive approach to achieve that would be to just omit the second label like so

  <div class="two fields">
    <div class="field">
      <label>Name</label>
      <input type="text" name="shipping[first-name]" placeholder="First Name">
    </div>
    <div class="field">
      <input type="text" name="shipping[last-name]" placeholder="Last Name">
    </div>
  </div>

instead of thinking of the wrapping/nesting you showcase in your fiddle

  <div class="field">
    <label>Name</label>
    <div class="two fields">
      <div class="field">
        <input type="text" name="shipping[first-name]" placeholder="First Name">
      </div>
      <div class="field">
        <input type="text" name="shipping[last-name]" placeholder="Last Name">
      </div>
    </div>
  </div>

So what's wrong with the first approach? Or what's better in the second? They render UIs I cannot distinguish by looks. Is it just about the semantics of the source HTML (i.e. making it explicit that the label is for both fields and not just the first)? What am I missing?

The way I understood the meaning or intended use of field and fields from the docs, nesting them like in the second example would have never crossed my mind.

[lubber-de]

Omitting the second label will result in a wrong positioned second field.

Only option by this approach would be to add an empty label

   <div class="field">
      <label>&nbsp;</label>
      <input type="text" name="shipping[last-name]" placeholder="Last Name">
    </div>

See https://jsfiddle.net/lubber/42nqrgbj/6/

[h0lg]

I see from your fiddle that the nesting really makes a difference when the two fields are layouted side-by-side. Thank you, I understand the difference now and you can consider my question as answered.

However, I think the documentation could benefit from an explicit example for this use case - as I said, nesting the field and fields like you did would otherwise not have crossed my mind.

Also, I'd consider updating the descriptions of field and the third example for fields to not contradict this use case.

Your example

  <div class="field">
    <label>Name</label>
    <div class="two fields">
      <div class="field">
        <input type="text" name="shipping[first-name]" placeholder="First Name">
      </div>
      <div class="field">
        <input type="text" name="shipping[last-name]" placeholder="Last Name">
      </div>
    </div>
  </div>

(strictly speaking) contradicts

A field is a form element containing a label and an input

in two ways:

• The outer field contains two (i.e. multiple) instead of an (i.e. one) input.
• The inner fields contain no label at all

And the third example for fields rather seems to use the approach I outlined above (i.e. labelling the first field and omitting the labels in the subsequent ones) instead of yours (which I now understand to be the correct usage):

<div class="ui form">
  <div class="inline fields">
    <div class="eight wide field">
      <label>Name</label>
      <input type="text" placeholder="First Name">
    </div>
    <div class="three wide field">
      <input type="text" placeholder="Middle Name">
    </div>
    <div class="five wide field">
      <input type="text" placeholder="Last Name">
    </div>
  </div>
</div>