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.

Estados disponibles por tipo de elemento

Tipo de elemento	Estados integrados	Estados añadibles
Elementos seleccionables	Default, Selected	Disabled
Inputs	Default, Active, Invalid	Disabled
Cualquier elemento con interacción táctil — botones, imágenes, iconos, stacks, etc.	Default	Disabled
Pasos del indicador de progreso	Completed, Current, Upcoming	—
Los estados Addable no aparecen por defecto — abre States settings para añadirlos. Son controlados por condición: tú defines cuándo se activan.

Cómo aplicar estilos a un estado

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 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.

Estados de los elementos seleccionables

Los elementos seleccionables — opciones de quiz, productos, pestañas, toggles de prueba y cualquier elemento seleccionable personalizado — 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.

Estados del input

• 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.
• Disabled: El input no es interactivo. Añade este estado manualmente; consulta Estado Disabled por condición.

Estiliza cada estado igual que un elemento seleccionable: activa el estado objetivo y cambia las propiedades.

Estado Desactivado basado en condiciones

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 — 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.
• 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

Para añadir y configurar un estado Disabled:

1. Selecciona el elemento de destino.
2. En la sección States, haz clic en 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 .
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

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.