Forms
A form is a group of related input controls that allows users to provide data or configure options. Forms can be simple or complex, and may be presented as dedicated pages, side panels, or dialogs depending on the use case and the situation.
General guidelines
Use a form when you need to:
- Sign up for / log into an account
- Register for a service
- Reconfigure settings, (e.g. enabling notifications)
- Take a survey
- Purchase a product
- Provide feedback
Structure
1
Label: Standard label alignment is left-aligned with the field below. For placeholder text, use uppercase and lowercase and align left.
2
Required Field Label: Mark required fields with an asterisk (*). If all form fields are required, this is not necessary.
3
Disabled Fields: Show disabled fields if users need to know what controls may be available.
4
Fields Lengh: The length of the field should reflect the intended length of the content. Available lengths are 75px, 150px, 250px, 350px, and 500px.
Behavior: Validation and error messages
Use validation and error messages to indicate when a form or field submission fails or requires additional information to be shown. When validating text fields in real-time, message icons will switch depending on the message type. For example, helper text changes into an error message when the content being input doesn't fit the criteria. Error and warning messages disappear when the criteria is met.
1
Unfocused text field.
2
Error message and icon.
3