Field

The field pattern provides a consistent structure for form fields with labels, controls, help text, and error messages.

Basic field

<div class="af-field">
  <label class="af-field__label" for="field1">
    Label
  </label>
  <div class="af-field__control">
    <input type="text" id="field1" class="af-input" placeholder="Enter text" />
  </div>
  <div class="af-field__help">
    Help text goes here
  </div>
</div>

Field with error

Required for accessibility: Error messages must be linked to the input via aria-describedby. The input references the error message’s id attribute.

<div class="af-field">
  <label class="af-field__label" for="field2">
    With Error
  </label>
  <div class="af-field__control">
    <input
    type="text"
    id="field2"
    class="af-input af-is-error"
    aria-invalid="true"
    aria-describedby="field2-error"
  />
  </div>
  <div class="af-field__error" id="field2-error">
    Error message
  </div>
</div>

Live example

Label

Help text goes here

With Error

Error message