--- title: "Select (Dropdown)" slug: "select" category: "Mini Widgets" reactComponent: "ArcWidgetSelect" reactTier: "mini" reactSince: "0.1.0-alpha.5" reactExample: "select.tsx" locale: "es" hosts: "vue" --- # Select (Dropdown) ## AI Defaults (read first) - **uniqueId**: Required, e.g. `"select-status-" + Nr`. - **recordId**: Required for Ninox data binding, use raw `Nr`. Core does not read it — Ninox handler builds the `update` from `ui.data`. - **field**: Required for Ninox, use `fieldId(Nr, "Feldname")` (alias `fieldId` also works). Adapter-only. - **items**: Use `(select Table).[{ title: ..., active: ..., value: number(Nr) }]` – `value` MUST be `number(Nr)`. - **focusAction**: Set `{ autoFocus: false }` (important on tablets). - **reset**: `{ title: "Alle", value: "", hide: true }` to add a reset option. - **Persistence**: Selection emits semantic `change` with the item `value`; Ninox adapter writes `type: "update"`. React: `onChange(value)` / `onAction('change', value)`. - **Nested widgets**: `currentValue`, `icon`, and `items[].title` (and reset row `title`) may use `arcCustomIcon`, `arcCustomBadge`, `arcCustomButton`, or other formula widgets – not only plain text. - **Null handling**: Do NOT use `else "" end` for empty states. # Select (Dropdown) El widget `arcCustomSelect` es tu herramienta para dropdowns modernos y con estilo en Ninox. Sustituye el campo de selección clásico por una interfaz totalmente personalizable — con iconos, efectos hover, control por teclado y entradas dinámicas. ![](https://framerusercontent.com/images/sIAp1XmRalt9U4EHtgmp9IyYHuw.png) Usas `arcCustomSelect` en cualquier lugar donde quieras ofrecer a tus usuarios una posibilidad de elección — ya sea para asignar estados, filtrar o editar campos de datos. El widget es ideal para: - Selección de valores de estado (p. ej. «Abierto», «En proceso», «Completado») - Etiquetado rápido de registros - Navegación compacta dentro de vistas - Filtrado en combinación con otros widgets 📢 La gran ventaja: puedes adaptar el diseño de forma flexible (p. ej. ancho, colores, tamaño de fuente), rellenar listas de items dinámicas desde tablas e incluso controlar con precisión el comportamiento al enfocar o hacer clic. ## Código de aplicación completo ```javascript arcCustomSelect({ uniqueId: "Status" + Nr, recordId: Nr, field: "", embedded: true, width: "", height: "", alignX: "", fontColor: "", fontSize: "", fontWeight: "", backgroundColor: "", borderColor: "", borderWidth: "", borderRadius: "", itemsSettings: { width: "", height: "", borderRadius: "" }, labelSettings: { title: "", fontSize: "", alignX: "", height: "" }, clickPosition: "", placeholder: "", disabled: false, multiselect: false, reset: { title: "", value: "", hide: true }, focusAction: { autoFocus: false, showCurrentValue: false }, currentValue: text(Status), items: let id := Nr; (select Status).[{ title: Titel, active: number(id.Status) = number(Nr), value: number(Nr) }] }) ``` ## Parámetros individuales ### uniqueId Obligatorio: ✅ Con `uniqueId` cada instancia de Select se vuelve identificable de forma única — especialmente importante cuando se usan **varios Custom Selects** a la vez en la página. El ID hace internamente que: - **el foco, la selección y el comportamiento de teclado** se asignen correctamente, - no se produzcan solapamientos entre instancias, - el estado de cada select box se mantenga estable, incluso con cambios rápidos o carga dinámica. ```javascript uniqueId: Nr, // Ninox-Feld uniqueId: "Aufgabe Beschreibung", // Text in " ``` ### recordId Obligatorio: ✅ El parámetro `recordId` vincula el componente Select con un registro concreto en Ninox — exactamente aquel en el que se encuentra el campo que quieres controlar con el widget Select. ```javascript recordId: Nr, // Ninox-Tabellen Id ``` ### field Obligatorio: ✅ El parámetro `field` indica qué campo del registro indicado (`recordId`) debe leer y escribir el widget Select. No se trata del nombre de campo visible, sino de la `fieldId` interna del campo en Ninox. **🔍 Cómo encontrar la fieldId** La `fieldId` es una designación interna del sistema, p. ej. `"K4"`. Puedes averiguarla de dos formas: - Con la función de Ninox: `fieldId()` - O con el mini-widget gratuito: `fieldFinder` ```javascript field: "B1", field: fieldId(Nr, "Status") field: "", // gibst du keine Id an, funktioniert das Select nicht ``` ### embedded Indica si el widget Select está **integrado dentro de otro widget** — p. ej. dentro de una columna de [Custom Table](/custom-table) o de un contenedor [Layout](https://www.arc-rider.de/en/documentation/custom-layout) — o si se incorpora **libremente en un formulario de Ninox como widget independiente** (p. ej. directamente en un campo de fórmula). ```javascript embedded: false, // ermöglicht den Standalone Einsatz des Widgets (nicht eingebettet in anderen Widgets) embedded: true, // wenn Text eingebettet in anderes Widget embedded: "", // default: true ``` ### width El parámetro `width` controla el ancho de representación del widget Select. Puedes indicar un ancho fijo en píxeles, p. ej. `"240px"`, o un ancho relativo como `"100%"`, para que el widget se adapte de forma flexible al layout circundante. **Aplicación** - En campos de fórmula colocados libremente, con `width` puedes influir de forma específica en el layout. - Si el widget se usa integrado (p. ej. en una columna de [CustomTable](https://www.arc-rider.de/en/documentation/custom-table)), puedes adaptar automáticamente el ancho al elemento padre estableciendo `width: 100%`. 💡 **Recomendación**: evita anchos muy pequeños — los placeholders largos o los valores seleccionados podrían mostrarse cortados. ```javascript width: "100%", // Prozent-Werte oder "80px" Pixel-Werte width: "auto", // width passt sich an Inhalt an width: "", // default: 100% ``` ### height Con el parámetro `height` puedes controlar la **altura visible del componente Select**. Esto es especialmente útil si necesitas un layout uniforme o quieres controlar la representación en tablas y layouts anidados. ```javascript height: "100%", // Prozent-Werte oder "80px" Pixel-Werte height: "auto", // height passt sich automatisch an Inhalt an height: "", // default: auto ``` ### alignX Con `alignX` determinas la **alineación horizontal** del contenido visible en el campo Select — es decir, por ejemplo, si el valor seleccionado se muestra alineado a la izquierda, centrado o a la derecha. **Aplicación** - `"left"` es el valor por defecto y funciona bien en la mayoría de los casos. - `"center"` puede tener sentido en campos muy estrechos o con contenidos puramente icónicos. - `"right"` se usa raramente, pero puede ser útil con números o ciertas necesidades de layout. **💡 Recomendación**: usa `center` o `right` solo si el resto del layout lo requiere — con textos más largos, `left` suele ser más legible. ```javascript alignX: "left", // linksbündig alignX: "center", // zentriert alignX: "right", // rechtsbündig alignX: "", // default: left ``` ### itemsWidth Con `itemsWidth` fijas el **ancho de la lista dropdown** — es decir, del área en la que se muestran las opciones de selección. Si no estableces este valor, el ancho de la lista se ajusta automáticamente al ancho del campo Select. **Aplicación: **puedes hacer la lista dropdown deliberadamente más ancha o más estrecha que el propio campo Select. Esto es especialmente útil cuando los contenidos de las opciones son más largos de lo que permite el ancho del campo real. ```javascript itemsWith: "100%", // Prozent-Werte oder "80px" Pixel-Werte itemsWith: "auto", // width passt sich an Inhalt an itemsWith: "", // default: 100% ``` ### itemsHeight El parámetro `itemsHeight` fija la **altura de cada entrada en la lista dropdown**. Con esto puedes controlar cuánto espacio ocupa cada punto de selección — independientemente del tamaño de fuente. ```javascript itemsHeight: "100%", // Prozent-Werte oder "80px" Pixel-Werte itemsHeight: "auto", // height passt sich an itemsHeight: "", // default: auto ``` ### fontColor Con `fontColor` puedes fijar el **color de fuente de la visualización de selección en el campo Select**. Esto afecta tanto al texto placeholder como al valor actualmente seleccionado. **💡 Recomendación: **usa contrastes lo más altos posible con el fondo — especialmente en variantes integradas en layouts con color. Con fondo oscuro deberías elegir un color de fuente claro, p. ej. `"#ffffff"`. ```javascript fontColor: "#EEEEEE", // z.B. HEX-Wert in " fontColor: "", // default: #000 ``` ### fontSize El parámetro `fontSize` determina el **tamaño del texto dentro del campo Select** — tanto para el placeholder como para las entradas seleccionadas. ```javascript fontSize: "15px", fontSize: "", // default: 13px ``` ### fontWeight El parámetro `fontWeight` determina el **grosor de fuente** del texto en el campo Select (values y placeholder). Con esto puedes controlar de forma específica si el texto se muestra más discreto o más marcado. **Aplicación: **puedes elegir entre valores predefinidos como `"normal"` o `"bold"`, o usar pesos numéricos como `400` (normal) o `600` (semi-bold). Esto es especialmente útil si usas distintos grosores de fuente de forma sistemática en el layout. ```javascript fontWeight: "700", fontWeight: "", // default: 400 ``` ### backgroundColor El parámetro `backgroundColor` fija el **color de fondo del campo Select visible** — es decir, la superficie en la que se muestra el placeholder o el valor seleccionado. **Aplicación: **con esto puedes adaptar visualmente el widget a tu interfaz, p. ej. en layouts oscuros o en campos de entrada armonizados por color. Se admiten valores de color en formato HEX, RGB o nombres en texto plano como `"white"` o `"transparent"`. **💡 Recomendación: **presta atención a un contraste suficiente con el color de fuente (`fontColor`) para que el texto siga siendo legible. En layouts oscuros, `"transparent"` puede tener sentido si el diseño de fondo debe transparentarse. ```javascript backgroundColor: "#4970ff", // z.B. HEX-Wert in " backgroundColor: "", // default: #FFFFFF ``` ### borderColor Con el parámetro `borderColor` fijas el color del borde alrededor del campo Select. Con esto puedes adaptar el widget de forma específica a tu esquema de color o layout. **💡 Recomendación: **usa colores de borde con mucho contraste solo de forma deliberada — p. ej. para resaltar campos o separar visualmente grupos. Los tonos de gris discretos como `"#dddddd"` o `"#999999"` suelen resultar agradablemente sobrios. ```javascript borderColor: "#EEEEEE", // z.B. HEX-Wert in " borderColor: "", // default: #e5e5e5 ``` ### borderWidth Con `borderWidth` determinas el grosor del borde alrededor del campo Select. Con esto puedes aumentar o reducir deliberadamente la presencia visual del widget en el layout. **Aplicación: **usa bordes finos (`"1px"`) para una integración discreta, o más gruesos (`"2px"` a `"3px"`) para un realce visual. `"0px"` elimina el borde por completo, especialmente útil en diseños integrados con superficies claras. ```javascript borderWidth: "#EEEEEE", // z.B. HEX-Wert in " borderWidth: "", // default: 1px ``` ### borderRadius El parámetro `borderRadius` controla el **redondeo de las esquinas** del campo Select. Con esto puedes dar al componente un aspecto entre angular, ligeramente redondeado o completamente redondo. **🧩 Valores típicos** - `"0px"` → completamente angular - `"4px"` → ligeramente redondeado (estándar) - `"6px"` → moderno y suave - `"50%"` → redondo (solo tiene sentido con ancho/alto cuadrado) ```javascript borderRadius: "20px", // z.B. Wert in px borderRadius: "", // default: 3px ``` ### Bloque itemsSettings Con `itemsSettings` puedes controlar la apariencia de todo el menú dropdown — no de entradas individuales de la lista, sino de toda el área en la que se muestran todas las opciones. ```javascript itemsSettings: { width: "", // default: 100% height: "", // default: 200px borderRadius: "" // default: 5px }, Einzelerklärungen: width: "40px", // Wert in px oder aber auch z.B. "auto" width: "", // default: 100% height: "200px", // Wert in px oder aber auch z.B. "auto" (passt sich Inhalt an) height: "", // default: 200px borderRadius: "30px", // Wert in px oder aber auch z.B. "auto" (passt sich Inhalt an) borderRadius: "" // default: 3px ``` ### Bloque labelSettings Con `labelSettings` controlas la representación de un **label opcional sobre el campo Select** — es decir, un título breve o texto de aviso como p. ej. «Estado» o «Categoría». Este texto aparece encima del widget. - `title` – El texto que se muestra como label (p. ej. `"Kategorie"`) — también como mini-widget (p. ej. `arcCustomText`) - `fontSize` – Tamaño de fuente del label (p. ej. `"11px"`) - `fontColor` – Color de fuente del label (hex, p. ej. `"#EEEEEE"`) - `alignX` – Alineación horizontal del label (`"left"`, `"center"`, `"right"`) - `height` – Altura del contenedor del label (p. ej. `"15px"`) ```javascript labelSettings: { title: "", fontSize: "", alignX: "", height: "" } Einzelerklärungen: title: "Status", // Wort, in " welches als Label ausgegeben werden soll title: "", // kein Label wird angezeigt fontSize: "30px", // z.B. Pixel Werte fontSize: "", // default: 11px alignX: "right", // Label ist rechtsbündig alignX: "left", // Label ist linksbündig alignX: "", // default: left height: "40px", // z.B. Pixel Werte height: "", // default: 15px ``` **💡 Notas** - Si `title` no se establece o se deja vacío, **no aparece ningún label**. - La alineación (`alignX`) solo afecta al label, no al campo Select en sí. - `fontSize` y `height` ayudan a la coordinación exacta con otros campos en el layout. ### clickPosition El parámetro `clickPosition` determina **qué parte del campo Select es clicable** para abrir el menú dropdown. **🧩 Ajustes posibles** - `"icon"` – Solo el pequeño símbolo de flecha en el extremo derecho es clicable. - `"field"` – Todo el campo (incluyendo el área de texto y el icono) es clicable. (Estándar) ```javascript clickPosition: "icon", // nur auf icon klickbar (select klappt sich aus) clickPosition: "", // default: klick auf gesamtem select möglich ``` ### placeholder El parámetro `placeholder` define el **texto mostrado en el campo Select** mientras **aún no se haya seleccionado ningún valor**. Sirve como aviso para el usuario sobre lo que se espera en el campo o qué selección se puede hacer. **🧩 Ejemplos de uso típicos** - `"Bitte auswählen"` - `"Status wählen"` - `"–"` ```javascript placeholder: "select", // eigener Platzhalter placeholder: "", // default: "Auswählen" ``` Si se establece un `placeholder`, aparece **en gris y ligeramente transparente**, hasta que se haga una selección real. **💡 Notas** - El texto **no se guarda**, solo sirve para la visualización. - Si ya se ha pasado un `currentValue`, el `placeholder` no se muestra. - Mantén el texto corto — p. ej. `"select"` o `"choose"` — especialmente en campos estrechos. ### disabled El parámetro `disabled` determina si el campo Select está **desactivado** — es decir, **no clicable** y **no editable**. **🧩 Comportamiento en estado desactivado** - El dropdown no se puede abrir. - El cursor del ratón muestra el icono «prohibit» (círculo con línea diagonal) - El valor actual permanece visible, pero no se puede cambiar. - Visualmente el campo se muestra ligeramente atenuado. ```javascript disabled: true, // das select kann nich angeklickt werden disabled: if Datum < today() then true else false, // hier können eigene Abhängigkeiten definiert werden, wenn bei einer Bestimmten Bedingung das select nicht klickbar sein soll disabled: "", // default: false (das select ist anklickbar) ``` ### multiselect El parámetro `multiselect` activa el **modo de selección múltiple** en el campo Select. Con esto se pueden seleccionar y escribir **varios valores a la vez** en el campo — en lugar de solo uno. **🧩 Comportamiento con **`**multiselect: true**` **activo** - Cada clic en una entrada añade el valor a la lista (en lugar de sustituirlo). - Los valores ya seleccionados se mantienen. - Las entradas pueden marcarse visualmente como «activas». - La selección permanece abierta incluso después de un clic, para poder elegir varios valores uno tras otro. - El **control por teclado** difiere ligeramente:

```javascript multiselect: true // wenn du das Select als Multi-Select nutzen möchtest multiselect: "" // default: false ``` **⚠️ Importante en la implementación en Ninox** En Ninox, un `multiselect` no puede escribir directamente en un **campo de selección múltiple** o **campo de referencia múltiple**. En su lugar debes usar un **campo auxiliar de tipo texto**: - Pasa este campo auxiliar en el parámetro `field` (o `fieldId`) al widget Select. - Ahí se recopila el **texto de todos los valores seleccionados (p. ej. IDs o nombres)** — normalmente como lista separada por comas. - A continuación, usa un **«Trigger tras cambio»** sobre el campo auxiliar para rellenar la selección múltiple real. **Código del trigger:** ```javascript let current := this; if number(addAuftragsart) = 0 then Auftragsart := null else if contains(numbers(current.Auftragsart), number(addAuftragsart)) then let value := unique(for item in numbers(current.Auftragsart) do if number(item) = number(addAuftragsart) then 0 else item end end); Auftragsart := value[!= 0] else Auftragsart := unique(numbers(current.Auftragsart), number(addAuftragsart)) end end; addAuftragsart := null ``` ### emptyValue En el parámetro ***emptyValue*** determinas cuál debe ser el texto del botón de restablecer (primer campo de selección en el dropdown/items abierto). (desde v1.1.0) (se sobrescribe si en el bloque reset hay algo indicado en title)
*!! Por ahora, el parámetro de configuración anterior *`*emptyValue: "zurücksetzen"*`*sigue activo, pero por favor usad en el futuro para este ajuste el parámetro *`*title: "zurücksetzen"*`* en el bloque reset.*
```javascript emptyValue: "empty", // eigener Text emptyValue: "", // default: "(leer)") ``` ### Bloque reset El bloque `reset` controla si y cómo se muestra en el menú dropdown una opción **«Restablecer»**, con la que se puede borrar el valor actual o restablecerlo a un valor definido. - `title` – El texto mostrado para la entrada de restablecer (p. ej. `"(leer)"`, `"Zurücksetzen"`). - `value` – El valor que se establece cuando se hace clic en la entrada. Si no se establece, se usa automáticamente `emptyValue`. - `hide` – Si es `true`, la entrada de reset **no se muestra**, pero puede seguir usándose internamente. ```javascript reset: { title: "reset", value: 0, hide: true }, Einzelerklärungen: title: "reset", // eigener Text title: "", // default: Wert in Parameter emptyValue (falls emptyValue: " dann ist hier default: "(leer)") value: 0, // eigener Wert (0 = setzt den Wert auf 0 statt null zurück) value: "", // default: null (Ninox-Feld wird null gesetzt) hide: true, // select kann nicht zurückgesetzt werden hide: "", // default: false (zurücksetzen Button wird angezeigt) ``` ### Bloque de settings focusAction Con el bloque de settings `focusAction` puedes controlar el comportamiento del campo de búsqueda en el Select. **Parámetros:** - `autoFocus` – Determina si el cursor salta automáticamente al campo de búsqueda. Especialmente para tablets, donde el teclado aparece de inmediato y podría desorientar al usuario, desactivarlo resulta útil. - `showCurrentValue` – Si es `true`, el `currentValue` (p. ej. tus propios badges construidos con `arcCustomLayout`) se muestra a la izquierda y el campo de búsqueda al lado. Ideal para Multi-Select con representación de tags. ```javascript focusAction: { autoFocus: false, // true or false // default: true showCurrentValue: true // true or false // default: false } ``` **🧩 Aplicación típica para showCurrentValue:** Si en `currentValue` renderizas tus propios badges/tags con `arcCustomLayout` y estos deben seguir visibles al abrir el Select (con el campo de búsqueda al lado), establece `showCurrentValue: true`. ### currentValue El parámetro `currentValue` determina **qué valor debe mostrarse en el campo Select con items seleccionados**. Es decir, define la **visualización** del campo en estado cerrado. **🧩 Comportamiento según el modo** - **Single-Select (**`**multiselect: false**`**)** El valor se pasa **directamente como texto o número individual** (p. ej. `"Offen"` o `1`). - **Multi-Select (**`**multiselect: true**`**)** El valor es un **array de strings o números**, p. ej. `[Bluse, Kleidung, Oberteil]` o `[1, 2]`. Cada valor contenido se marca en la lista como **«activo»**. ```javascript currentValue: text(Status), // Bezeichnung deines Ninox-Feldes innerhalb von text() currentValue: arcCustomBadge({ uniqueId: "customBadge" + Nr, embedded: true, width: "100%", icon: "", iconPosition: "", fontSize: "", fontWeight: "700", borderRadius: "", singleColor: color(Status), fontColor: "", backgroundColor: "", borderColor: "", paddingY: "5px", paddingX: "10px", value: text(Status) }), // individuell gestaltetes customBadge mit der Bezeichnung deines Ninox-Feldes bei value currentValue: "", // default: es wird nicht der ausgewählte Wert angezeigt, sondern der placeholder ``` ### Bloque items **Campo obligatorio:** ✅ El bloque `items` define las **posibilidades de selección** que se muestran en el dropdown. Cada opción se indica como un objeto con propiedades determinadas — p. ej. texto visible, valor interno y estado activo. **🔄 **Dos variantes de construcción: puedes rellenar `customSelect` con valores de dos formas distintas: 1. **Dinámicamente desde una tabla de Ninox** Ideal para listas que pueden cambiar o están vinculadas a otros campos. ```javascript items: let id := Nr; (select Status_Projekte).[{ title: Titel, active: number(id.Status) = number(Nr), value: number(Nr) }] ``` 2. **Lista manual en el código** Adecuado para p. ej. reconstruir o controlar directamente un campo de selección simple de Ninox (sin tabla externa). ```javascript items: [{ title: "Offen", active: Status = 1, value: number(Nr) }, { title: "In Arbeit", active: Status = 2, value: number(Nr) }, { title: "Erledigt", active: Status = 3, value: number(Nr) }] ``` **🧩 Estructura por entrada** - `title` – Visualización en el dropdown (texto o widget, p. ej. `arcCustomIcon({ name: "check", iconSize: "16px" })` junto al texto de la etiqueta) - `value` – El valor a guardar - `active` – Cuándo se marca esta entrada como seleccionada 💡 **`icon`** (en la raíz del Select) y **`currentValue`** también admiten mini-widgets integrados — la misma regla que en `items[].title`. ## 🎹 Comparativa de comportamiento de teclado
Taste Single-Select Verhalten Multi-Select Verhalten
**Tab** ✅ Auswahl wird bestätigt➡️ Fokus springt weiter ➡️ Fokus springt weiter🚫 Keine Bestätigung
**Enter** ✅ Auswahl wird bestätigt🔒 Select wird geschlossen ✅ Auswahl wird bestätigt🔓 Select bleibt geöffnet
**Escape** ❌ Select wird geschlossen ❌ Select wird geschlossen
## ✅ Conclusión El widget `customSelect` es una solución versátil para campos de selección individualizados en Ninox — desde selecciones simples de un solo valor hasta multi-selects dinámicos con lógica auxiliar. Úsalo cuando necesites más control sobre la representación, el comportamiento y la interacción de lo que Ninox ofrece de fábrica. Con parámetros claros, fuentes de datos flexibles y control completo por teclado, el widget se integra sin fisuras en cualquier formulario o layout. --- ## Idea de función: Nice Select (select nativo moderno) 💡 **Ampliación planeada:** inspiración de [Nice Select](https://nerdy.dev/nice-select#try-it) — `appearance: base-select`, `::picker()`, anchor positioning, animaciones spring, títulos de grupo sticky, esquinas squircle. [CodePen](https://codepen.io/editor/argyleink/pen/019c1f28-bbc2-7bac-ad4a-a7e41d3730f1).