Field
Composition
- Label
- Assistive text
- Form Element
- Placeholder
- Validation
1. Label
required
Label describes the expected input.
Do
- Use a clear and concise label.
Don't
- Don't use too long sentences.
2. Assistive text
optional
Assistive text provides additional informations to the users, helping them to fill the field or reassure them about the context and use of their value.
Assistive text is also used to indicate which field is optional.
Do
- Use a positive, clear and concise wording.
Don't
- Avoid negative and too long sentences.
3. Form element
required
Form element is the input of the field, that allow us to collect desired value from the users.
To see all the Luggage Form Elements, please go to the dedicated section.
3.1 Placeholder
required
Placeholder, is a short hint inside the input that describes the expected value.
Do
- Provide an example of the desired value or an hint question.
Don't
- Do not repeat the label value.
4. Validation
recommended
Validation helps the users to know if their inputs are successful or with errors, by visual feedbacks provided after the field completion.
Success
Appears when an input is filled with the right format and value.
Error
Appears when an input is filled with an incorrect value or when it’s required and not filled before being submit.
Do
- Guide the user with contextual error wording.
Don't
- Do not use a generic error message.
Behaviour
Apply validation after user’s completion.
List of Fields
Text
Collect inline alphanumeric values.
Do
- Use Text form element for short text.
Behaviour
Should trigger the apparition of mobile alphanumeric keyboard.
Phone
Collect indicator number and phone number values.
Recommendation
- Use an assistive text to indicate to the users why we ask them their phone number.
Do
- Use the good localised version according to the POS for Localized formatting.
Localized formatting
| Country | Placeholder | Input Value |
|---|---|---|
| Belgium | ex. : 00 000 00 00 | 02 620 04 25 |
| France | ex. : 00 00 00 00 00 | 01 77 51 33 91 |
| Italy | es.: 00 0000 0000 | 02 8681 6401 |
| Nederlands | bv.: 00 000 0000 | 20 225 1554 |
| Spain | es.: 00 000 00 00 | 93 122 55 44 |
Behaviour
Should trigger the apparition of mobile phone keyboard.
Collect email address.
Recommendation
- Use a assistive text to indicate to the users why we ask them their email address.
Behaviour
Should trigger the apparition of mobile email keyboard.
Address
Collect full address.
Recommendation
- Use an assistive text to indicate to the users why we ask them their address.
Textarea
Collect multiple alphanumeric values.
Do
- Use Textarea for long text.
Numbers
Collect only numeric value.
Unit on the right
Unit on the left
Do
- Use Numbers for incremental numeric value, like kilometre or price.
Don't
- Do not use Numbers for zip code or phone number.
Date
Must help the user providing an accurate format.
Do
- …
Don't
- …
Range
Allows the user to choose from a range of possibilities with one or two values.
Do
- …
Don't
- …
Switch
Used to select an option between two states
Do
- Use Switch to let the users choose between 2 options.
Don't
- …
Checkbox
Used when the user can choose several options among many or to firm some agreement.
Do
- Use Switch to let the users choose between 2 options.
Don't
Radio
Used when the user have to choose one option among many.
Do
- Use Switch to let the users choose between 2 options.
Don't
Select
Help the user to select an option from an option menu while saving space on the interface with native display.
Do
- Use a select only if the user has to choose from more than 5 choices.
- Override the first item as an assistive (to review)
Dropdown
Dropdowns are toggleable, contextual overlays for displaying lists of links and more.(bootstrap)
Do
- …
Search (custom)
…
Do
- …
Don't
- …