Label
Accessible text for a form control.
Default
Use Label when a control does not need the full Field layout. Connect it with htmlFor and id.
Wrapping a control
Wrap the control to make the text part of its hit target without an id.
Optional
Add a regular-weight secondary hint inside the label.
Best practices
When to use
- Use to name a single form control when it does not need the full Field layout.
- Use FieldLabel inside Field, and FieldsetLegend when the label names several related controls.
Content
- Use sentence case with no trailing colon, such as “Workspace name”. Add a regular-weight secondary “Optional” hint inside the label when needed.
Accessibility
- Always connect a Label to its control with htmlFor and id, or by wrapping the control so the text is part of its hit target.