A label is the name assigned to a component or a group of related components. Alternatively, a label can describe the purpose of a component or group of related components.

Labels with input fields – live example

When to Use

Use the label:

• If you need a label for a component or group of components.
• In forms.

Don’t use the label:

• For the column header of a table. Use the title instead.

Anatomy

1. Text: Describes the data displayed or expected in the corresponding component or group of components.
2. Colon: The colon (:) follows the label text.
3. Asterisk (optional): The asterisk (*) indicates that user input is required.

Variants

Label: The default label comes without the optional “Required” indicator. The user can continue without providing input in the corresponding component or components.

Label for Required Entry (optional): The label shows the “Required” indicator (*) after the colon. To continue, the user must provide input in the corresponding component or components.

Default label, label for a required entry

Responsive Behavior

Wrapping and Truncation

Labels can be wrapped and truncated, depending on the use case.
For labels within forms, use wrapping instead of truncation.
Do not use wrapping to enable long labels. Instead, keep your labels short: a label is not a help text. It must be meaningful, succinct, short, and descriptive.

Labels in a form – live example

Related Links