Label

Component

A Label serves as a crucial element for enhancing the clarity and usability of a digital interface. It is primarily used to provide a clear and concise description or instruction related to an associated input element, such as a text field, checkbox, radio button, or drop-down menu.

Labels ensure that users understand the purpose and expected input for each form element, thereby reducing the likelihood of user errors and increasing the efficiency of data entry.

• A: Left Alignment Variation;
• B: Center Alignment Variation;
• C: Right Alignment Variation;

Used for:

Clarifying input purpose

In cases where it is necessary to have clear information about the input, a Label is used.

Helper text

In cases where it is necessary to have additional information to help the user, a Label is used.

Enhancing accessibility

Labels are crucial for accessibility, enabling screen readers to convey the purpose of form fields to visually impaired users.

Don’t use for:

Headings

For page titles, for example, a Label doesn’t have either the size or the weight required to be viewed as a heading.

Subtitles

For sections’ titles, for example, a Label doesn’t have either the size or the weight required to be viewed as a subtitle.

Glossary

If you’d like, you can check the input fields glossary which contains a multilingual set of labels as well as their corresponding placeholders and error messages.

Demo

Access the Figma file and inspect the element using Dev Mode.

What’s New

• Added fill container option;
• Added large, regular and small sizes ;