Validation

Form validation states using ARIA attributes.

Invalid Input

Use aria-invalid="true" to indicate an invalid field:

<label>
  Email
  <input type="email" aria-invalid="true" value="invalid-email">
</label>

With Error Message

Connect error messages using aria-describedby:

Password Password must be at least 8 characters.

<label>
  Password
  <input
    type="password"
    aria-invalid="true"
    aria-describedby="password-error"
    value="123"
  >
</label>
<small id="password-error">Password must be at least 8 characters.</small>

Required Fields

Username (required)

<label>
  Username <small>(required)</small>
  <input type="text" required>
</label>

Complete Form Example

<form>
  <label>
    Name
    <input type="text" required>
  </label>

  <label>
    Email
    <input
      type="email"
      aria-invalid="true"
      aria-describedby="email-error"
      value="bad@"
    >
  </label>
  <small id="email-error">Please enter a valid email address.</small>

  <label>
    Password
    <input type="password" minlength="8" required>
  </label>

  <button type="submit">Create Account</button>
</form>