---
title: "Elementos seleccionables y grupos"
description: "Haz que los elementos sean seleccionables, organízalos en grupos y usa su estado en condiciones a lo largo del flow."
---

Los elementos seleccionables son elementos del flow que los usuarios pueden pulsar para seleccionar o deseleccionar. Su estado puede controlar la navegación, la visibilidad y otra lógica a lo largo del flow. Esto es lo que puedes hacer:
- [Usar elementos seleccionables por defecto](#default-selectable-elements) — las opciones de quiz, productos, pestañas y toggles de prueba son seleccionables de serie
- [Hacer cualquier elemento seleccionable](#make-an-element-selectable) — convierte cualquier elemento en seleccionable y asígnalo a un grupo
- [Crear y gestionar grupos](#create-a-group) — organiza los elementos seleccionables en grupos de selección única, selección múltiple o toggle
- [Usar el estado seleccionado en condiciones](#use-selectable-state-in-conditions) — referencia los valores de grupo en condiciones de cualquier pantalla del flow
## Elementos seleccionables por defecto \{#default-selectable-elements\}

Algunos tipos de elementos son seleccionables por defecto: ya pertenecen a grupos creados automáticamente y no necesitan configuración adicional:

- **Opciones de quiz**: Cada respuesta de un quiz es un elemento seleccionable dentro del grupo del quiz. Consulta [Quizzes](onboarding-quizzes).
- **Productos**: Tarjetas de producto dentro de un grupo de productos. Consulta [Bloque de producto](paywall-product-block).
- **Pestañas**: Elementos de pestaña dentro de un grupo de pestañas. Consulta [Pestañas](builder-tabs).
- **Toggles de prueba**: Un contenedor que pertenece a un grupo y adquiere un estado seleccionado. Consulta [Toggles](builder-toggles).
## Hacer un elemento seleccionable \{#make-an-element-selectable\}

En algunos casos, puede que quieras hacer que elementos adicionales sean seleccionables. Por ejemplo, puedes añadir una casilla **No volver a preguntar** que funcione como un elemento dentro de un grupo de quiz.

Para hacer un elemento seleccionable:

1. Selecciona el elemento en la pantalla o en el panel **Layers**.
2. A la derecha, cambia al panel **Interactions**.
3. Selecciona **Turn into selectable element**.

4. En el desplegable **Group**, selecciona un grupo existente o [crea uno nuevo](#create-a-group).
5. Establece el **Element ID** — un identificador único para este elemento dentro del grupo.
6. Si quieres que este elemento esté seleccionado por defecto, marca la casilla **Set as default in group**.

## Crear un grupo \{#create-a-group\}

Los grupos organizan los elementos seleccionables de una pantalla y definen cómo funciona la selección: si los usuarios pueden elegir una opción, varias opciones o activar/desactivar.

Para crear un grupo:

1. Selecciona un elemento y [hazlo seleccionable](#make-an-element-selectable).
2. En el desplegable **Group**, selecciona **Create group**.

3. Introduce un **Group name**.
4. Selecciona el [tipo de grupo](#group-types).

El grupo ya estará disponible en el desplegable **Group** para otros elementos seleccionables de la misma pantalla.

## Tipos de grupo \{#group-types\}

:::important
La mayoría de los [presets de quiz](onboarding-quizzes) son de **opción múltiple** por defecto. Cambia el [tipo de grupo](#manage-groups) para permitir solo una respuesta.
:::

- **Opción única**: Solo se puede seleccionar un elemento del grupo a la vez. Al seleccionar uno nuevo, se deselecciona el anterior.
- **Opción múltiple**: Se pueden seleccionar varios elementos al mismo tiempo.
- **Toggle**: Cada elemento alterna entre seleccionado y deseleccionado en cada toque, de forma independiente a los demás.
## Gestionar grupos \{#manage-groups\}

Para ver y editar grupos, abre el panel **Screen settings** y busca la sección **Selectable groups**. Aquí aparecen todos los grupos de la pantalla actual.

Haz clic en el ID de un grupo para:

- Cambiar el ID del grupo
- Cambiar el [tipo de grupo](#group-types)
- Ver cómo se referencian los elementos del grupo en las condiciones

## Usar el estado de selección en condiciones \{#use-selectable-state-in-conditions\}

Puedes referenciar el estado de selección de un grupo en condiciones de cualquier pantalla del flow, no solo en la pantalla donde está definido el grupo. Por ejemplo: `IF quiz.photo is selected, THEN navigate to the Photo screen`.

:::important
Todos los elementos de un grupo deben estar en la misma pantalla. No puedes añadir elementos de diferentes pantallas a un mismo grupo. Sin embargo, puedes referenciar los valores del grupo en condiciones de cualquier pantalla del flow.
:::

Usa el estado de selección con:
- **[Acciones condicionales](onboarding-actions#conditional-actions)**: Redirige a los usuarios a distintas pantallas o activa diferentes acciones según los elementos seleccionados.
- **[Navegación dinámica](onboarding-navigation-branching)**: Ramifica el flow según las respuestas a un quiz, los estados de los toggles u otras selecciones.
- **[Visibilidad condicional](onboarding-element-visibility)**: Muestra u oculta elementos según lo que los usuarios hayan seleccionado en pantallas anteriores.