Utilisez les inputs pour collecter des données saisies par les utilisateurs — comme un nom, une adresse e-mail ou une date de naissance. Stockez les réponses et référencez-les ailleurs dans le flow, par exemple pour s’adresser à l’utilisateur par son nom sur un écran ultérieur.

Ajouter un champ de saisie

1. Cliquez sur + en haut à gauche.
2. Sélectionnez Input.
3. Choisissez le type de saisie :
   • Text : Toute saisie de texte court.
   • Email : Adresses e-mail, avec validation de format optionnelle.
   • Password : Saisie de texte sécurisée, avec des exigences configurables.
   • Number : Valeurs numériques, avec format configurable.
   • Phone number : Numéros de téléphone.
   • Date : Ouvre un sélecteur de date.
   • Time : Ouvre un sélecteur d’heure.
   • Date and time : Ouvre un sélecteur combiné.

Configurer une entrée

Pour tous les types d’entrée, vous pouvez configurer les éléments suivants dans l’onglet Design :

• Type : Choisissez le type de saisie (Text, Email, Password, Number, Phone number, Date, Time ou Date and time).
• Element ID : Identifiant utilisé pour référencer la valeur du champ ailleurs dans le flow. Voir Utiliser les valeurs des champs ci-dessous.
• Placeholder : Texte indicatif affiché dans le champ vide.
• State : Définissez l’apparence du champ selon les situations. Passez entre Default, Active, Invalid et Disabled pour appliquer des styles visuels différents à chacun.
• Typography : Mise en forme du texte affiché dans le champ.
• Leading and trailing icons : Ajoutez des icônes à l’intérieur du champ de saisie.

Certains paramètres sont propres à certains types d’entrée :

Paramètre	Types de champs
Bouton Effacer	Texte, E-mail
Valider le format de l’e-mail	E-mail
Afficher l’icône du mot de passe	Mot de passe
Modifier les exigences du mot de passe	Mot de passe
Format numérique	Nombre
Format date/heure	Date, Heure, Date et heure
Date min et max	Date, Date et heure

Utiliser les valeurs de saisie

Chaque champ de saisie est automatiquement disponible en tant que variable — aucune configuration ni action On Submit n’est requise. La valeur est référencée via l’Element ID du champ, que vous définissez dans Input Settings.

Pour utiliser la valeur d’un champ de saisie ailleurs dans le flow (par exemple pour personnaliser un texte, remplir un autre champ ou déclencher une navigation conditionnelle), insérez une variable et choisissez :

Element > Screen > <elementId>.value

Validation des entrées

Le comportement de validation dépend du type d’entrée. Chaque entrée expose une variable booléenne en lecture seule, <elementId>.isValid, qui indique si la valeur saisie respecte les règles de validation de l’entrée. Utilisez-la dans des actions conditionnelles ou une visibilité conditionnelle — par exemple, pour masquer un bouton Suivant tant que le format d’un e-mail n’est pas valide.

Type de saisie	Comportement de validation
Texte	Aucune règle de validation intégrée.
E-mail	Facultatif. Activez Validate email format dans le panneau Design pour vérifier que la valeur saisie correspond au format d’un e-mail.
Numéro de téléphone	Vérification intégrée du format de numéro de téléphone. Non configurable dans le Builder — la règle est évaluée à l’exécution.
Mot de passe	Configurable. Voir Exigences relatives au mot de passe ci-dessous.
Nombre	Basé sur le format. La valeur saisie doit correspondre au format de nombre sélectionné. Voir Format de nombre ci-dessous.
Date, Heure, Date et heure	Intégré. Le sélecteur n’accepte que des valeurs de date ou d’heure valides.

L’état visuel Invalid s’active lorsque l’utilisateur soumet le formulaire — par exemple en appuyant sur Entrée ou sur Terminé sur le clavier. Jusqu’à ce moment, le champ affiche l’état Active ou Default.

Exigences relatives au mot de passe

Les champs de mot de passe prennent en charge des règles de validation configurables. Cliquez sur Edit password requirements dans le panneau Design pour ouvrir l’éditeur de règles. Les règles activées s’affichent sous forme de liste de contrôle dynamique sous le champ — chaque élément est coché dès que sa règle est satisfaite.

Règles disponibles :

• Min length — nombre minimum de caractères. Par défaut : 8.
• Max length — nombre maximum de caractères. Par défaut : 32.
• Uppercase letter — au moins une lettre A–Z.
• Lowercase letter — au moins une lettre a–z.
• Number — au moins un chiffre.
• Special character — au moins un caractère non alphanumérique (par exemple, !@#$%).

Le mot de passe est valide uniquement lorsque toutes les règles activées sont respectées.

Format des nombres

Le menu déroulant Format dans les paramètres de saisie Number détermine comment la valeur saisie est interprétée :

• Integer — nombres entiers uniquement (par exemple, 4).
• Decimal (Point) — décimaux avec un point comme séparateur (par exemple, 4.89).
• Decimal (Comma) — décimaux avec une virgule comme séparateur (par exemple, 4,89).

Les valeurs qui ne correspondent pas au format sélectionné sont considérées comme invalides.

Déclencher des actions sur des événements d’entrée

Vous pouvez exécuter des actions en réponse aux saisies de l’utilisateur via le panneau Interactions :

• On changed — se déclenche quand l’utilisateur modifie la valeur du champ. Disponible sur tous les types de champs.
• On submit — se déclenche quand l’utilisateur valide un champ texte en appuyant sur Entrée ou Terminé sur le clavier. Les sélecteurs de date et d’heure ne disposent pas de ce déclencheur.