A form field collects a specific piece of information within a form.
Where it goes: Inside a form
Additional instructions
Use sentence case for labels and error messages.
Accessibility notes
- Include the
<label>
element for each form field, along withfor /id
to associate each label with the corresponding form field. - Use
<fieldset>
and<legend>
to group associated form fields where appropriate.
Example
![Examples of various form fields, including form field label, form field with focus, text input error, text input success, form field text area, dropdown label, checkboxes, and radio buttons.](/sites/default/files/hrsa/design-system/form-field.jpg)