Forms

Forms help us gather essential information from our customers, like during the journey of booking a flight, updating personal details or completing a payment. While the process of collecting data can feel dry and functional, it’s our job to ensure this is as smooth and user-friendly as possible.

 

The Building Blocks

• Labels inform customers what the input means and can be accompanied by icons within the Input field
• Placeholder texts can show an example of the Input
• Text Field and Text Area enables free-form input while Select and Radio Buttons are there to have the customer select pre-defined options
• Buttons are there to submit a Form
• We use the Notification component for messages that apply to the entire Form

Best Practices

• Keep the entire Form as compact as possible, but if it needs to be long create multiple steps
• Make sure to follow a logical order: Name before Address etc.
• Use a single column layout as much as possible
• Always ensure that there is a label programmatically associated with the input. When there is no visual label, like in Search fields, ensure the label is still present in code for screen readers
• Differentiate between required and optional fields by adding (optional). Avoid using the asterisk * symbol

 

Assistive Elements

1. Hint text
   The hint text is displayed right below the Label. It is an assistive text that can provide important additional help or context. It is often used to explain the data format in order to fill out the field correctly.
2. Placeholder text
   An optional placeholder text provides an example for the input. It disappears after the users enters the data. It should not be used to replace the text field label but only serves as an additional way to assist. It should never contain important information.
3. Text or Link
   You can add extra texts or links under the field to point the user to more information or context. Avoid using information icons (these are not user friendly for keyboard-only users).

 

Validation

We have Positive or Error messages for Individual Form Fields and the entire Form.

Error Message Guidelines

• Show an error summary at the top of the Form by using the Notification component, even if there’s only one field with an error
• Inside the Notification: Show the fields that need attention (with an anchor link that brings the customer to the specific field) and the error message
• Bring the customer to the error summary when they are lower on the screen or page (with an easing animation)
• Per field: show the error state plus a clear, short message that helps the customer solve the issue. Make sure to repeat exactly the same error message as the one in the error summary

 

Do’s and Don’ts

Specs