Skip to main content

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.

A form label that is placed above a textarea.

Dos and Don’ts

Do
  • 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.
Don't
  • 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

Anatomy of a form label.
  1. Label: Describes the purpose and function of the form.
  2. Help tooltip icon (optional): An icon the user can hover to obtain additional information to understand the meaning of the label.
  3. Optional (optional): Text that tells users the field is not required.
  4. Character count (optional): Shows how many characters are left within the input field.
  5. Percentage (optional): Indicates the proportion of a task that has been completed.
  6. Stepper (optional): Indicates the progression through a series of steps.
  7. String (optional): Dynamic text-only content.

Variantions

Leading content

All leading content tells the user what type of information is expected in the field.

Label

A leading content form label

Help tooltip icon

A form label with help tooltip icon

Optional

A form label with optional text

Trailing content

All trailing content is dynamic and based on user actions, selections, inputs, and statuses.

Character count

A form label with trailing character count

Percentage

A form label with trailing percentage

Stepper

A form label with trailing stepper

String

A form label with trailing string

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.

A leading form label with help tooltip icon

Optional

Informs the user that filling in the field is optional.

A leading form label with optional text

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.

A leading form label with multiline text

Trailing

Character count

Used in input forms such as textarea and text input, to show how many characters are left within the input field.

A form label with trailing character count

Stepper

Used to indicate the users progression through a series of steps.

A form label with trailing stepper

Percentage

Indicates the proportion of a task that has been completed.

A form label with trailing percentage

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.

A form label with trailing string

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:

Do
  • 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
  • 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.
Do
Examples of encouraged form label usage.
Don't
Examples of discouraged form label usage.
Do
Examples of encouraged form label usage.
Don't
Examples of discouraged form label usage.

String

When using the String modifier, ensure that the content is dynamic and is updated to reflect the user’s input.

Example of encouraged form label usage.
Example of encouraged form label usage.

Character count, Stepper, Percentage

Examples of form labels with character count, percentage, and stepper.

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.

Example of empty form label with character counter.
Example of filled form label with character counter.

Stepper, Percentage, String

User’s actions, selections, inputs and statuses are reflected on the trailing content.

Examples of form label with stepper, percentage, and string.

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.

A form label with help tooltip 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.

Do
Example of encouraged form label usage.
Don't
Examples of discouraged form label usage.

Examples

LTR examples

Here are some examples of form label in left-to-right context:

Example of encouraged form label usage.
Example of encouraged form label usage.
Example of encouraged form label usage.
Example of encouraged form label usage.
Example of encouraged form label usage.

RTL examples

Here are some examples of form label in right-to-left context:

Example of encouraged form label usage.
Example of encouraged form label usage.
Example of encouraged form label usage.
Example of encouraged form label usage.

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