Nexus – Elemento: Select

¿Qué es?

Select es un componente de tipo Form. Es un menú desplegable de selección de opciones. Al arrastrarlo al lienzo viene con dos opciones de ejemplo precargadas (Option 1, Option 2).

Propiedades

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

• Component ID: identificador único del componente, autogenerado (ej. sel_70a2426e).
• 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. “Select Field”).
• Placeholder: texto que aparece como opción inicial antes de elegir algo (ej. “Select an option”).
• Default Value: opción seleccionada por defecto al cargar la pantalla.
• Options (JSON): campo de código donde se definen las opciones del desplegable en formato JSON. Cada opción se compone de:
  • label: texto visible de la opción.
  • value: valor interno asociado a esa opción.

  El editor valida el JSON en tiempo real (marca “✓ valid” cuando el formato es correcto).

• Required: casilla que marca el campo como obligatorio.
• Disabled: casilla que deshabilita el campo (queda inactivo, no seleccionable).
• 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 (por ejemplo, disparar una acción al cambiar la opción seleccionada, con trigger On Change). Ver documentación aparte: Nexus – Events & Actions .

Ejemplo de uso

Para agregar una nueva opción, hay que ubicarse en la última llave } del bloque anterior dentro de Options (JSON), agregarle una coma, y pegar el nuevo bloque a continuación:

[
  {
    "label": "Option 2",
    "value": "option-2"
  },
  {
    "label": "Option 3",
    "value": "option-3"
  }
]  

⚠️ Importante: la coma va pegada a la llave } del bloque anterior, no al principio del bloque nuevo.

El valor seleccionado por el usuario (value de la opción elegida) puede referenciarse luego desde otras partes de la app (queries, acciones) usando el Component ID del Select.