Nexus – Elemento: Input

¿Qué es?

Input es un componente de tipo Form. Es un campo de entrada de texto para captura de datos del usuario, con distintos tipos de validación según el dato que se espera recibir. Al arrastrarlo al lienzo viene con un ejemplo precargado (“Input Field” con placeholder “Enter text…”).

Propiedades

Al seleccionar Input en el lienzo, el panel derecho muestra “Properties of Input” con las siguientes opciones:

  • Component ID: identificador único del componente, autogenerado (ej. inp_5adbe984).
  • Visibility → Hidden on load: casilla para que el componente esté oculto al cargar la pantalla. Puede mostrarse luego mediante una acción de tipo Show (ver Events & Actions).
  • Label: etiqueta que se muestra encima del campo (ej. “Input Field”).
  • Placeholder: texto de guía que aparece dentro del campo vacío (ej. “Enter text…”).
  • Default Value: valor que trae el campo cargado por defecto.
  • Type: menú desplegable que define el tipo de dato que acepta el campo, cambiando su validación y/o teclado. Opciones: Text, Email, Password, Number, Date.
  • Required: casilla que marca el campo como obligatorio. Al activarla, se agrega un asterisco rojo (*) junto al Label, tanto en el editor como en el modo Preview, indicando visualmente que el campo es requerido.
  • Disabled: casilla que deshabilita el campo (queda inactivo, no editable).
  • Style → Custom Class: campo para asignar una clase CSS personalizada.
  • Style → Custom Style: campo de texto para CSS personalizado aplicado directamente a este componente.
  • Delete Component: elimina el componente del lienzo.
  • Events & Actions: sistema para definir comportamientos interactivos. Ver documentación aparte: Nexus – Events & Actions.

Ejemplo de uso

Con Type se adapta el campo al dato que se necesita capturar: por ejemplo, Email valida que el texto tenga formato de correo, Password oculta los caracteres ingresados, Number solo acepta valores numéricos, y Date muestra un selector de fecha. Activando Required, el campo pasa a ser obligatorio (probablemente impidiendo enviar un formulario si queda vacío). El valor ingresado por el usuario puede referenciarse luego desde otras partes de la app (queries, acciones) usando el Component ID del Input.