<fieldset class="inline-form-elements address-component">
    <legend>
        Personal information.
    </legend>
    <div class="fieldset-wrapper">
        <div class="form-item address-name">
            <div class="form-label">
                <label for="address-name">Name
</label>
            </div>
            <div class="form-columns">
                <div class="form-item-column">
                </div>
                <div class="form-item-column">
                    <input type="text" name="address-name" id="address-name" />
                    <div class="description"></div>

                </div>
            </div>
        </div>

        <div class="form-item address-firstname">
            <div class="form-label">
                <label for="address-firstname">Firstname
</label>
            </div>
            <div class="form-columns">
                <div class="form-item-column">
                </div>
                <div class="form-item-column">
                    <input type="text" name="address-firstname" id="address-firstname" />
                    <div class="description"></div>

                </div>
            </div>
        </div>

        <div class="form-item address-street">
            <div class="form-label">
                <label for="address-street">Street
</label>
            </div>
            <div class="form-columns">
                <div class="form-item-column">
                </div>
                <div class="form-item-column">
                    <input type="text" name="address-street" id="address-street" />
                    <div class="description"></div>

                </div>
            </div>
        </div>

        <div class="form-item address-number">
            <div class="form-label">
                <label for="address-number">Number
</label>
            </div>
            <div class="form-columns">
                <div class="form-item-column">
                </div>
                <div class="form-item-column">
                    <input type="number" name="address-number" id="address-number" />
                    <div class="description"></div>

                </div>
            </div>
        </div>

        <div class="form-item address-box-number">
            <div class="form-label">
                <label for="address-box-number">Box number
  <span class="label-optional">
    (Optional)
  </span>
</label>
            </div>
            <div class="form-columns">
                <div class="form-item-column">
                </div>
                <div class="form-item-column">
                    <input type="number" name="address-box-number" id="address-box-number" />
                    <div class="description"></div>

                </div>
            </div>
        </div>

        <div class="form-item address-postal-code">
            <div class="form-label">
                <label for="address-postal-code">Postal code
</label>
            </div>
            <div class="form-columns">
                <div class="form-item-column">
                </div>
                <div class="form-item-column">
                    <input type="number" name="address-postal-code" id="address-postal-code" />
                    <div class="description"></div>

                </div>
            </div>
        </div>

        <div class="form-item address-city">
            <div class="form-label">
                <label for="address-city">City
</label>
            </div>
            <div class="form-columns">
                <div class="form-item-column">
                </div>
                <div class="form-item-column">
                    <input type="text" name="address-city" id="address-city" />
                    <div class="description"></div>

                </div>
            </div>
        </div>

        <div class="form-item address-country">
            <div class="form-label">
                <label for="address-country">Country
</label>
            </div>
            <div class="form-columns">
                <div class="form-item-column">
                </div>
                <div class="form-item-column">
                    <select name="address-country" id="address-country">
  
          <option>Country 1</option>
    
  
          <option>Country 2</option>
    
  </select>
                    <div class="description"></div>

                </div>
            </div>
        </div>

        <div class="form-item address-nim">
            <div class="form-label">
                <label for="address-nim">National Insurance Number
</label>
            </div>
            <div class="form-columns">
                <div class="form-item-column">
                </div>
                <div class="form-item-column">
                    <input type="text" name="address-nim" id="address-nim" />
                    <div class="description"></div>

                </div>
            </div>
        </div>

    </div>
</fieldset>
<fieldset class="inline-form-elements address-component">
    <legend>
      Personal information.
    </legend>
    <div class="fieldset-wrapper">
      {% include '@textfield' with {
        "label": "Name",
        "for": "address-name",

        "field_modifier": "address-name",
        "field_description": "",
        "field_error": "",
        "description": "",

        "textfield_id": "address-name",
        "textfield_name": "address-name"
      }%}

      {% include '@textfield' with {
        "label": "Firstname",
        "for": "address-firstname",

        "field_modifier": "address-firstname",
        "field_description": "",
        "field_error": "",
        "description": "",

        "textfield_id": "address-firstname",
        "textfield_name": "address-firstname"
      }%}

      {% include '@textfield' with {
        "label": "Street",
        "for": "address-street",

        "field_modifier": "address-street",
        "field_description": "",
        "field_error": "",
        "description": "",

        "textfield_id": "address-street",
        "textfield_name": "address-street"
      }%}

      {% include '@number'
      with {
        "label": "Number",
        "for": "address-number",
        "label_optional": "",

        "field_modifier": "address-number",
        "field_description": "",
        "field_error": "",
        "description": "",

        "number_id": "address-number",
        "number_name": "address-number"
      }
      %}

      {% include '@number'
      with {
        "label": "Box number",
        "for": "address-box-number",
        "label_optional": "Optional",

        "field_modifier": "address-box-number",
        "field_description": "",
        "field_error": "",
        "description": "",

        "number_id": "address-box-number",
        "number_name": "address-box-number"
      }
      %}

      {% include '@number'
      with {
        "label": "Postal code",
        "for": "address-postal-code",
        "label_optional": "",

        "field_modifier": "address-postal-code",
        "field_description": "",
        "field_error": "",
        "description": "",

        "number_id": "address-postal-code",
        "number_name": "address-postal-code"
      }
      %}

      {% include '@textfield' with {
        "label": "City",
        "for": "address-city",

        "field_modifier": "address-city",
        "field_description": "",
        "field_error": "",
        "description": "",

        "textfield_id": "address-city",
        "textfield_name": "address-city"
      }%}

      {% include '@select'
        with {
        "label": "Country",
        "for": "address-country",
        "label_optional": "",

        "field_modifier": "address-country",
        "field_description": "",
        "field_error": "",
        "description": "",

        "select_id": "address-country",
        "select_name": "address-country",
        "options": [
          {
          "label": "Country 1"
          },
          {
          "label": "Country 2"
          }
        ]
        }
      %}

      {% include '@textfield' with {
        "label": "National Insurance Number",
        "for": "address-nim",

        "field_modifier": "address-nim",
        "field_description": "",
        "field_error": "",
        "description": "",

        "textfield_id": "address-nim",
        "textfield_name": "address-nim"
      }%}

    </div>
</fieldset>
/* No context defined for this component. */
  • Content:
    .address-component {
      > .fieldset-wrapper {
        display: flex;
        flex-wrap: wrap;
    
        .form-item {
    
          .form-columns {
            display: block;
          }
    
          @include tablet {
            width: span(6);
            margin-right: gutter();
          }
    
          &.address-street {
            @include tablet {
              width: span(5);
            }
          }
    
          &.address-number {
            @include tablet {
              width: span(3);
            }
          }
    
          &.address-box-number {
            @include tablet {
              width: span(4);
            }
          }
    
          &.address-postal-code {
            @include tablet {
              width: span(3);
            }
          }
    
          &.address-city {
            @include tablet {
              width: span(9);
            }
          }
    
          &.address-firstname,
          &.address-box-number,
          &.address-city,
          &.address-nim {
            margin-right: 0;
          }
        }
      }
    
      .form-columns .form-item-column {
        width: 100% !important; // sass-lint:disable-line no-important
      }
    }
    
  • URL: /components/raw/address/_address.scss
  • Filesystem Path: components/41-organisms/inline-form-groups/address/_address.scss
  • Size: 987 Bytes

The address organism

This organism is composed of multiple form item molecules such as textfields, number fields and select lists. Because the default layout of form items is a 50% width field with an optional information box next this organism changes the default styling of its molecules a bit more extensively.

All form-item molecules in this organism are 100% in width unless otherwise specified. This makes it possible to display inline form elements. This is used by this component to float the street, number and box number fields on one line.