---
title: "Éléments sélectionnables et groupes"
description: "Rendez des éléments sélectionnables, organisez-les en groupes et utilisez leur état dans les conditions du flow."
---

Les éléments sélectionnables sont des éléments du flow sur lesquels les utilisateurs peuvent appuyer pour les sélectionner ou les désélectionner. Leur état peut piloter la navigation, la visibilité et d'autres logiques dans le flow. Voici ce que vous pouvez faire :

- [Utiliser les éléments sélectionnables par défaut](#default-selectable-elements) — les options de quiz, les produits, les onglets et les bascules d'essai sont sélectionnables d'emblée
- [Rendre n'importe quel élément sélectionnable](#make-an-element-selectable) — transformez n'importe quel élément en élément sélectionnable et affectez-le à un groupe
- [Créer et gérer des groupes](#create-a-group) — organisez les éléments sélectionnables en groupes à choix unique, à choix multiple ou en bascule
- [Utiliser l'état sélectionné dans les conditions](#use-selectable-state-in-conditions) — référencez les valeurs de groupe dans les conditions sur n'importe quel écran du flow

## Éléments sélectionnables par défaut \{#default-selectable-elements\}

Certains types d'éléments sont sélectionnables par défaut — ils appartiennent déjà à des groupes créés automatiquement et ne nécessitent aucune configuration supplémentaire :

- **Options de quiz** : chaque réponse de quiz est un élément sélectionnable au sein du groupe de quiz. Voir [Quiz](onboarding-quizzes).
- **Produits** : les cartes produit dans un groupe de produits. Voir [Bloc produit](paywall-product-block).
- **Onglets** : les éléments d'onglet au sein d'un groupe d'onglets. Voir [Onglets](builder-tabs).
- **Bascules d'essai** : un conteneur qui appartient à un groupe et prend un état sélectionné. Voir [Bascules](builder-toggles).

## Rendre un élément sélectionnable \{#make-an-element-selectable\}

<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/btpZPOm9VRY?si=1P959iwNfIJ1ZP7N"
        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>

Dans certains cas, vous pourriez vouloir rendre des éléments supplémentaires sélectionnables. Par exemple, vous pouvez ajouter une case à cocher **Ne plus me demander** qui fonctionne comme un élément au sein d'un groupe de quiz.

Pour rendre un élément sélectionnable :

1. Sélectionnez l'élément sur l'écran ou dans le panneau **Layers**.
2. À droite, basculez vers le panneau **Interactions**.
3. Sélectionnez **Turn into selectable element**.

4. Dans le menu déroulant **Group**, sélectionnez un groupe existant ou [créez-en un nouveau](#create-a-group).
5. Définissez l'**Element ID** — un identifiant unique pour cet élément au sein du groupe.
6. Si vous souhaitez que cet élément soit sélectionné par défaut, cochez la case **Set as default in group**.

## Créer un groupe \{#create-a-group\}

Les groupes organisent les éléments sélectionnables sur un écran et définissent le fonctionnement de la sélection — choix unique, choix multiple ou bascule.

Pour créer un groupe :

1. Sélectionnez un élément et [rendez-le sélectionnable](#make-an-element-selectable).
2. Dans le menu déroulant **Group**, sélectionnez **Create group**.

3. Saisissez un **Group name**.
4. Sélectionnez le [type de groupe](#group-types).

Le groupe est maintenant disponible dans le menu déroulant **Group** pour les autres éléments sélectionnables du même écran.

## Types de groupes \{#group-types\}

:::important
La plupart des [préréglages de quiz](onboarding-quizzes) sont **multi-choice** par défaut. Modifiez le [type de groupe](#manage-groups) pour n'autoriser qu'une seule réponse.
:::

- **Single choice** : un seul élément du groupe peut être sélectionné à la fois. Sélectionner un nouvel élément désélectionne le précédent.
- **Multi-choice** : plusieurs éléments peuvent être sélectionnés simultanément.
- **Toggle** : chaque élément bascule entre sélectionné et désélectionné à chaque appui, indépendamment des autres éléments.

## Gérer les groupes \{#manage-groups\}

Pour afficher et modifier les groupes, ouvrez le panneau **Screen settings** et repérez la section **Selectable groups**. Elle liste tous les groupes de l'écran actuel.

Cliquez sur l'ID d'un groupe pour :

- Modifier l'ID du groupe
- Modifier le [type de groupe](#group-types)
- Voir comment les éléments du groupe sont référencés dans les conditions

## Utiliser l'état sélectionnable dans les conditions \{#use-selectable-state-in-conditions\}

Vous pouvez référencer l'état sélectionné d'un groupe dans les conditions sur n'importe quel écran du flow — pas seulement sur l'écran où le groupe est défini. Par exemple : `SI quiz.photo est sélectionné, ALORS naviguer vers l'écran Photo`.

:::important
Tous les éléments d'un groupe doivent se trouver sur le même écran. Vous ne pouvez pas ajouter des éléments provenant d'écrans différents à un même groupe. En revanche, vous pouvez référencer les valeurs de groupe dans les conditions sur n'importe quel écran du flow.
:::

Utilisez l'état sélectionnable avec :

- **[Actions conditionnelles](onboarding-actions#conditional-actions)** : orientez les utilisateurs vers différents écrans ou déclenchez différentes actions en fonction des éléments sélectionnés.
- **[Navigation dynamique](onboarding-navigation-branching)** : faites bifurquer le flow selon les réponses au quiz, les états des bascules ou d'autres sélections.
- **[Visibilité conditionnelle](onboarding-element-visibility)** : affichez ou masquez des éléments selon ce que les utilisateurs ont sélectionné sur les écrans précédents.