---
title: "Estados de los elementos"
description: "Da estilo a los elementos según su estado y usa una condición para desactivar un elemento en tiempo de ejecución."
---

Los elementos interactivos del flow cambian su apariencia según las acciones del usuario: una opción de quiz seleccionada pasa a estado **Selected**, un campo enfocado pasa a estado **Active**. Algunos estados dependen de condiciones — por ejemplo, puedes **desactivar** un botón. Dale estilo a cada estado por separado para ofrecer retroalimentación visual sin necesidad de código en la app.
<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>
## Estados disponibles por tipo de elemento \{#available-states-by-element-kind\}

| Tipo de elemento | Estados integrados | Estados añadibles |
|---|---|---|
| [Elementos seleccionables](#selectable-element-states) | **Default**, **Selected** | **Disabled** |
| [Inputs](#input-states) | **Default**, **Active**, **Invalid** | **Disabled** |
| [Cualquier elemento con interacción táctil](#condition-driven-disabled-state) — botones, imágenes, iconos, stacks, etc. | **Default** | **Disabled** |
| [Pasos del indicador de progreso](#step-states-for-progress-indicators) | **Completed**, **Current**, **Upcoming** | — |
Los estados **Addable** no aparecen por defecto — abre **States settings** Settings para añadirlos. Son [**controlados por condición**](#condition-driven-disabled-state): tú defines cuándo se activan.
## Cómo aplicar estilos a un estado \{#how-to-style-a-state\}

1. Selecciona un elemento. La sección **States** del panel derecho muestra los estados que admite ese elemento.
2. En la sección **States**, activa el estado deseado. Añade el [estado Disabled por condición](#condition-driven-disabled-state) si es necesario.
3. Cambia cualquier propiedad (relleno, borde, tipografía, contenido de texto, etc.). El cambio se aplica únicamente a ese estado.
Nested elements become stateful alongside the parent. Any change to a child — colors, layouts, text content — is scoped to the parent's active state.

4. The Builder applies the matching style at runtime.

:::tip
Un estado puede cambiar *qué* dice un elemento de texto, no solo cómo se ve. El Builder trata el contenido de texto como una propiedad más, igual que el relleno o el grosor del borde.
:::
## Estados de los elementos seleccionables \{#selectable-element-states\}

Los elementos seleccionables — opciones de quiz, productos, pestañas, toggles de prueba y cualquier [elemento seleccionable personalizado](flow-selectable-elements#make-an-element-selectable) — tienen dos estados por defecto:

- **Default**: La apariencia en reposo del elemento.
- **Selected**: Se aplica cuando el usuario toca el elemento. El Builder vuelve a Default cuando el usuario lo deselecciona.
En un grupo de selección única, elegir un elemento deselecciona los demás. Los grupos de selección múltiple permiten que varios estén seleccionados al mismo tiempo. Los toggles son independientes: seleccionar uno no afecta a sus hermanos. Consulta [tipos de grupo](flow-selectable-elements#group-types).

:::tip
¿Necesitas aplicar el mismo estilo de estado a varios elementos (por ejemplo, opciones de un quiz)? Estiliza primero un elemento y luego duplícalo. El estilo de estado no se transfiere entre elementos hermanos — la duplicación es el método alternativo por ahora.
:::
## Estados del input \{#input-states\}

- **Default**: El aspecto predeterminado del input en reposo.
- **Active**: Se aplica mientras el input está enfocado.
- **Invalid**: Se aplica cuando el contenido del input no supera la validación. Por ejemplo, cuando un campo de email no contiene `@`. Consulta [Validación de inputs](builder-inputs-and-forms#input-validation).
- **Disabled**: El input no es interactivo. Añade este estado manualmente; consulta [Estado Disabled por condición](#condition-driven-disabled-state).

Estiliza cada estado igual que un elemento seleccionable: activa el estado objetivo y cambia las propiedades.
## Estado Desactivado basado en condiciones \{#condition-driven-disabled-state\}

El estado Desactivado impide que el usuario interactúe con un elemento. A diferencia de Default, Selected, Active o Invalid, el estado Disabled no se activa por sí solo — requiere una condición definida por el usuario.

Disabled está disponible en:
- **Entradas**: Cualquier [campo de entrada](builder-inputs-and-forms) — texto, correo electrónico, contraseña, número, teléfono, fecha y/o hora.
- **Elementos seleccionables**: Opciones de quiz, productos, pestañas, interruptores de prueba y cualquier [elemento seleccionable personalizado](flow-selectable-elements#make-an-element-selectable).
- **Cualquier elemento con interacción de toque**: Por ejemplo, un botón, imagen o icono que activa una acción de navegación.
### Añadir el estado Disabled \{#add-the-disabled-state\}

Para añadir y configurar un estado Disabled:
1. Selecciona el elemento de destino.
2. En la sección **States**, haz clic en **Settings** Settings.
3. Elige **Add Disabled state**. El estado Disabled aparece en la sección **States**.
4. Junto al nuevo estado Disabled, haz clic en **Edit conditional state** Edit conditional state.
5. Añade una condición. Si quieres desactivar el botón **submit** a menos que el input supere la validación, compara la variable `isValid` del input con `false`.
6. Dale estilo al estado Disabled para comunicar visualmente la restricción (por ejemplo, reduce la opacidad).
{ }

El SDK de Adapty evalúa la condición en tiempo de ejecución y aplica el estado Disabled cuando corresponde, sin necesidad de código adicional en la app.
## Estados de paso para indicadores de progreso \{#step-states-for-progress-indicators\}

:::link
Artículo principal: [Indicadores de progreso](builder-loaders-and-progress-bars#step-states)
:::

Los indicadores de progreso muestran a los usuarios hasta dónde han llegado en un flow de onboarding. Cada paso tiene tres estados:

- **Completado**: Los pasos que el usuario ya ha superado.
- **Actual**: El paso en el que se encuentra el usuario en ese momento.
- **Próximo**: Los pasos a los que el usuario aún no ha llegado.