Components

Form

A form allows users to enter information into a page.

Note: If you are a building a form with multiple controls, also consider the accessibility guidelines on the “Form Templates” page.

General accessibility guidance for forms

Customize accessibly. As you customize these templates, make sure they meet the accessibility guidelines in this introduction and as described for each control.
Don’t control element order with CSS. Display form controls in the same order in the HTML as they appear on screen. Don’t use CSS to rearrange the form controls. Screen readers narrate form elements in the order they appear in the HTML.
Align validation with inputs. Visually align validation messages with the input fields so people using screen magnifiers can read them quickly.
Use proper markup. Group each set of thematically related controls in a fieldset element. Use the legend element to offer a label within each one. The fieldset and legend elements make it easier for those who use screen readers to navigate the form.
Use legends. Use a single legend for fieldset (this is required). One common use of the fieldset and legend elements is a question with radio-button options for answers. The question text and radio buttons are wrapped in a fieldset, with the question itself being inside the legend tag.
Embed multiple fieldsets and legends for more complex forms.
Use simple vertical layouts. Keep your form blocks in a vertical pattern. This approach is ideal, from an accessibility standpoint, because of limited vision that makes it hard to scan from right to left.

Note: These components have been designed to support a wide range of screen readers, but they may not work with all versions.

VoiceOver on iOS currently does not support fieldset and legend elements for forms. You can address this issue by using aria-labelledby="for-attribute-of-label id-of-legend id-of-additional-info" on each input in the fieldset. Using aria-labelledby will overwrite the default text read by the screen reader, so it is important to include all relevant information.
VoiceOver on OS X offers partial support for aria-describedby. There's full support for conveying description on text inputs, partial support for description changes when the text input is in focus, and no support for role="alert". Visit a11ysupport.io to view the full status of support.

Variable	Description
`$theme-form-font-family`	Font family of the form.

Meaningful code and guidance updates are listed in the following table:

Date	USWDS version	Affects	Breaking	Description
2023-03-13	3.4.1	Styles	No	Fixed invisible link text for links styled as buttons within forms. Now link text does not match the primary button color when nested inside of a form and the `usa-button` class is present. More information: uswds#5112
2022-04-28	3.0.0	Assets JavaScript Styles	Breaking	Breaking Updated to Sass module syntax and new package structure. More information: uswds#4656