Field
Guidance on labeling, describing and messaging a field so it stays clear and supportive rather than overwhelming.
Alternatives
- Fieldset — For grouping related form controls.
label
Each text field must be accompanied by a label. Effective form labeling helps users understand what information to enter into a text input.
Using placeholder text in lieu of a label is sometimes employed as a space-saving method. However, this is not recommended because it hides context and presents accessibility issues.
description
Description text contains pertinent information that assists the user in completing a field. Description text is always visible and appears underneath the label. Use sentence-style capitalisation, and in most cases, write the text as full sentences with punctuation.
Link inside description text
Try not to make the description a complex component, it's supposed to support the user not overwhelm them.
helpText
Reserve help text for content only relevant during the first interaction a user has with the field. Use sentence-style capitalisation, and in most cases, write the text as full sentences with punctuation.
In most cases description is preferred over help text.
invalidMessage
Offer an invalid message to inform the user how their input violates the requirements of the field.
requiredOrOptional
Set requiredOrOptional="required" to show "(required)" after the label, or requiredOrOptional="optional" to show "(optional)". Both have the same colour as the label, in regular weight instead of the medium weight of the label. When the prop is not set, the label shows no suffix.
Do not also put "(required)" or "(optional)" in the label text.
Mark only one kind of field in a form
In a form, mark the required fields or the optional fields, never both. Leave the fields of the other kind with no suffix.
Mark the kind that has fewer fields. For example, a form has 10 fields: 3 are required and 7 are optional. Mark the 3 required fields with requiredOrOptional="required", and do not mark the 7 optional fields. If the form has 7 required fields and 3 optional fields, mark the 3 optional fields with requiredOrOptional="optional", and do not mark the 7 required fields.