---
title: "États des éléments"
description: "Stylisez les éléments selon leur état et utilisez une condition pour désactiver un élément au moment de l'exécution."
---

Les éléments interactifs d'un flow changent d'apparence selon les actions de l'utilisateur : une option de quiz appuyée devient **Selected**, un champ de saisie actif devient **Active**. Certains états sont pilotés par des conditions — par exemple, vous pouvez **désactiver** un bouton. Stylisez chaque état séparément pour donner un retour visuel aux utilisateurs sans écrire de code dans l'application.

<div style={{
  maxWidth: '560px',
  margin: '0 auto 2rem',
  position: 'relative',
  aspectRatio: '16/9',
  width: '100%'
}}>
  <iframe
    style={{
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%'
    }}
    src="https://www.youtube.com/embed/gdsNfHpKAqQ?si=VY5mqZgH1j0RB6fE"
    title="YouTube video player"
    frameBorder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    referrerPolicy="strict-origin-when-cross-origin"
    allowFullScreen
  />
</div>

## États disponibles selon le type d'élément \{#available-states-by-element-kind\}

| Type d'élément | États intégrés | États ajoutables |
|---|---|---|
| [Éléments sélectionnables](#selectable-element-states) | **Default**, **Selected** | **Disabled** |
| [Inputs](#input-states) | **Default**, **Active**, **Invalid** | **Disabled** |
| [Tout élément avec une interaction tactile](#condition-driven-disabled-state) — boutons, images, icônes, conteneurs, etc. | **Default** | **Disabled** |
| [Étapes d'un indicateur de progression](#step-states-for-progress-indicators) | **Completed**, **Current**, **Upcoming** | — |

Les états **Ajoutables** n'apparaissent pas par défaut — ouvrez **States settings** Settings pour les ajouter. Ils sont [**pilotés par des conditions**](#condition-driven-disabled-state) : vous définissez quand ils s'activent.

## Comment styliser un état \{#how-to-style-a-state\}

1. Sélectionnez un élément. La section **States** dans le panneau de droite liste les états pris en charge par cet élément.
2. Dans la section **States**, activez l'état cible. Ajoutez l'[état Disabled piloté par condition](#condition-driven-disabled-state) si nécessaire.
3. Modifiez n'importe quelle propriété — remplissage, bordure, typographie, etc. La modification est limitée à cet état.

    Les éléments imbriqués deviennent eux aussi avec état en même temps que le parent. Toute modification apportée à un enfant est limitée à l'état actif du parent.

4. Le Builder applique le style correspondant au moment de l'exécution.

## États des éléments sélectionnables \{#selectable-element-states\}

Les éléments sélectionnables — options de quiz, produits, onglets, bascules d'essai et tout [élément sélectionnable personnalisé](flow-selectable-elements#make-an-element-selectable) — disposent de deux états par défaut :

- **Default** : L'apparence au repos de l'élément.
- **Selected** : S'applique lorsque l'utilisateur appuie sur l'élément. Le Builder revient à Default lorsque l'utilisateur désélectionne l'élément.

Dans un groupe à choix unique, sélectionner un élément désélectionne les autres. Les groupes à choix multiple permettent à plusieurs éléments d'être Selected en même temps. Les bascules sont indépendantes — en sélectionner une n'affecte pas ses voisines. Voir [types de groupes](flow-selectable-elements#group-types).

:::tip
Besoin de styliser le même état pour plusieurs éléments (par exemple, des options de quiz) ? Stylisez d'abord un élément, puis dupliquez-le. Le style d'état ne se propage pas entre les éléments frères — la duplication est le contournement actuel.
:::

## États des inputs \{#input-states\}

- **Default** : L'apparence au repos du champ de saisie.
- **Active** : S'applique pendant que le champ est actif.
- **Invalid** : S'applique lorsque le contenu du champ ne passe pas la validation. Par exemple, quand un champ e-mail ne contient pas `@`. Voir [Validation des inputs](builder-inputs-and-forms#input-validation).
- **Disabled** : Le champ n'est pas interactif. Ajoutez cet état manuellement ; voir [État Disabled piloté par condition](#condition-driven-disabled-state).

Stylisez chaque état de la même façon qu'un élément sélectionnable : activez l'état cible, modifiez les propriétés.

## État Disabled piloté par condition \{#condition-driven-disabled-state\}

L'état Disabled empêche l'utilisateur d'interagir avec un élément. Contrairement à Default, Selected, Active ou Invalid, l'état Disabled ne s'active pas tout seul — il nécessite une condition déclencheur définie par l'utilisateur.

Disabled est disponible sur :

- **Inputs** : Tout [champ de saisie](builder-inputs-and-forms) — texte, e-mail, mot de passe, nombre, téléphone, date et/ou heure.
- **Éléments sélectionnables** : Options de quiz, produits, onglets, bascules d'essai et tout [élément sélectionnable personnalisé](flow-selectable-elements#make-an-element-selectable).
- **Tout élément avec une interaction tactile** : Par exemple, un bouton, une image ou une icône qui déclenche une action de navigation.

### Ajouter l'état Disabled \{#add-the-disabled-state\}

Pour ajouter et configurer un état Disabled :

1. Sélectionnez l'élément cible.
2. Dans la section **States**, cliquez sur **Settings** Settings.
3. Choisissez **Add Disabled state**. L'état Disabled apparaît dans la section **States**.
4. À côté du nouvel état Disabled, cliquez sur **Edit conditional state** Edit conditional state.
5. Ajoutez une condition. Si vous souhaitez désactiver le bouton **submit** tant que le champ ne passe pas la validation, comparez la variable `isValid` du champ à `false`.
6. Stylisez l'état Disabled pour communiquer visuellement la restriction (par exemple, réduisez l'opacité).

{ }

Le SDK Adapty évalue la condition au moment de l'exécution et applique l'état Disabled le cas échéant — aucun code dans l'application n'est nécessaire.

## États des étapes pour les indicateurs de progression \{#step-states-for-progress-indicators\}

:::link
Article principal : [Indicateurs de progression](builder-loaders-and-progress-bars#step-states)
:::

Les indicateurs de progression montrent aux utilisateurs où ils en sont dans un flow d'onboarding. Chaque étape dispose de trois états :

- **Completed** : Les étapes que l'utilisateur a déjà franchies.
- **Current** : L'étape en cours de l'utilisateur.
- **Upcoming** : Les étapes que l'utilisateur n'a pas encore atteintes.