Link

Improve this doc

Field

Composition

Forms/2.jpg

Forms/1.jpg

  1. Label
  2. Assistive text
  3. Form Element
    1. Placeholder
  4. 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.

Forms/Valide.jpg

Error

Appears when an input is filled with an incorrect value or when it’s required and not filled before being submit.

Forms/Error.jpg

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.

Forms/Text.jpg

Do

  • Use Text form element for short text.

Don't

  • Do not use Text for long text. Use a Textarea instead.

Behaviour

Should trigger the apparition of mobile alphanumeric keyboard.

Phone

Collect indicator number and phone number values.

Forms/Phone.jpg

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.

Email

Collect email address.

Forms/Mail.jpg

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.

Forms/Address.jpg

Recommendation

  • Use an assistive text to indicate to the users why we ask them their address.

Textarea

Collect multiple alphanumeric values.

Forms/Textarea.jpg

Do

  • Use Textarea for long text.

Don't

  • Do not use Textarea for long text. Use Text instead.

Numbers

Collect only numeric value.

Forms/Right.jpg

Unit on the right

Forms/Left.jpg

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

  • Don't use Checkbox for a choice of more than 5 items, use a Select or Dropdown instead.
  • Don't use a Checkbox for a choice between 2 options, use a Switch instead.

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

  • Don't use Radio for a choice of more than 5 items, use a Select or Dropdown instead.
  • Don't use a Checkbox for a choice between 2 options, use a Switch instead.

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)

Don't

  • Don't use Select for a choice of less than 5 items, use a Radio or Checkbox instead.

Dropdowns are toggleable, contextual overlays for displaying lists of links and more.(bootstrap)

Do

Don't

  • Don't use Dropdown for a choice of less than 5 items, use a Radio or Checkbox instead.

Search (custom)

Do

Don't