Champs de saisie et formulaires dans le Flow Builder

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

Ajouter un champ de saisie

Cliquez sur + en haut à gauche.
Sélectionnez Input.
Choisissez le type de champ :
- Text : Toute saisie courte de texte.
- Email : Adresses e-mail, avec validation de format optionnelle.
- Password : Saisie 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 un champ de saisie

Pour plus de détails sur les paramètres visuels — mise en page, style et visibilité — consultez Styles et apparence.

Pour tous les types de champ, vous pouvez configurer les éléments suivants dans l’onglet Design :

Type : Modifiez le type de champ (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é à l’intérieur du champ vide.
State : Définissez l’apparence du champ selon les situations. Basculez entre Default, Active, Invalid et Disabled pour appliquer des visuels différents à chacun.
Typography : Style de texte pour la valeur affichée dans le champ.
Leading and trailing icons : Ajoutez des icônes à l’intérieur du champ.

Certains paramètres sont spécifiques à certains types de champ :

Paramètre	Types de champ
Clear button	Text, Email
Validate email format	Email
Show password icon	Password
Edit password requirements	Password
Number format	Number
Date/time format	Date, Time, Date and time
Min and max date	Date, Date and time

Utiliser les valeurs des champs

Chaque champ de saisie est automatiquement disponible en tant que variable — aucune configuration ni action On Submit n’est nécessaire. 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 ailleurs dans le flow (par exemple pour personnaliser un texte, remplir un autre champ ou piloter une navigation conditionnelle), insérez une variable et choisissez :

Element > Screen > <elementId>.value

Consultez les guides correspondants pour comprendre comment utiliser les valeurs de champs enregistrées :

Validation des champs

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

La variable isValid est en lecture seule — vous ne pouvez pas la modifier.
Un champ vide est toujours considéré comme valide.
Les champs texte n’ont pas de règles de validation. textInput.isValid retourne toujours True.

Type de champ	Comportement de validation
Text	Aucune règle de validation intégrée.
Email	Optionnelle. Activez Validate email format dans le panneau Design pour vérifier que la valeur saisie respecte le format d’une adresse e-mail.
Phone number	Vérification du format de numéro de téléphone intégrée. Non configurable dans le Builder — la règle est évaluée à l’exécution.
Password	Configurable. Voir Exigences de mot de passe ci-dessous.
Number	Basée sur le format. La valeur saisie doit correspondre au format de nombre sélectionné. Voir Format de nombre ci-dessous.
Date, Time, Date and time	Intégrée. 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 Terminé sur le clavier. Jusqu’à ce moment, le champ affiche l’état Active ou Default.

Exigences de mot de passe

Les champs de type 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 un caractère A–Z.
Lowercase letter — au moins un caractère 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 satisfaites.

Format de nombre

Le menu déroulant Format dans les paramètres du champ Number contrôle la façon dont 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 les événements de saisie

Article principal : Actions

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

On changed — se déclenche lorsque l’utilisateur modifie la valeur du champ. Disponible pour tous les types de champ.
On submit — se déclenche lorsque l’utilisateur soumet 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.