- Build form labels for the components that need it using the atomic variants.
- Each form label must contain no more than one trailing content.
- Link the labels with corresponding input fields to establish a clear visual association.
- Use a consistent style and formatting for labels throughout the form to maintain visual harmony.
Form Label
A form label is a text element used to describe or provide a name for an input field or form element.
Overview
The purpose of form labels is to improve the usability and accessibility of form inputs by providing descriptive and meaningful text that enhances the user experience. It helps users understand the purpose of the input field, improving form comprehension and data entry accuracy.
Form labels are displayed as a concise and clear text above an input field that describes the information it requires. They provide guidance, instructions, or prompts to users, ensuring they are able to provide the appropriate data.
Dos and Don’ts
- Avoid placing labels away from the fields, as it may lead to user confusion or difficulty in filling out the form.
- Avoid overcrowding the form with excessive labels, which can overwhelm users and make the form look cluttered.
- Don’t create permanent trailing content without creating a variant in the Form Label component.
Anatomy
- Label: Describes the purpose and function of the form.
- Help tooltip icon (optional): An icon the user can hover to obtain additional information to understand the meaning of the label.
- Optional (optional): Text that tells users the field is not required.
- Character count (optional): Shows how many characters are left within the input field.
- Percentage (optional): Indicates the proportion of a task that has been completed.
- Stepper (optional): Indicates the progression through a series of steps.
- String (optional): Dynamic text-only content.
Variantions
Leading content
All leading content tells the user what type of information is expected in the field.
Trailing content
All trailing content is dynamic and based on user actions, selections, inputs, and statuses.
Modifiers
You can customise the form label to suit individual use cases.
Leading
Help tooltip icon
Provides users with more context or information about the label when interacting with the field, especially when the label alone may not provide sufficient explanation.
Optional
Informs the user that filling in the field is optional.
Multiline label
If that label length exceeds the width of the form, the label wraps onto a second line.
If the help tooltip icon or the Optional identifier are active, they trail the end of the label.
Trailing
Character count
Used in input forms such as textarea and text input, to show how many characters are left within the input field.
Stepper
Used to indicate the users progression through a series of steps.
Percentage
Indicates the proportion of a task that has been completed.
String
If none of the trailing content above suits your use cases, you can use this dynamic text-only content to meet the needs or requirements of the field to which the form label is associated.
Content
Label
A good form label has certain qualities that make it user-friendly and improve the overall experience. Here are some important attributes of a good form label:
- Use clear and specific language that directly communicates the purpose of the input field.
- Use action-oriented labels that describe what users need to enter rather than generic terms.
- Prioritise brevity and simplicity, using concise wording that is easy to read and understand.
- Use consistent and standardised terminology across all form labels for clarity and coherence.
- Consider the context and expectations of your target users when crafting the labels.
- Use sentence case in the label.
- Don't use vague or ambiguous terms that may confuse users or lead to incorrect data entry.
- Don't use technical jargon or industry-specific language that users may not be familiar with.
- Don't overcrowd the label with unnecessary information or excessive details.
- Don't use overly creative or clever wording that may obscure the meaning or purpose of the input field.
- Don't sacrifice clarity for brevity - ensure that the label provides sufficient guidance without being overly wordy.
- Don't use labels as instructional text. For example, use “Email” instead of “Put your email here”.
- The label should not be used as a minimum value for a Slider or Progress Bar.
String
When using the String modifier, ensure that the content is dynamic and is updated to reflect the user’s input.
Character count, Stepper, Percentage
Behaviours
Character counter
Text fields and text areas may have a character limit and counter. Use the character limit and counter to let users know how long their entry can be before they begin typing.
Stepper, Percentage, String
User’s actions, selections, inputs and statuses are reflected on the trailing content.
Interactions
Help tooltip icon
A tooltip is triggered by hovering (on desktop) or clicking (on tablet and mobile) the Help tooltip icon in the form label. A tooltip will close once the user hovers off the icon or taping outside of the icon.
Open a tooltip: Display information, description or helping text.
Layout
Position
Leading content should always be left-aligned and follow the order of Label, Help tooltip and Optional.
Trailing content is positioned at the end of a form label and should be right-aligned.
Examples
LTR examples
Here are some examples of form label in left-to-right context:
RTL examples
Here are some examples of form label in right-to-left context:
Resources
| Stable | |
| Stable | |
 Web Components | Alpha |
 Vue [Fozzie] | N/A |
 React [Snacks] | Stable |
 iOS JustUI [UI Kit] | Stable |
 iOS PIE [SwiftUI] | Stable |
 Android PIE [Compose & Views] | Stable |
