- Guidelines
- React API Reference
- Blazor API Reference
Labels provide text descriptions for form controls, helping users understand what information is required. Clear, consistent labels improve form usability, accessibility, and completion rates.
Guidance
| Aspect | Best Practice |
|---|---|
| Usage | Use labels for all form controls to clearly identify their purpose. Labels should be associated programmatically with their form elements. |
| Content | Use concise, descriptive text. Be consistent with terminology and phrasing. Indicate required fields clearly. |
| Behavior | Labels should be clickable to focus their associated form control. Maintain visual association between labels and their controls. |
| States | Consider how labels appear in different control states (focused, disabled, error). Ensure sufficient contrast in all states. |
| Feedback | Labels can incorporate validation states to reinforce feedback messages. |
| Examples | Form field labels, checkboxes, radio buttons, or any interactive control requiring identification. |
Best Practices
- Clear Association: Ensure labels are visually and programmatically associated with their controls.
- Consistent Positioning: Position labels consistently (typically above or to the left of their controls).
- Descriptive Text: Use clear, action-oriented language that helps users understand what information is needed.
- Visual Hierarchy: Create a clear visual distinction between labels and form values.
- Accessibility: Never rely solely on placeholder text as a substitute for visible labels.
Do’s and Don’ts
Do
- Use concise, descriptive text for labels.
- Position labels consistently throughout forms.
- Indicate required fields clearly.
- Ensure labels are programmatically associated with controls.
Don't
- Hide labels except in rare, self-explanatory cases.
- Use placeholder text as the only form of labeling.
- Use inconsistent terminology or phrasing across labels.
- Position labels inconsistently within a form.
Additional Guidance
- Psychological Impact:
- Cognitive Clarity: Clear labels reduce the mental effort required to understand form requirements.
- Confidence: Well-labeled forms increase user confidence when completing tasks.
- Completion Rates: Forms with clear labels typically have higher completion rates and fewer errors.