Form Row

There are no notes for this item.

<div class='form-row'>
  {% include '@form-item' with first|merge({'stacked': true}) %}
  {% include '@form-item' with second|merge({'stacked': true}) %}
</div>
<div class='form-row'>
    <div class="form-item  error stacked">
        <label for="postal-code_id">Postal code
        </label>
        <div class="field-message " id="postal-code_id-description">
            Wrap form items in a .form-row element.
            <div class="accolade "></div>
        </div>
        <div class="form-columns">
            <div class="form-item-column">

                <input type="text" id="postal-code_id" aria-describedby="postal-code_id-message" name="postal-code_name" class="text error" aria-invalid="true" />
            </div>
            <div class="form-item-column">
                <div class="field-message error" role="alert" id="postal-code_id-message">
                    Almost there!
                    <div class="accolade "></div>
                </div>
            </div>
        </div>
    </div>
    <div class="form-item  success stacked">
        <label for="municipality_id">Municipality
        </label>
        <div class="field-message " id="municipality_id-description">
            Place modifier .stacked on the form-items.
            <div class="accolade "></div>
        </div>
        <div class="form-columns">
            <div class="form-item-column">

                <input type="text" id="municipality_id" aria-describedby="municipality_id-message" name="municipality_name" class="text success" />
            </div>
            <div class="form-item-column">
                <div class="field-message success" role="alert" id="municipality_id-message">
                    Very good!
                    <div class="accolade "></div>
                </div>
            </div>
        </div>
    </div>
</div>
{
  "first": {
    "label": "Postal code",
    "id": "postal-code_id",
    "input_component": "input",
    "type": "text",
    "modifier": "error",
    "field_message": "Almost there!",
    "field_description": "Wrap form items in a .form-row element.",
    "name": "postal-code_name"
  },
  "second": {
    "label": "Municipality",
    "id": "municipality_id",
    "input_component": "input",
    "type": "text",
    "modifier": "success",
    "field_message": "Very good!",
    "field_description": "Place modifier .stacked on the form-items.",
    "name": "municipality_name"
  }
}
  • Content:
    .form-row {
      display: flex;
      flex-wrap: wrap;
      width: calc(100% + .8rem);
      max-width: 21.3rem;
      margin-right: -.4rem;
      margin-left: -.4rem;
    
    
      @include desktop {
        width: calc(50% + .8rem);
      }
    
      > * {
        flex-basis: calc((21.3rem - 100%) * 999);
        flex-grow: 1;
        margin-right: .4rem;
        margin-left: .4rem;
      }
    }
    
  • URL: /components/raw/form-row/_form-row.scss
  • Filesystem Path: components/31-molecules/form-row/_form-row.scss
  • Size: 331 Bytes