Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.


The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.



Use: Deployed
Labels associate a descriptive title with each form input used to collect information from the user.


Examples shown here use the va-text-input component to demonstrate form labels. Labels are used consistently across standard form components.


View Label default in Storybook


View Label required in Storybook


When to use label

  • All form inputs must have a label. All standard form inputs must have an associated label. Thus the label elements is built into our standard form components.

How this component works

  • Show whether a field is required or optional. Mark required fields using the required property on the web component.

Error handling

View va-text-input with error in Storybook

  • In all cases, only show error validation messages or stylings after a user has interacted with a particular field.
  • The form field and its corresponding <label> are wrapped in a container which provides a thick border and padding to visual indicate an error message to users who might have difficulty perceiving contrast. It also changes the border of the input to red as a secondary indicator.
  • An error message is placed between the label and the form field.
  • The form field receives an aria-describedby attribute that references the id of the error message.
  • Prepending <span class="sr-only">Error</span> to error messages alerts screen screen readers clearly that an error exists.

Review the help users to recover from errors pattern

Hint text

When a detailed form input label is not enough to convey the meaning or purpose of the input, we have three options for including additional context:

  1. Beneath the label (default)
  2. Inline within the label
  3. Additional info

Default hint text

View Label with hint text in Storybook

This should be used in the case where the needed clarification is a little longer, but less than two sentences. These should ideally not wrap more than twice for a total of three lines.

Inline within the label

View Label with inline hint text in Storybook

This should be used in the case where the needed clarification is very short.

With Additional info

View Label with additional info hint text in Storybook

Using the additional info component should only be done in cases where the needed clarification is long, complex, requiring more than two sentences or multiple paragraphs, or special formatting (bullet points, links, etc.).

We want to avoid this variation when possible. Use of this component for this purpose is a last resort when attempts at reducing the content have failed. If a field needs a lot of explanation, it should ideally be moved to a distinct page with explanation on the page itself.

Content considerations

Standardized labels by form pattern

We’re in the process of standardizing form field labels and their related hint text and error messages. We’ll add to this list as we build out the set of standardized labels.

Ask uses for…

Edit this page in GitHub (Permissions required)
Last updated: May 13, 2024