There are no notes for this item.

<div class='form-row'>
  {% include '@form-item' with {
    label: 'Postal code',
    id: 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: id ~ '-postal-code_name',
    stacked: true
  } %}
  {% include '@form-item' with {
    label: 'Municipality',
    id: id ~ '-municipality_id',
    input_component: 'input',
    type: 'text',
    modifier: 'success',
    field_message: 'Very good!',
    field_description: 'Place modifier .stacked on the form-items.',
    name: id ~ '-municipality_name',
    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>
/* No context defined for this component. */
  • 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