Field
The field pattern provides a consistent structure for form fields with labels, controls, help text, and error messages.
Basic field
Section titled “Basic field”Help text goes here
<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
Section titled “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.
Error message
<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>