Validation & Error States

Error handling

Use aria-invalid="true" or the af-is-error class to indicate validation errors:

<div class="af-field">
  <label class="af-field__label" for="email">
    Email
  </label>
  <div class="af-field__control">
    <input
    type="email"
    id="email"
    class="af-input af-is-error"
    aria-invalid="true"
    aria-describedby="email-error"
  />
  </div>
  <div class="af-field__error" id="email-error">
    Please enter a valid email address
  </div>
</div>

Required fields

Indicate required fields clearly:

<div class="af-field">
  <label class="af-field__label" for="name">
    Name
    <span aria-label="required">
      *
    </span>
  </label>
  <div class="af-field__control">
    <input type="text" id="name" class="af-input" required />
  </div>
</div>

Help text

Provide helpful guidance to users:

<div class="af-field">
  <label class="af-field__label" for="password">
    Password
  </label>
  <div class="af-field__control">
    <input type="password" id="password" class="af-input" />
  </div>
  <div class="af-field__help">
    Must be at least 8 characters with a mix of letters and numbers
  </div>
</div>

Live example

Email *

Please enter a valid email address

Password

Must be at least 8 characters with a mix of letters and numbers

Accessibility

Best practices

• Always use <label> elements with for attributes (or wrap inputs in labels)
• Associate error messages with inputs using aria-describedby (required)
• Use aria-invalid="true" for error states (works with af-is-error class)
• Group related fields with <fieldset> and <legend>
• Provide help text for complex inputs using af-field__help
• Use proper input types (email, password, tel, url, etc.) for better mobile keyboards and validation
• Indicate required fields clearly (visually and with required attribute)
• Use aria-label or aria-labelledby for inputs without visible labels when necessary

Keyboard navigation

All form controls support standard keyboard navigation:

• Tab - Move to next field
• Shift+Tab - Move to previous field
• Enter - Submit form (when in submit button)
• Space - Toggle checkboxes/radios/switches
• Arrow keys - Navigate select options and radio groups

Screen reader support

• Labels are properly associated with inputs
• Error messages are linked via aria-describedby and read when the input is focused
• Required fields are indicated
• Field groups use semantic <fieldset> and <legend>