Dropdown Menus

Dropdown Menus let users select a single option from a dropdown list of choices.

🧱 Gridding Rules

The Dropdown Menu element follows a flexible grid system where it can be placed alone or alongside one other element in the same row.

Min	Max
20 grids	60 grids

⚙️ Settings

The following table outlines the available configuration options for this element. Each setting defines how the element behaves or appears within your app’s UI.

Field	Description
Label	The main label for form fields like inputs or dropdowns.
Image	An image shown inside the cell when light mode is active.
Icon	An icon shown at the start (left side) of the cell.
Divider	Shows a line under the cell to separate it from others, if supported. Default is off.
Options	A list of choices is shown to the user in dropdowns, radio buttons, or multi-select elements. Only needed for cells that require selection.
Custom Color	controls the color styling of text or divider.
Cell ID	This is the unique name for the cell. It's used to find or manage the cell later. If both `cell_id` and `callback` are provided, the system will use `cell_id`.
Callback	This is the action name linked to the cell when a user interacts with it. You must add this when creating the cell. Once the cell is saved, this value can’t be changed.
Cell Order	This controls where the cell appears inside the row (from left to right). Like callback, it must be set when creating the cell and can’t be changed later.
Form	The type of the element. You must choose this when creating the cell, and it can't be changed later.
Value	The default or current value for the cell (like a pre-selected option).
Style	The visual style of the element (e.g., filled, outlined). You need to set this when creating the cell, and it can't be changed after saving.
Version	A system-generated version number that updates automatically whenever the cell is changed.
Body	Main text content displayed inside the cell.
Helper	Helpful text shown below the cell to guide the user. Usually used for tips or extra context.
Error	Error message shown when the user enters something wrong. It usually replaces the helper text.
Prefix	Text that appears at the beginning of an input field (before the user's input).
Suffix	Text that appears at the end of an input field (after the user's input).

📱 Android & iOS Interface

The Dropdown Menu element adapts its appearance and layout behavior based on the platform to align with native UI guidelines:

👇🏻 Action (onClick)

Element	Purpose	Supports Actions	Notes
Dropdown Menu	To allow the user to select a single option from a list of predefined choices.	❌	Informational/structural use only. Not intended to trigger interactive actions.