Label

🧭 When to Use a Label

Always use a label when displaying any input, select, or interactive form element. Labels ensure clarity, especially in forms, filters, and settings panels.

Avoid using placeholder text as a substitute for labels—placeholders disappear once users start typing, which can create confusion.

🎨 Label Types

Default – A standard label used to describe an input or field. This is the most common type and should be used in nearly all form elements.

Required – Indicates that the field must be filled out before submission. A required label includes an asterisk or alternative visual indicator alongside the label text.

Optional – Shows that the field is not mandatory. This helps reduce friction by letting users know they can skip it. Displaying “(Optional)” next to the label is a common convention.

Each type is handled via a modifier layer in Figma, so you can toggle between them without duplicating components.

📐 Placement

Labels should be placed directly above the input or to the left (in tight horizontal layouts). Always maintain consistent spacing and alignment.

🧠 Best Practices

• Keep label text short, clear, and actionable

• Use sentence case (e.g., “Email address” instead of “EMAIL ADDRESS”)

• Don’t rely solely on an asterisk to indicate a required field—use color and assistive text if possible

• For accessibility, always associate labels directly with their input components (in code: use for and id attributes)

♿ Accessibility Considerations

From a design perspective:

• Ensure the label has enough contrast with the background

• Maintain consistent positioning so screen readers and users alike can predict label placement

• Use icons or colors carefully—ensure they’re supported by text where needed

From a code perspective (if implemented):

• Use the label tag in HTML and link it to the corresponding input with the for attribute

• Include required/optional status in the label for screen readers

• Use aria-required="true" in combination with visual cues for required fields