> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
> Conozca los nodos de formularios y los componentes disponibles.
# Nodos y componentes
Forms le permite agregar nodos y componentes, como campos, bloques y widgets, para que sus usuarios interactúen con el formulario. Después, puede hacer referencia a los datos introducidos en los componentes dentro de sus formularios y flujos.
## Nodos de formulario
Hay cinco tipos de nodos de formulario: Inicio, Paso, Flujo, Enrutador y pantalla de finalización. Estos nodos cumplen una función muy específica dentro de la estructura del formulario.
## Nodo de paso
Los nodos de paso son la representación visual del formulario. Pueden contener cualquier cantidad de componentes, como campos, bloques y widgets, en los que el usuario puede introducir sus datos.
### Componentes de campo
Los campos son componentes de la interfaz de usuario donde los usuarios introducen su información en Forms.
#### Configuración de campos
Los campos tienen una serie de ajustes predeterminados que puede configurar para adaptarlos a sus necesidades.
Los ajustes predeterminados de los campos son:
| Configuración | Descripción |
| ----------------------------- | -------------------------------------------- |
| ID | El id único |
| Etiqueta | Mostrar u ocultar una etiqueta |
| Obligatorio | El valor de entrada es obligatorio |
| Texto de ayuda | Mostrar un texto de ayuda |
| Texto de marcador de posición | Texto visible para el usuario |
| Valor predeterminado | Valor predeterminado visible para el usuario |
| Transitorio | Habilitar o deshabilitar la máscara de datos |
#### Reglas de validación de campos
| Configuración | Descripción |
| ----------------------------- | -------------------------------------------------------- |
| Longitud mín. / Longitud máx. | Define la longitud mínima o máxima del valor de entrada. |
| Valor mín. / Valor máx. | Define el valor numérico mínimo o máximo. |
#### Campos disponibles en Forms
Los campos disponibles, con su configuración específica y sus tipos de salida de datos, son:
La entrada estándar permite que un usuario introduzca cualquier valor de tipo cadena.
##### Configuración del campo de texto
La configuración del campo de texto es:
| Configuración | Descripción |
| ------------- | ---------------------------------------------- |
| Multiline | Habilita la entrada de texto en varias líneas. |
##### Valor de salida del campo de texto
El tipo de datos del valor de salida del campo de texto es `string`.
```json lines theme={null}
{
"text_field_id": "Auth0"
}
```
La entrada estándar permite que un usuario introduzca valores de correo electrónico en formato de cadena.
##### Valor de salida del campo de correo electrónico
El tipo de datos del valor de salida del campo de correo electrónico es `string`.
```json lines theme={null}
{
"email_field_id": "username@domain.com"
}
```
La entrada estándar permite a un usuario introducir números de teléfono.
##### Configuración del campo de teléfono
La configuración del campo de teléfono es la siguiente:
| Configuración | Descripción |
| ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| Selector de país | Habilite o deshabilite el selector de país. De forma predeterminada, muestra la ubicación del usuario según su IP. |
| Texto del marcador de posición del filtro | Texto visible para el usuario en la ventana de búsqueda de país. |
##### Valor de salida del campo de teléfono
El tipo de dato del valor de salida del campo de teléfono es `string` o, si el selector de país está habilitado, un `object`.
El valor de salida del campo de teléfono como `string`:
```json lines theme={null}
{
"phone_field_id": "8005550175"
}
```
El valor del tipo de dato de salida del campo teléfono es un `object` :
```json lines theme={null}
{
"phone_field_id": {
"national_number": "8005550175",
"national_format": "(800) 555-0175",
"international_number": "+18005550175",
"international_format": "+1 800-555-0175",
"country_code_iso": "US",
"country_code_number": "1"
}
}
```
Campo estándar que permite a un usuario seleccionar valores de opción única o múltiple.
##### Configuración del campo Choice
La configuración del campo Choice es la siguiente:
| Configuración | Descripción |
| --------------------------- | --------------------------------------------------------------------- |
| Opción múltiple | Permite seleccionar varias opciones. |
| Otra opción | Permite que los usuarios introduzcan su propia opción. |
| Advanced > Valores internos | Asigna un valor interno a cada opción. |
| Advanced > Edición masiva | Edita en bloque las etiquetas y los valores internos de las opciones. |
##### Valor de salida del campo Choice
El tipo de datos del valor de salida del campo Choice es `string` o, si la opción múltiple está habilitada, `array of strings` .
El valor de salida del campo Choice con tipo de datos `string`:
```json lines theme={null}
{
"choice_field_id": "Option A"
}
```
El valor del tipo de datos de salida del campo de selección es un `array of strings`:
```json lines theme={null}
{
"choice_field_id": ["Option A", "Option B"]
}
```
Campo estándar que permite a un usuario seleccionar imágenes de opción única o múltiple.
##### Configuración del campo de tarjetas
La configuración del campo de tarjetas es la siguiente:
| Configuración | Descripción |
| --------------------------- | -------------------------------------- |
| Selección múltiple | Permite seleccionar varias opciones. |
| Ocultar etiquetas | Oculta las etiquetas de las tarjetas. |
| Avanzado > Valores internos | Asigna un valor interno a cada opción. |
##### Valor de salida del campo de tarjetas
El tipo de datos del valor de salida del campo de tarjetas es `string` o, si la selección múltiple está habilitada, un `array of strings`.
El valor de salida del campo de tarjetas como `string`:
```json lines theme={null}
{
"card_field_id": "Option A"
}
```
El campo cards devuelve un valor del tipo de datos `array of strings`:
```json lines theme={null}
{
"card_field_id": ["Option A", "Option B"]
}
```
La entrada estándar permite que un usuario introduzca una URL.
##### Valor de salida del campo URL
El tipo de datos del valor de salida del campo URL es una cadena:
```json lines theme={null}
{
"url_field_id": "https://auth0.com"
}
```
Campo de entrada estándar que permite a un usuario introducir una contraseña o un valor secreto.
##### Configuración del campo de contraseña
La configuración del campo de contraseña es la siguiente:
| Configuración | Descripción |
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Requerir contraseña compleja | Las contraseñas deben contener una letra mayúscula, una letra minúscula, un símbolo y un número. |
| Aplicar las directrices de NIST | La contraseña no puede tener menos de 8 caracteres ni incluir contraseñas obtenidas de filtraciones de datos anteriores, palabras del diccionario, caracteres repetidos o secuenciales, ni palabras específicas del contenido. |
| Añadir medidor de seguridad | Se muestra un medidor gráfico con una escala roja, amarilla y verde debajo del campo de contraseña para indicar la solidez de la contraseña introducida. |
| Hash | Seleccione un algoritmo para aplicar una función hash al valor introducido directamente en el navegador. |
##### Valor de salida del campo de contraseña
El tipo de datos del valor de salida del campo de contraseña es un `string` enmascarado:
```json lines theme={null}
{
"password_field_id": "███"
}
```
Campo estándar que permite a un usuario introducir información de pago mediante un proveedor de pagos. Los pagos se procesan antes del nodo Ending.
##### Configuración del campo de pago
Los ajustes del campo de pago son los siguientes:
| Configuración | Descripción |
| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| Tipo de pago | Seleccione pagos únicos (Charge) o recurrentes (Subscription). |
| Importe | Especifique el importe para un pago único (Charge). |
| Moneda | Especifique la moneda para un pago único (Charge). |
| Acción de suscripción | Seleccione si desea crear o actualizar una suscripción existente. |
| Acción del cliente | Seleccione si desea crear o actualizar un cliente existente. |
| Opciones de visualización | Muestre y edite las etiquetas de Número de tarjeta, Fecha de vencimiento y Código de seguridad, así como los sellos de confianza. |
##### Valor de salida del campo de pago
El tipo de dato del valor de salida del campo de pago es una cadena o un objeto para los flujos posteriores al envío.
El tipo de dato del valor de salida del campo de pago como `string`:
```json lines theme={null}
{
"payment_field_id": "pm_1P19e..."
}
```
El tipo de dato del valor de salida del campo de pago para suscripciones en forma de `object` :
```json lines theme={null}
{
"payment_field_id": {
"payment_method_id": "pm_1P19e...",
"customer_id": "cus_PqrM...",
"price_ids": [
"price_1ONHR..."
],
"subscription_id": "sub_1P1A...",
"payment_intent_id": "pi_3P19e5..."
}
}
```
El tipo de dato del valor de salida del campo de pago para charge como `object` :
```json lines theme={null}
{
"payment_field_id": {
"payment_method_id": "pm_1P19e...",
"customer_id": "cus_PqrM...",
"amount": 100,
"payment_intent_id": "pi_3P19e5..."
}
}
```
Campo estándar que añade texto legal y una casilla de verificación.
##### Valor de salida del campo legal
El tipo de datos del valor de salida del campo legal es `boolean`.
```json lines theme={null}
{
"legal_field_id": true
}
```
Campo estándar que permite a un usuario seleccionar uno o varios valores de una lista desplegable.
##### Configuración del campo de lista desplegable
Los ajustes del campo de lista desplegable son:
| Ajustes | Descripción |
| --------------------------- | ------------------------------------------------- |
| Selector múltiple | Habilita la selección de varias opciones. |
| Avanzado > Valores internos | Asigna un valor interno a cada opción. |
| Avanzado > Edición masiva | Edita en masa la etiqueta y los valores internos. |
##### Valor de salida del campo de lista desplegable
El tipo de datos del valor de salida del campo de lista desplegable es `string` o, si la selección múltiple está habilitada, `array of strings` .
El valor de salida del campo de lista desplegable con tipo de datos `string`:
```json lines theme={null}
{
"dropdown_field_id": "Option A"
}
```
El valor del tipo de datos de salida del campo desplegable es un `array of strings`:
```json lines theme={null}
{
"dropdown_field_id": ["Option A", "Option B"]
}
```
Campo de entrada estándar que permite a un usuario introducir valores numéricos.
##### Valor de salida del campo numérico
El tipo de dato del valor de salida del campo numérico es `number`.
```json lines theme={null}
{
"number_field_id": 123
}
```
Entrada estándar que permite a un usuario introducir un valor de fecha o de hora.
##### Configuración del campo de fecha / hora
La configuración del campo de fecha/hora incluye lo siguiente:
| Clave | Descripción |
| ------- | ----------------------------------- |
| Formato | Seleccione el formato Fecha o Hora. |
##### Valor de salida del campo de fecha / hora
El valor del tipo de datos de salida del campo de fecha/hora para la fecha es un `string`:
```json lines theme={null}
{
"date_time_field_id": "2023-04-11"
}
```
El valor del tipo de dato de salida del campo de fecha/hora para la hora es de tipo `string`:
```json lines theme={null}
{
"date_time_field_id": "23:15"
}
```
Entrada estándar que permite a un usuario introducir valores true o false.
##### Valor de salida del campo booleano
El tipo de dato del valor de salida del campo booleano es booleano.
```json lines theme={null}
{
"boolean_field_id": true
}
```
Campo estándar que puede personalizar para crear su propio campo.
##### Configuración del campo personalizado
La configuración del campo personalizado es la siguiente:
| Configuración | Descripción |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| Parámetros | Agregue pares clave-valor para consultarlos en el código fuente del campo personalizado. |
| Código fuente | Agregue su código JavaScript al campo personalizado. |
| Esquema JSON | De forma predeterminada, el campo personalizado acepta cualquier formato de valor. Sin embargo, puede usar JSON Schema para validar los valores. |
Para obtener más información, consulte [Custom Field Components for Forms](/es/docs/customize/forms/custom-field-components).
### Componentes de bloque
Los bloques son componentes de interfaz de usuario que añaden funcionalidad a sus formularios, pero no recopilan información del usuario.
#### Bloques disponibles en Forms
Los bloques disponibles son:
Un botón que permite a los usuarios continuar al siguiente nodo del formulario.
* Antes de continuar, las reglas de validación de campos se aplican y se validan tanto del lado del cliente como del lado del servidor. Si la validación de campos falla, se muestra un mensaje de error para que el usuario lo revise.
* Si el siguiente nodo es un nodo de flujo, se muestra un indicador de carga hasta que el flujo se complete. Si el flujo falla o devuelve un mensaje de error personalizado, se muestra un mensaje de error.
Un botón que permite a los usuarios ir al nodo de paso anterior.
Si un usuario selecciona el botón anterior, las reglas de validación de campos se ejecutan de nuevo, aunque no se haya realizado ningún cambio en los datos de entrada antes de continuar.
Un botón que permite a los usuarios omitir el paso actual y saltar directamente al nodo de destino.
Al omitir el paso actual, no se validará ni se recopilará ninguna información completada en ese paso.
Un componente que permite a los usuarios volver a ejecutar un flujo para generar y enviar un nuevo código OTP
Si un usuario selecciona el botón de reenvío, el flujo asociado generará y enviará un nuevo código OTP.
| Configuración | Descripción |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Alineación del texto | Seleccione la alineación del texto: izquierda, centro o derecha |
| Texto | Texto predeterminado que se muestra cuando los usuarios seleccionan el botón de reenvío |
| Texto del botón | Texto del botón |
| Texto de espera | Texto que se muestra cuando los usuarios han seleccionado el botón de reenvío. Reemplaza la configuración `Text` y `Button text`. Use la variable `“{{remaining_seconds}}”` para mostrar dinámicamente la cantidad de segundos restantes hasta que el botón de envío vuelva a estar habilitado. Por ejemplo: “Reenviar en `{{remaining_seconds}}` segundos”. |
| Flujo | Flujo que se ejecuta después de que el usuario selecciona el botón de reenvío. |
| Intentos máximos | La cantidad máxima de veces que el usuario puede seleccionar el botón de reenvío |
| Tiempo de espera | El tiempo de espera entre intentos, en segundos. |
Un bloque de texto enriquecido para personalizar el nodo de paso con información adicional.
Una línea para dividir distintas secciones del nodo de paso. Puede contener un texto breve.
Un bloque HTML para crear su interfaz de usuario personalizada.
Un bloque de imagen para personalizar el paso agregando imágenes.
### Componentes de widget
Los widgets son componentes prediseñados, con integraciones de terceros, que añaden lógica del lado del cliente y del lado del servidor a sus formularios.
#### Widgets disponibles en Forms
Los widgets disponibles son:
Un widget que permite a un usuario introducir y validar su dirección.
##### Configuración del widget de direcciones de Google
La configuración del widget de direcciones de Google incluye:
| Configuración | Descripción |
| ------------- | ------------------------------------------------------------------------- |
| Clave de API | Requiere una clave de API de Google Maps para autenticar las solicitudes. |
##### Valor de salida del widget de direcciones de Google
El tipo de datos del valor de salida del widget de direcciones de Google es un `object`.
```json lines theme={null}
{
"google_address_widget_id": {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-73.9654415,
40.8054491
]
},
"properties": {
"geocoding": {
"type": "house",
"housenumber": "2880",
"street": "Broadway",
"city": "New York",
"county": "New York County",
"state": "New York",
"country": "United States",
"postcode": "10025"
}
}
}
}
```
Un widget que ayuda a proteger su sitio web del spam y el abuso al verificar que un usuario es una persona y no un bot.
El widget admite:
* Basado en puntuación (v3)
* Desafío (v2)
* Insignia invisible de reCAPTCHA
Diferencias entre `v2` y `v3`:
* `v2` requiere interacción del usuario con desafíos visibles, como hacer clic en una casilla de verificación o resolver rompecabezas.
* `v3` se ejecuta en segundo plano y proporciona una puntuación basada en el comportamiento del usuario, sin requerir interacción del usuario. Al usar esta versión, asegúrese de implementar lógica de negocio adicional para gestionar la puntuación y determinar si es necesario realizar alguna acción adicional.
##### Configuración del widget de Google reCAPTCHA
La configuración del widget de Google reCAPTCHA incluye:
| Configuración | Descripción |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Clave del sitio | La clave pública del sitio que se usa para inicializar reCAPTCHA en su sitio web. Puede crearla en la [consola de Google reCAPTCHA](https://www.google.com/recaptcha/admin/create) o en su proyecto de Google Cloud Platform. |
| Clave secreta | La clave secreta que se usa para comunicarse de forma segura con el servicio de reCAPTCHA del lado del servidor. Puede crearla en la [consola de Google reCAPTCHA](https://www.google.com/recaptcha/admin/create) o en su proyecto de Google Cloud Platform. |
##### Valor de salida de Google reCAPTCHA
El tipo de datos del valor de salida del widget de Google reCAPTCHA es un `object`.
Ejemplo de respuesta de `v2`:
```json lines theme={null}
{
"recaptcha_widget_id": {
"success": true,
"challenge_ts": "2025-03-26T11:22:18Z",
"hostname": "auth.example.com"
}
}
```
Ejemplo de respuesta de `v3`:
```json lines theme={null}
{
"recaptcha_widget_id": {
"success": true,
"challenge_ts": "2025-03-26T11:22:18Z",
"hostname": "auth.example.com",
"score": 0.9
}
}
```
Un widget que permite a un usuario verificar su identidad mediante credenciales verificables almacenadas en su billetera digital.
##### Configuración del widget de credenciales verificables
La configuración del widget de credenciales verificables incluye:
| Configuración | Descripción |
| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| URL | El valor de URL usado para generar el código QR. Este valor se devuelve en la propiedad `engagement` de la solicitud de verificación. |
| Texto del enlace | Texto alternativo que se mostrará a los usuarios que no puedan escanear el código QR y prefieran abrir el enlace directamente en su dispositivo. |
| Tamaño | El tamaño del código QR. |
| Token público | El token de acceso necesario para consumir el endpoint de polling. Asegúrese de que el token se genere solo con el scope `read:verification_request` para evitar exponer acceso a otros recursos. |
| ID de verificación | El ID de verificación generado al iniciar la solicitud de verificación. |
| Tiempo máximo de espera | El tiempo máximo de espera para que se complete el proceso de verificación. Una vez alcanzado el tiempo establecido, el polling se detendrá y se generará un error, independientemente del estado de la verificación. |
##### Valor de salida de credenciales verificables
El tipo de datos del valor de salida del widget de credenciales verificables es un `object`.
```json lines theme={null}
{
"verifiable_credentials_widget_id": {
"state": "honored",
"reason": "...", // El campo `reason` contiene información adicional (si está disponible) sobre el estado de la solicitud de verificación.
"presentation": {} // La presentación contiene los claims proporcionados por la billetera en respuesta a la definición de presentación.
}
}
```
## Nodo Enrutador
Los nodos Enrutador le permiten agregar reglas para crear saltos de lógica condicional entre nodos.
De forma predeterminada, un nodo Enrutador tiene una sola regla de paso llamada **Caso predeterminado** que se conecta con otros nodos. Puede agregar reglas adicionales basadas en un conjunto de condiciones que una variable debe cumplir para conectarse luego con otros nodos. Para obtener más información, consulte [Enrutador.](/es/docs/customize/forms/routers)
## Nodo de flujo
Los nodos de flujo permiten agregar lógica personalizada y crear flujos de integración para los formularios. Para obtener más información, consulte [Flows.](/es/docs/customize/forms/flows)
## Nodo de inicio
Los nodos de inicio no son visibles para el usuario. En ellos puede configurar variables de campos ocultos, como atributos del usuario al [renderizar un formulario con una Action.](/es/docs/customize/forms/render)
## Nodo de pantalla de finalización
Cada formulario tiene un nodo de pantalla de finalización. De forma predeterminada, este nodo reanuda el flujo de autenticación, y aquí es donde puede configurar un flujo posterior al envío.
