<div class="field-wrap input-error"><label for="myfield">Things here <span class="required-value">(required)</span></label>
    <div class="form-entry"><input type="text" id="myfield" required="required" aria-required="true" placeholder="This is a text field" class="input-simple m"><span class="error">An optional message might say that this field is required.</span></div>
</div>
<div class="field-wrap input-error">{{render "@label--required" }} <div class="form-entry">{{ render "@text-field--input-m" }}<span class="error">An optional message might say that this field is required.</span></div></div>
{
  "label_id": "myfield",
  "field_id": "myfield",
  "label_text": "Things here"
}
  • Content:
    .form-simple .input-error {
      background-color: palette(alert, light);
      color: palette(alert, dark);
    }
    
    .form-simple .input-error .error {
    	display: block;
    	@include font-scale(m, helvetica);
    	padding-top: 0.5rem;
    	padding-left: 0.5rem;
    }
  • URL: /components/raw/input-pair-error/input-pair-error.scss
  • Filesystem Path: src/components/12-forms/02-molecules/02-input-pair-error/input-pair-error.scss
  • Size: 239 Bytes

There are no notes for this item.