Input

Le composant Input permet de récolter des informations saisies librement par l'utilisateur.

# Usage

Un input est un champ dans lequel les utilisateurs peuvent saisir du texte ou sélectionner une option ou un élément.

Quand utiliser

  • Input Selector : Champ de saisie permettant aux utilisateurs de choisir une option parmi une liste prédéfinie.

    • Vente : Sélectionner une catégorie de produit, une taille ou une couleur.
    • Assistance : Choisir une catégorie de problème ou un type de demande.
    • Application/Espace client : Sélectionner un type de service ou une période spécifique.
  • Input Text : Champ de saisie permettant aux utilisateurs de saisir du texte libre.

    • Vente : Ajouter des commentaires, envoyer des messages aux vendeurs.
    • Assistance : Décrire un problème, laisser des commentaires sur un article d'aide.
    • Application/Espace client : Modifier des informations personnelles, envoyer des messages au service client.
  • Input Password : Champ de saisie destiné à la saisie sécurisée de mots de passe.

    • Vente : Connexion ou création de compte.
    • Assistance : Connexion sécurisée à une section d'assistance personnalisée.
    • Application/Espace client : Connexion ou modification du mot de passe.

Quand ne pas utiliser

  • Actions non textuelles : Pour des actions qui ne nécessitent pas de saisie textuelle, utilisez plutôt des boutons, des cases à cocher ou des sélecteurs.
  • Données statiques : Pour afficher des données statiques ou non modifiables, utilisez des composants de texte ou des labels.
  • Choix limités : Pour des choix limités et prédéfinis, utilisez des composants de sélection comme des dropdowns ou des radio buttons.

# Do & Don't

Ne pas changer l’icone sur l’input search
Ne pas retirer l’icone qui permet d’afficher ou cacher le mot de passe
Indiquer les critères de complexité si il y en a
Ne pas retirer le label