Anatomy
A visible label and useful guidance
The label names the value. Helper text explains format or consequence before the user encounters an error.
Use the name your team will recognize.
Optional value
State optionality explicitly
When most fields are required, mark the exceptions as optional. Avoid long instructions inside placeholders.
Visible only to your organization.
Validation
Explain how to recover
Keep the entered value when validation fails. Connect the message to the control and describe the correction.
Enter a complete email address, such as name@company.com.
States
Disabled and readonly are different
Disabled values are unavailable. Readonly values remain focusable and can be selected or copied.
Managed by your administrator.
Select and copy this value when contacting support.
Responsive layout
Inline when space supports it
The label moves above the control on smaller screens while source order and associations stay intact.
Used for reports and scheduled activity.
Usage guidance
Write labels that survive without placeholders.
Use short nouns for labels, concise instructions for helper text, and specific recovery steps for errors.
Next component: Input and Textarea