Label

The name above a field. It says what goes in, marks whether it is required or optional, and can hold an info icon for more detail.

Preview

When to use

• Above every field, including ones with a placeholder.
• With a required mark where most fields are optional, or an Optional tag where most are required — not both.

Anatomy

1. 1

   Text

   Medium weight, sentence case, short.

2. 2

   Required mark

   A red asterisk after the text.

3. 3

   Optional tag

   Muted (Optional) after the text, as the other convention.

4. 4

   Info icon

   Optional; opens a tooltip with more detail.

States

Accessibility

• A <label> element tied to its field, so clicking it focuses the field and it becomes the field's name.
• The asterisk is backed by the required attribute on the field, and a note at the top of the form explains it.
• The info icon is a button with an aria-label; its tooltip opens on focus as well as hover.

Source

The Label is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.

See it in a block