---
title: "Champs de saisie et formulaires dans le Flow Builder"
description: "Ajoutez des éléments de formulaire interactifs comme des champs texte et des cases à cocher."
---

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 \{#add-an-input\}

1. Cliquez sur **+** en haut à gauche.
2. Sélectionnez **Input**.
3. 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 \{#configure-an-input\}

:::link
Pour plus de détails sur les paramètres visuels — mise en page, style et visibilité — consultez [Styles et apparence](builder-styling).
:::

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](#use-input-values) 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 \{#use-input-values\}

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`**

:::link
Consultez les guides correspondants pour comprendre comment utiliser les valeurs de champs enregistrées :
- [Navigation conditionnelle](onboarding-navigation-branching)
- [Variables](onboarding-variables)
:::

## Validation des champs \{#input-validation\}

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.

:::note
- 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](#password-requirements) ci-dessous. |
| Number | Basée sur le format. La valeur saisie doit correspondre au format de nombre sélectionné. Voir [Format de nombre](#number-format) 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](builder-styling#input-states) **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 \{#password-requirements\}

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 \{#number-format\}

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 \{#trigger-actions-on-input-events\}

:::link
Article principal : [Actions](onboarding-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.