---
title: "Tabs"
description: "Ajoutez une navigation par onglets qui change les panneaux de contenu dans un flow."
---

**Tabs** divise une section d'écran en panneaux de contenu commutables — l'utilisateur appuie sur un en-tête d'onglet et le panneau en dessous se met à jour en conséquence.

{/* TODO: on-device GIF */}

## Ajouter, supprimer et sélectionner des onglets \{#add-remove-and-select-tabs\}

Chaque onglet est composé de deux parties

- **En-tête d'onglet** — le libellé cliquable (Tab 1, Tab 2, etc.).
- **Contenu de l'onglet** — un conteneur par onglet. Tout ce que vous placez dans un conteneur de contenu s'affiche lorsque son onglet est sélectionné.

Cliquez sur **Add tab** pour ajouter un nouvel onglet. Chaque nouvel onglet obtient un conteneur de contenu correspondant.

Pour qu'un onglet spécifique soit actif à l'affichage initial de l'écran, activez **Selected by default**.

## Styliser les onglets \{#style-the-tabs\}

### Templates \{#templates\}

Le Flow Builder propose trois templates d'onglets prêts à l'emploi :

- **Segment control** — un sélecteur en forme de pilule avec des coins arrondis autour de l'onglet sélectionné.
- **Button Tabs** — onglets distincts avec un style de bouton.
- **Underline** — libellés textuels avec un soulignement indiquant l'onglet sélectionné.

### États des onglets \{#tab-states\}

Chaque onglet individuel dispose d'un sélecteur d'état (**Default / Selected**) pour styliser séparément les états actif et inactif — typographie, couleurs, remplissage et bordure par état.

## Groupe sélectionnable \{#selectable-group\}

Les onglets forment un **groupe sélectionnable à choix unique** — exactement un onglet est actif à la fois. Gérez le groupe depuis le panneau **Screen settings**, dans la section [Selectable groups](paywall-layout-and-products#selectable-groups).

Le groupe expose deux variables :

- `tabs.selectedOptionId` — l'ID de l'onglet sélectionné. Utilisez-la dans les conditions.
- `tabs.selectedOptionTitle` — le libellé de l'onglet sélectionné. Utilisez-la dans le texte dynamique.

Remplacez `tabs` par votre **Group ID** personnalisé si vous avez renommé le groupe.

Consultez [Éléments et groupes sélectionnables](flow-selectable-elements) pour une vue d'ensemble complète.