Springboard

Input Error 

<label for="inputid">label</label>
<input type="text" id="inputid" name="input" value="" placeholder="" aria-describedby="inputtip" aria-invalid="true" />
<div id="inputtip">
    <span class="error-msg">Your input is invalid because...</span>
</div>
 
{{~ render '@input' input ~}}
<div id="{{ tip.id }}">
  <span class="error-msg">{{ msg }}</span>
</div>
 
{
  "msg": "Your input is invalid because...",
  "tip": {
    "id": "inputtip"
  },
  "input": {
    "name": "input",
    "type": "text",
    "id": "inputid",
    "ariaDescribedby": "inputtip",
    "ariaInvalid": true,
    "label": {
      "for": "inputid",
      "text": "label"
    }
  }
}
  • Content: 
    .error-msg {
  display: block;
  padding: .5em;
  color: $color-error;
  font-family: $font-stack-form-ui;
}
  • URL: /components/raw/input-error/_sass.scss
  • Filesystem Path: components/01-elements/03-form-controls/input-error/_sass.scss
  • Size: 109 Bytes
  • Handle: @input-error
  • Preview:
  • Filesystem Path: components/01-elements/03-form-controls/input-error/input-error.hbs
  • References (1): @input

When presenting an input error message

  1. Be sure to set aria-invald=”true” on the input
  2. Be sure to include an aria-describedby attribute tying the input to the error message