Select (Dropdown)

The widget arcCustomSelect is your tool for modern, stylish dropdowns in Ninox. It replaces the classic selection field with a fully customizable interface – featuring icons, hover effects, keyboard controls, and dynamic entries.

You use arcCustomSelect wherever you want to offer your users a choice – whether for status assignment, filtering, or editing data fields. The widget is ideal for:

• Selecting status values (e.g., "Open", "In Progress", "Completed")

• Fast tagging or labeling of records

• Compact navigation within forms

• Filtering in combination with other widgets

📢 The big advantage: You can flexibly customize the design (e.g., width, colors, font size), populate dynamic item lists from tables, and even fine-tune the behavior on focus or click.

Complete Application Code

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
		}
	currentValue: text(Status),
	items: let id := Nr;
		(select Status).[{
			title: Titel,
			active: number(id.Status) = number(Nr),
			value: number(Nr)
			}]
})

Individual Parameters

uniqueId

Required field: ✅

With uniqueId, each select instance can be uniquely identified – especially important when multiple custom selects are used on the page simultaneously.

The ID ensures internally that:

• Focus, selection, and keyboard behavior are correctly assigned,

• no overlaps between instances occur,

• the state of each select box remains stable, even with rapid switching or dynamic reloading.

uniqueId: Nr, // Ninox-Feld 
uniqueId: "Aufgabe Beschreibung", // Text in "" 

recordId

Required field: ✅

The parameter recordId links the select component to a specific record in Ninox – specifically the one containing the field you want to populate with the select widget.

recordId: Nr, // Ninox-Tabellen Id 

field

Required field: ✅

The parameter field indicates which field in the specified record (recordId) is to be read and written by the select widget.

This is not the visible field name, but the internal fieldId of the field in Ninox.

🔍 How to find the fieldId

The fieldId is a system internal designation, e.g., "K4".

You can determine it in two ways:

• Using the Ninox function: fieldId()

• Or with the free mini-widget: fieldFinder

field: "B1", 
field: fieldId(Nr, "Status")
field: "", // gibst du keine Id an, funktioniert das Select nicht

embedded

Indicates whether the select widget is embedded within another widget – for instance, within a Custom Table column or a Layout container – or if it is freely integrated into a Ninox form as a standalone widget (e.g., directly in a form field).

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

The parameter width controls the display width of the select widget. You can either specify a fixed width in pixels, e.g., "240px", or a relative width like "100%", so that the widget adapts flexibly to the surrounding layout.

Application

• In freely placed formula fields, you can use width to specifically influence the layout.

• If the widget is used embedded (e.g., in a Custom Table column), you can automatically adjust the width to the parent element by setting width: 100% .

💡 Recommendation: Avoid very small widths – long placeholders or selection values might otherwise be cut off.

width: "100%", // Prozent-Werte oder "80px" Pixel-Werte
width: "auto", // width passt sich an Inhalt an
width: "", // default: 100%

height

With the parameter height, you can control the visible height of the select component. This is particularly useful when you need a consistent layout or want to control the display in tables and nested layouts.

height: "100%", // Prozent-Werte oder "80px" Pixel-Werte
height: "auto", // height passt sich automatisch an Inhalt an
height: "", // default: auto

alignX

With alignX, you determine the horizontal alignment of the visible content in the select field – so, for example, whether the selected value is displayed left-aligned, centered, or right-aligned.

Application

• "left" is the default value and is suitable in most cases.

• "center" may be sensible in very narrow fields or with purely iconic content.

• "right" is rarely used but can be helpful for numbers or certain layout specifications.

💡 Recommendation: Use center or right only if the overall layout demands it – for longer texts, left is generally more readable.

alignX: "left", // linksbündig
alignX: "center", // zentriert
alignX: "right", // rechtsbündig
alignX: "", // default:  left

itemsWidth

With itemsWidth, you set the width of the dropdown list – that is, the area where the selection options are displayed. If you do not set this value, the width of the list will automatically match the width of the select field.

Application: You can intentionally make the dropdown list wider or narrower than the select field itself. This is particularly helpful if the option content is longer than the width of the actual field allows.

itemsWith: "100%", // Prozent-Werte oder "80px" Pixel-Werte
itemsWith: "auto", // width passt sich an Inhalt an
itemsWith: "", // default: 100%

itemsHeight

The parameter itemsHeight sets the height of individual entries in the dropdown list. This allows you to control how much space each selection point takes up – regardless of font size.

itemsHeight: "100%", // Prozent-Werte oder "80px" Pixel-Werte
itemsHeight: "auto", // height passt sich an
itemsHeight: "", // default: auto

fontColor

With fontColor, you can set the font color of the selection display in the select field. This applies to both placeholder text and the currently selected value.

💡 Recommendation: Use as high a contrast as possible to the background – especially with embedded variants in colored layouts. For dark backgrounds, you should choose a light font color, e.g., "#ffffff".

fontColor: "#EEEEEE", // z.B. HEX-Wert in ""
fontColor: "", // default: #000

fontSize

The parameter fontSize determines the size of the text within the select field – for both placeholders and selected entries.

fontSize: "15px", 
fontSize: "", // default: 13px

fontWeight

The parameter fontWeight determines the font weight of the text in the select field (values & placeholder). This allows you to specifically control whether the text should be presented subtly or emphasized.

Application: You can choose between predefined values like "normal" or "bold" or numerical weights like 400 (normal) or 600 (semi-bold). This is particularly useful if you systematically use different font weights in the layout.

fontWeight: "700", 
fontWeight: "", // default: 400

backgroundColor

The parameter backgroundColor sets the background color of the visible select field – that is, the area where the placeholder or selected value is displayed.

Application: You can visually adapt the widget to your interface, e.g., in dark layouts or color-coordinated input fields. Supported are color values in HEX format, RGB, or plain text names like "white" or "transparent".

💡 Recommendation: Make sure there is sufficient contrast to the font color (fontColor) so that the text remains easily readable. In dark layouts, "transparent" can be useful if the background design should shine through.

backgroundColor: "#4970ff", // z.B. HEX-Wert in ""
backgroundColor: "", // default: #FFFFFF

borderColor

With the parameter borderColor, you set the color of the border around the select field. This allows you to specifically adapt the widget to your color scheme or layout.

💡 Recommendation: Use contrasting border colors selectively – e.g., to highlight fields or visually separate groups. Subtle gray tones like "#dddddd" or "#999999" usually appear pleasantly understated.

borderColor: "#EEEEEE", // z.B. HEX-Wert in ""
borderColor: "", // default: #e5e5e5

borderWidth

With borderWidth, you determine the thickness of the border around the select field. This allows you to increase or deliberately reduce the visual presence of the widget in the layout.

Application: Set thin borders ("1px") for subtle integration or thicker ones ("2px" to "3px") for visual emphasis. "0px" completely removes the border, particularly useful in embedded designs with clear surfaces.

borderWidth: "#EEEEEE", // z.B. HEX-Wert in ""
borderWidth: "", // default: 1px

borderRadius

The parameter borderRadius controls the rounding of the corners of the select field. This allows you to design the appearance of the component from sharp-edged to slightly rounded or completely round.

🧩 Typical values

• "0px" → completely sharp-edged

• "4px" → slightly rounded (default)

• "6px" → modern and soft

• "50%" → round (only meaningful with square width/height)

borderRadius: "20px", // z.B. Wert in px
borderRadius: "", // default: 3px

itemsSettings Block

With itemsSettings, you can control the appearance of the entire dropdown menu – not just individual list entries but the entire area where all options are displayed.

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

labelSettings Block

With labelSettings, you control the display of an optional label above the select field – such as a short title or hint text like "Status" or "Category". This text appears above the widget.

• title – The text that is displayed as a label (e.g., "Category")

• fontSize – Font size of the label (e.g., "11px")

• alignX – Horizontal alignment of the label ("left", "center", "right")

• height – Height of the label container (e.g., "15px")

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

💡 Notes

• If title is not set or left empty, no label will appear.

• The alignment (alignX) only affects the label, not the select field itself.

• fontSize and height help fine-tune with other fields in the layout.

clickPosition

The parameter clickPosition determines which part of the select field is clickable to open the dropdown menu.

🧩 Possible settings

• "icon" – Only the small arrow symbol on the far right is clickable.

• "field" – The entire field (including text area and icon) is clickable. (Default)

clickPosition: "icon", // nur auf icon klickbar (select klappt sich aus)
clickPosition: "", // default: klick auf gesamtem select möglich

placeholder

The parameter placeholder defines the display text in the select field as long as no value has been selected. It serves as a hint for the user about what is expected in the field or what selection can be made.

🧩 Typical examples

• "Please select"

• "Select Status"

• "–"

placeholder: "select", // eigener Platzhalter
placeholder: "", // default: "Auswählen"

If a placeholder is set, it appears gray and slightly transparent until an actual selection is made.

💡 Notes

• The text is not stored but serves only for display.

• If a currentValue is already passed, the placeholder will not be displayed.

• Keep the text short – e.g., "select" or "choose" – especially in narrow fields.

disabled

The parameter disabled determines whether the select field is disabled – that is, not clickable and not editable.

🧩 Behavior in the disabled state

• The dropdown cannot be opened.

• The mouse cursor shows the icon "prohibit" (circle with a diagonal slash)

• The current value remains visible but cannot be changed.

• Visually, the field is displayed slightly grayed out.

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

The parameter multiselect activates the multi-selection mode in the select field. This allows multiple values to be selected simultaneously and written into the field – instead of just a single one.

🧩 Behavior when multiselect: true is active

• Each click on an entry adds the value to the list (instead of replacing it).

• Already selected values remain.

• Entries can be visually marked as "active".

• The selection remains open after a click, allowing multiple values to be chosen in succession.

• The keyboard control differs slightly:

  • Enter confirms a selection, and the menu remains open.

  • Tab directly switches to the next field without automatically confirming.

multiselect: true // wenn du das Select als Multi-Select nutzen möchtest
multiselect: "" // default: false

⚠️ Important when implementing in Ninox

In Ninox, a multiselect cannot directly write to a multi-selection field or multi-reference field. Instead, you must use a helper field of type Text:

• Pass this helper field in the parameter field (or fieldId) to the select widget.

• There, the text of all selected values (e.g., IDs or names) is collected – usually as a comma-separated list.

• Then use a "Trigger on change" on the helper field to populate the actual multi-selection.

Trigger code:

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

In the parameter emptyValue, you determine what the text of the reset button (first selection field in the opened dropdown/items) should be. (since v1.1.0) (overwritten if something is entered in the title of the reset block)

!! For now, the previous setting parameter emptyValue: "reset" remains active, but please use the parameter title: "reset" in the reset block for these settings in the future.

emptyValue: "empty", // eigener Text
emptyValue: "", // default: "(leer)")

reset Block

The reset block controls whether and how a "Reset" option is displayed in the dropdown menu, allowing the current value to be deleted or reset to a defined value.

• title – The displayed text for the reset entry (e.g., "(empty)", "Reset").

• value – The value that is set when the entry is clicked. If not set, emptyValue is used automatically.

• hide – If true, the reset entry will not be displayed but can still be used internally.

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)

focusAction Settings block

You can now use the parameter autoFocus in the new settings block focusAction in the select to determine whether the cursor automatically jumps into the search field or not. This is particularly helpful for tablets, where the keyboard pops up immediately and might confuse the user.

focusAction: {
    autoFocus: false // true or false // default: true
}

currentValue

The parameter currentValue determines which value is to be displayed in the select field for selected items. It thus determines the display of the field when closed.

🧩 Behavior depending on mode

• Single-select (multiselect: false)
  The value is directly passed as a single text or number (e.g., "Open" or 1).

• Multi-select (multiselect: true)
  The value is an array of strings or numbers, e.g., [Blouse, Clothing, Top] or [1, 2].
  Each contained value will be marked as "active" in the list.

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

items Block

Required field: ✅

The items block defines the options to be displayed in the dropdown. Each option is provided as an object with specific properties – e.g., visible text, internal value, and active state.

🔄 Two construction variants: You can fill the customSelect in two different ways:

1. Dynamically from a Ninox table

Ideal for lists that can change or are linked to other fields.

items: let id := Nr;
		(select Status_Projekte).[{
			title: Titel,
			active: number(id.Status) = number(Nr),
			value: number(Nr)
			}]

2. Manual list in code

Suitable for directly recreating or controlling a simple selection field from Ninox. (without an external table).

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)
			}]

🧩 Structure per entry

• title – The visible text in the menu

• value – The value to be stored

• active – When this entry is marked as selected

🎹 Keyboard behavior in comparison

✅ Conclusion

The customSelect widget is a versatile solution for custom selection fields in Ninox – from simple single selections to dynamic multi-selects with helper logic.

Use it when you need more control over display, behavior, and interaction than Ninox offers by default.

With clear parameters, flexible data sources, and full keyboard support, the widget can be seamlessly integrated into any form or layout.