An official website of the United States government
Labels and Messages
Overview
Labels identify a single form control such as a Text input or grouping of form controls such as Checkboxes. They briefly describe the type of information users will be providing using the associated form controls such as “Email Addressâ€, “Topicâ€, or “Format†and should always be provided. Messages can be displayed with Labels and their associated form controls. Their purpose may be to explain the intent of the form section, provide instructions on formatting, or identify errors have occurred. Required form fields are indicated by an asterisk* and must be completed.
How to Use
When to Use
- Labels should be used for all form controls.
- Messages that serve as descriptions or instructions should be used sparingly. When used, display as plain text above the form controls.
- Messages that indicate errors should be displayed above the form controls and below any other messages if they are used. This is to help make it clear which specific form controls and input are causing the error.
Other Guidance
Label Text: Be concise – one to three words.
Messages Text: Be concise – a brief sentence. Avoid long explanatory text. Headings, labels, and the use of appropriate form controls should guide users through the form.
Labels on the Top: This layout option reduces completion times, better supports longer label text, and maintains a consistent layout across all viewports. However, more vertical space is required for the form layout in larger screens. Example of Labels on the Top.
Labels on the Left: This layout option reduces the time users need to scan the form content so is especially useful for users who may not be familiar with the form. It also reduces the amount of vertical space needed in larger screens; however the distance between the labels and the form controls can result in slower completion times. Note the labels will automatically shift above the form controls and messages in viewport 1. Example of Labels on the Left