Dropdown
Pick one option from a list you define or bind to data.
Pick one option from a list you define or bind to data.
Add it to an app
- Open the app builder and find Dropdown in the component palette.
- Insert it into the intended region or container.
- Set its properties in the inspector. Use a literal for a fixed value or a binding for a value supplied by the app.
- Connect its events where the app should respond to a user gesture.
- Preview with representative data and save after resolving validation problems.
The type name in the builder’s code view is select.
Settings
| Setting | Accepted value | Required | Default | What it controls |
|---|---|---|---|---|
Label (label) | string | No | "Select" | Supports expression bindings. Shown above the control; also its accessible name. The listed default is inserted when adding a new component. |
Options (options) | list of value | No | [] | Supports expression bindings. Strings, or { value, label } objects. The listed default is inserted when adding a new component. |
Values available to bindings
| Value | Type | Initial value | Meaning |
|---|---|---|---|
value | string | "" | The chosen option's value. |
Refer to these values through components.<component-id>.<value> in a binding. Use the identifier assigned to this instance of Dropdown, not the component type name.
Events
onChange— An option was picked, aftervalueis published.
Connect only the actions the app needs. An event can fetch results, run an enabled data source, set state, update another component, show a notification, or navigate where supported.
Keyboard and accessible labels
Accessible label source: label, else 'Select'.
- Arrow keys change the option.
Example: Static options
| Setting | Example value |
|---|---|
label | "Category" |
options | [{"label":"All categories","value":""},{"label":"Bug","value":"bug"},"question"] |
Example: Bound options feeding app state
| Setting | Example value |
|---|---|
label | "Topic" |
options | "{{ app.topics }}" |
When onChange occurs, the example performs:
setStateValuewith {"key":"topic","value":"{{ components.Topic.value }}"}
If it is empty or unavailable
Check the source binding, the selected item, and the app’s access. A hosted document, table, review, or storage component needs the corresponding app capability; an offline preview cannot supply live private data. A source running with no results is different from an invalid binding. Inspect the app’s workflow and data source before changing the presentation.