---
title: "Tabs"
description: "Añade navegación por pestañas que intercambia paneles de contenido en un flow."
---

**Tabs** divide una sección de pantalla en paneles de contenido intercambiables: el usuario toca un encabezado de pestaña y el panel inferior se actualiza para coincidir.

{/* TODO: on-device GIF */}
## Añadir, eliminar y seleccionar pestañas \{#add-remove-and-select-tabs\}

Cada pestaña tiene dos partes:

- **Encabezado de pestaña** — la etiqueta en la que se hace clic (Tab 1, Tab 2, etc.).
- **Contenido de pestaña** — un contenedor por pestaña. Lo que pongas en un contenedor de contenido aparece cuando se selecciona esa pestaña.

Haz clic en **Add tab** para añadir una nueva pestaña. Cada nueva pestaña genera su propio contenedor de contenido.

Para que una pestaña concreta esté activa al cargar la pantalla, activa **Selected by default**.
## Dar estilo a las pestañas \{#style-the-tabs\}
### Plantillas \{#templates\}

El Flow Builder ofrece tres plantillas de pestañas listas para usar:

- **Segment control** — un selector con forma de píldora y esquinas redondeadas alrededor de la pestaña seleccionada.
- **Button Tabs** — pestañas con estilo de botón independientes.
- **Underline** — etiquetas de texto con un subrayado que marca la pestaña seleccionada.
### Estados de las pestañas \{#tab-states\}

Cada pestaña tiene un selector de estado (**Default / Selected**) para aplicar estilos distintos al estado activo e inactivo: tipografía, colores, relleno y borde por estado.
## Grupo seleccionable \{#selectable-group\}

Las pestañas son un **grupo seleccionable de elección única** — exactamente una pestaña está activa a la vez. Gestiona el grupo desde el panel **Screen settings**, en la sección [Selectable groups](paywall-layout-and-products#selectable-groups).

El grupo expone dos variables:

- `tabs.selectedOptionId` — el ID de la pestaña seleccionada. Úsalo en condiciones.
- `tabs.selectedOptionTitle` — la etiqueta de la pestaña seleccionada. Úsalo en texto dinámico.

Reemplaza `tabs` con tu **Group ID** personalizado si renombraste el grupo.

Consulta [Selectable elements and groups](flow-selectable-elements) para ver el panorama completo.