Opattern text fields have a label above explaining what the field is for. Additionally, microcopy is displayed below the field to guide the user for what information is needed. This is followed by alert messages and confirmations such as a validation message.
![]()
Provide descriptive labels for all text fields
![]()
Provide at least 20 characters for all text fields
![]()
Avoid multi-column layouts (exception first and last name)
![]()
Avoid microcopy inside text fields
Provide descriptive labels for all text fields
Avoid multi-column layouts (exception first and last name)
{% toggleText('form') %}