Input
Les inputs sont des zones de saisie qui permettent aux utilisateurs de saisir des entrées de texte personnalisées à l'aide d'un clavier.
Description
Les inputs sont des zones de saisie qui permettent aux utilisateurs de saisir des entrées de texte personnalisées à l'aide d'un clavier. Ils disposent d'une gamme d'options et prennent en charge plusieurs formats de texte, y compris les chiffres.
Diverses options peuvent être affichées pour communiquer les exigences de saisie à l'utilisateur.
Plateformes
Anatomie
Input - Text
- Label : indique à l'utilisateur les informations attendues dans l'input
- Required (optionnel) : indique si l'input est requis
- Tooltip (optionnel) : permet à l'utilisateur d'avoir plus de détail sur ce que est attendu dans l'input
- Input text / Placeholder : permet à l'utilisateur de saisir du texte à l'aide d'un clavier. Lorsqu'il est vide, il est remplacé par le placeholder : une description supplémentaire ou un exemple des informations attendues dans le champ
- Trailing icon : est principalement utilisé pour des actions telles que l'effacement du texte dans le champ avec l'icon-delete, l'affichage du mot de passe avec l'icon-eye ou la saisie vocale avec l'icon-microphone, etc.
- Erreur : indique clairement à l'utilisateur l'erreur qui a été faite dans le champ et comment la corriger
- Helper (optionnel) : indique les règles de saisie du champ
Input - Phone number
- Prefix : permet à l'utilisateur de sélectionner le préfixe de son numéro de téléphone
- Dropdown : permet à l'utilisateur de sélectionner le préfixe de son numéro de téléphone
Input - Password
- Password manager : permet d'accéder au password manager
- Dropdown : permet d'afficher ou masquer le mot de passe saisi
Input - Button
- Trailing bouton : permet à l'utilisateur de lancer l'action liée à l'input. (ex : appliquer le code promo saisi)
Input - Suffix
- Trailing bouton : permet à l'utilisateur sélectionner une unité pour la valeur saisie
- Dropdown : sélecteur d'unité
Input - Quantity
- Input number/ Placeholder : permet à l'utilisateur de saisir des chiffres
- Button : augmenter ou niminuer la valeur
Input - Amount
- Input number/ Placeholder : permet à l'utilisateur de saisir des chiffres
- Unité
Input - OTP
- Groupe d'input number : permet à l'utilisateur de saisir les chiffres d'un code qu'il a reçu par mail ou sms
Usage
Quand l'utiliser ?
Lorsqu'il est nécessaire de récolter de la data provenant de l'utilisateur.
Le type d'input à choisir en fonction de la data attendue :
- Input - Text : pour récolter tout type d'informations textuelles classiques courtes ou longues (ex : nom, prénom, commentaire)
- Input - Phone number : pour récolter des numéros de téléphone
- Input - Button : lorsqu'il est nécessaire d'activer une action liée à la valeur renseignée (ex : valider un code promo, valider un OTP, s'inscrire à la newsletter…)
- Input - Suffix : lorsqu'il est nécessaire de voir ou choisir une unité
- Input - Quantity : pour récolter des quantités numériques.
- Input - Amount : pour récolter un montant
- Input - OTP : pour récolter un code reçu par mail ou sms
Do's and don'ts
-
Do
Utiliser un label significatif, clair et concis.
-
Don't
Éviter les labels trop longs, complexes ou confus.
-
Do
Les labels doivent suivre les règles d'usage classique des majuscules dans une phrase.
-
Don't
Il est interdit d'écrire les labels tout en majuscules.
-
Do
Rédiger des messages d'erreur qui sont clairs et expliquent clairement aux utilisateurs une solution.
-
Don't
Éviter les messages d'erreur génériques. Ils ne permettent pas toujours à l'utilisateur de comprendre et corriger son erreur.
-
Do
À la fin du formulaire, il est important que le call to action exprime clairement l'action qui se produira au clic de ce dernier.
-
Don't
Éviter les call to action de soumission de formulaire vague et générique.
-
Do
Il est nécessaire d'utiliser le bon type d'input pour le format de valeur attendu. Exemple : Input type phone number pour un numéro de téléphone
Anatomie
Input - Text
- Label : indique à l'utilisateur les informations attendues dans l'input
- Required (optionnel) : indique si l'input est requis
- Tooltip (optionnel) : permet à l'utilisateur d'avoir plus de détail sur ce que est attendu dans l'input
- Input text / Placeholder : permet à l'utilisateur de saisir du texte à l'aide d'un clavier. Lorsqu'il est vide, il est remplacé par le placeholder : une description supplémentaire ou un exemple des informations attendues dans le champ
- Trailing icon : est principalement utilisé pour des actions telles que l'effacement du texte dans le champ avec l'icon-delete, l'affichage du mot de passe avec l'icon-eye ou la saisie vocale avec l'icon-microphone, etc.
- Erreur : indique clairement à l'utilisateur l'erreur qui a été faite dans le champ et comment la corriger
- Helper : indique les règles de saisie du champ
Input - Phone number
- Prefix : permet à l'utilisateur de sélectionner le préfixe de son numéro de téléphone
- Dropdown : permet à l'utilisateur de sélectionner le préfixe de son numéro de téléphone
Input - Button
- Trailing bouton : permet à l'utilisateur de lancer l'action liée à l'input. (ex : appliquer le code promo saisi)
Input - Suffix
- Trailing bouton : permet à l'utilisateur sélectionner une unité pour la valeur saisie
- Dropdown : sélecteur d'unité
Input - Quantity
- Input number/ Placeholder : permet à l'utilisateur de saisir des chiffres
- Button : augmenter ou niminuer la valeur
Input - Amount
- Input number/ Placeholder : permet à l'utilisateur de saisir des chiffres
- Unité
Input - OTP
- Groupe d'input number : permet à l'utilisateur de saisir les chiffres d'un code qu'il a reçu par mail ou sms
Usage
Quand l'utiliser ?
Lorsqu'il est nécessaire de récolter de la data provenant de l'utilisateur.
Le type d'input à choisir en fonction de la data attendue :
- Input - Text : pour récolter tout type d'informations textuelles classiques courtes ou longues (ex : nom, prénom, commentaire)
- Input - Phone number : pour récolter des numéros de téléphone
- Input - Button : lorsqu'il est nécessaire d'activer une action liée à la valeur renseignée (ex : valider un code promo, valider un OTP, s'inscrire à la newsletter…)
- Input - Suffix : lorsqu'il est nécessaire de voir ou choisir une unité
- Input - Quantity : pour récolter des quantités numériques.
- Input - Amount : pour récolter un montant
- Input - OTP : pour récolter un code reçu par mail ou sms
Do's and don'ts
-
Do
Utiliser un label significatif, clair et concis.
-
Don't
Éviter les labels trop longs, complexes ou confus.
-
Do
Les labels doivent suivre les règles d'usage classique des majuscules dans une phrase.
-
Don't
Il est interdit d'écrire les labels tout en majuscules.
-
Do
Rédiger des messages d'erreur qui sont clairs et expliquent clairement aux utilisateurs une solution.
-
Don't
Éviter les messages d'erreur génériques. Ils ne permettent pas toujours à l'utilisateur de comprendre et corriger son erreur.
-
Do
À la fin du formulaire, il est important que le call to action exprime clairement l'action qui se produira au clic de ce dernier.
-
Don't
Éviter les call to action de soumission de formulaire vague et générique.
-
Do
Il est nécessaire d'utiliser le bon type d'input pour le format de valeur attendu. Exemple : Input type phone number pour un numéro de téléphone
Des questions ou un feedback ?
N’hésitez pas à contacter la team Design System par mail.