---
title: "Inputs y formularios en el Flow Builder"
description: "Añade elementos de formulario interactivos como campos de texto y casillas de verificación."
---

Usa inputs para recopilar datos introducidos por los usuarios, como un nombre, una dirección de correo electrónico o una fecha de nacimiento. Guarda las respuestas y referencíalas en cualquier otra parte del flow, por ejemplo, para dirigirte al usuario por su nombre en una pantalla posterior.
## Añadir un campo de entrada \{#add-an-input\}

1. Haz clic en **+** en la parte superior izquierda.
2. Selecciona **Input**.
3. Elige el tipo de campo de entrada:
   - **Text:** Cualquier texto corto.
   - **Email:** Direcciones de correo electrónico, con validación de formato opcional.
   - **Password:** Entrada de texto seguro, con requisitos configurables.
   - **Number:** Valores numéricos, con formato configurable.
   - **Phone number:** Números de teléfono.
   - **Date:** Abre un selector de fecha.
   - **Time:** Abre un selector de hora.
   - **Date and time:** Abre un selector combinado.
## Configurar un campo de entrada \{#configure-an-input\}

:::link
Para más detalles sobre los ajustes visuales —diseño, estilo y visibilidad— consulta [Estilos y apariencia](builder-styling).
:::

Para todos los tipos de campos de entrada, puedes configurar lo siguiente en la pestaña **Design**:
- **Type:** Cambia el tipo de entrada (Text, Email, Password, Number, Phone number, Date, Time o Date and time).
- **Element ID:** Identificador para referenciar el valor del campo en otras partes del flow. Consulta [Usar valores de entrada](#use-input-values) más abajo.
- **Placeholder:** Texto de ayuda que se muestra dentro del campo vacío.
- **State:** Define el aspecto del campo en distintas situaciones. Alterna entre **Default**, **Active**, **Invalid** y **Disabled** y aplica diferentes estilos visuales a cada uno.
- **Typography:** Estilo del texto del valor mostrado en el campo.
- **Leading and trailing icons:** Añade iconos dentro del campo de entrada.

Algunos ajustes son específicos de determinados tipos de entrada:
| Ajuste                          | Tipos de entrada               |
|---------------------------------|-------------------------------|
| Botón para borrar               | Texto, Correo electrónico     |
| Validar formato de correo       | Correo electrónico            |
| Icono de mostrar contraseña     | Contraseña                    |
| Editar requisitos de contraseña | Contraseña                    |
| Formato de número               | Número                        |
| Formato de fecha/hora           | Fecha, Hora, Fecha y hora     |
| Fecha mínima y máxima           | Fecha, Fecha y hora           |

## Usar los valores de los campos de entrada \{#use-input-values\}

Cada campo de entrada está disponible automáticamente como variable, sin necesidad de configuración ni de una acción **On Submit**. El valor se referencia mediante el **Element ID** del campo, que defines en **Input Settings**.

Para usar el valor de un campo en otro punto del flow (por ejemplo, para personalizar texto, rellenar otro campo o controlar la navegación condicional), inserta una variable y elige:

**Element > Screen > `<elementId>.value`**
:::link
Consulta las guías correspondientes para entender cómo usar los valores de entrada guardados:
- [Navegación condicional](onboarding-navigation-branching)
- [Variables](onboarding-variables)
:::
## Validación de inputs \{#input-validation\}

El comportamiento de validación depende del tipo de input. Cada input expone una variable booleana de solo lectura, `<elementId>.isValid`, que indica si el valor introducido supera las reglas de validación del input. Úsala en acciones condicionales o visibilidad condicional — por ejemplo, para ocultar un botón Siguiente hasta que el formato de un correo electrónico sea válido.

:::note
- La variable `isValid` es de solo lectura — no se puede modificar.
- Un input vacío siempre se considera válido.
- Los inputs de texto no tienen reglas de validación. `textInput.isValid` siempre devuelve `True`.
:::
| Tipo de entrada | Comportamiento de validación |
|---|---|
| Texto | Sin reglas de validación integradas. |
| Correo electrónico | Opcional. Activa **Validate email format** en el panel **Design** para comprobar que el valor introducido tiene formato de correo electrónico. |
| Número de teléfono | Verificación de formato de número de teléfono integrada. No es configurable en el Builder: la regla se evalúa en tiempo de ejecución. |
| Contraseña | Configurable. Consulta [Requisitos de contraseña](#password-requirements) a continuación. |
| Número | Basado en formato. El valor introducido debe coincidir con el formato de número seleccionado. Consulta [Formato de número](#number-format) a continuación. |
| Fecha, Hora, Fecha y hora | Integrado. El selector solo acepta valores de fecha u hora válidos. |
El [estado visual](builder-styling#input-states) **Invalid** se activa cuando el usuario envía el formulario, por ejemplo, al pulsar Intro o «Listo» en el teclado. Hasta ese momento, el campo muestra el estado **Active** o **Default**.
### Requisitos de contraseña \{#password-requirements\}

Los campos de contraseña admiten reglas de validación configurables. Haz clic en **Edit password requirements** en el panel **Design** para abrir el editor de reglas. Las reglas activadas se muestran como una lista de verificación en tiempo real debajo del campo: cada elemento recibe una marca de verificación en el momento en que se cumple su regla.

Reglas disponibles:
- **Min length** — número mínimo de caracteres. Por defecto: 8.
- **Max length** — número máximo de caracteres. Por defecto: 32.
- **Uppercase letter** — al menos una letra de A a Z.
- **Lowercase letter** — al menos una letra de a a z.
- **Number** — al menos un dígito.
- **Special character** — al menos un carácter no alfanumérico (por ejemplo, `!@#$%`).

La contraseña es válida únicamente cuando se cumplen todas las reglas habilitadas.
### Formato de número \{#number-format\}

El menú desplegable **Format** en la configuración de entrada **Number** controla cómo se interpreta el valor introducido:

- **Integer** — solo números enteros (por ejemplo, `4`).
- **Decimal (Point)** — decimales con punto como separador (por ejemplo, `4.89`).
- **Decimal (Comma)** — decimales con coma como separador (por ejemplo, `4,89`).

Los valores que no coincidan con el formato seleccionado se consideran inválidos.
## Activar acciones ante eventos de entrada \{#trigger-actions-on-input-events\}

:::link
Artículo principal: [Acciones](onboarding-actions)
:::

Puedes ejecutar acciones en respuesta a la interacción del usuario mediante el panel **Interactions**:

- **On changed** — se activa cuando el usuario cambia el valor del campo. Disponible en todos los tipos de entrada.
- **On submit** — se activa cuando el usuario envía un campo de texto pulsando Intro o Listo en el teclado. Los selectores de fecha y hora no tienen este disparador.