Code examples

Adding a hint

<label for="favorite">
  My favorite NATO letter is:
</label>
<input type="text" id="favorite" aria-describedby="hint">
<div class="hint" id="hint">
  Example: Alpha, Bravo, Charlie
</div>
Example: Alpha, Bravo, Charlie

Adding an error

<label for="favorite">
  What is your favorite NATO letter?
  <span>Required</span>
</label>

<input type="text"
       id="favorite"
       aria-describedby="alert"
       required>

<div id="alert" class="inert" role="alert">
  The correct answer is Charlie
</div>

<button id="show-alert">
  Show error
</button>

Developer notes

Name

  • Inner text describes the hint

Role

  • May have role="alert" if serving as an input error message

Group

  • Use aria-describedby="hint-id" to associate an input with a hint.

Focus

  • Hints should not receive focus