> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.itential.com/itential-cloud/studio/json-forms/use-dropdown-elements/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.itential.com/_mcp/server.

# Use the dropdown element

> How to configure static and dynamic dropdown elements in a JSON Form, including Source-to-Target and JST-based data mapping.

A dropdown element presents a list of options for the form operator to choose from. The options can be **static** (values you define at design time) or **dynamic** (values fetched from an API at runtime).

Use a static dropdown when the list of valid options is fixed and known in advance — for example, a list of environments like `dev`, `staging`, and `production`. Use a dynamic dropdown when the options depend on live system state, such as a list of devices currently managed by Configuration Manager or a list of users in an external directory. Because a dynamic dropdown fetches its options when the form loads, it always reflects current data without requiring manual updates to the form.

Dynamic dropdowns support two approaches to mapping the API response to dropdown options: **Source-to-Target** (extract a property directly from the response) and **JSON Transformation** (apply a JST to reshape the response before mapping). Use Source-to-Target when the response already contains a flat list of values. Use a JST when the data requires filtering, restructuring, or computation first.

When a single API endpoint is not sufficient, **additional bindings** let you combine results from multiple API calls into one dropdown.

## Add a dropdown to a form

#### Open or create a form

Go to **Studio > JSON Forms**. Select an existing form or click **+** to create a new one.

![](/_fern-img/2059b17bbf893be218991946ea49b9e75e857f052df36c07872c02b522e4512e.webp)

#### Add the dropdown element

Drag the **Dropdown** element onto the canvas.

![](/_fern-img/635b6ba469a88d1cc137f4af12351fef0a95fe1504456a7f559f6413dff06b8a.webp)

#### Open the Configure dialog

Hover over the element and click the gear icon.

![](/_fern-img/b2258f94cf1ed6b63335aebf89d0972c7e3b5890ae11bb8f668026449a4119f5.webp)

#### Set the label

Enter a name in the **Label** field (required) and make any other needed selections. Click **Options** (lower left) to open the dropdown options configuration.

![](/_fern-img/2a8566d8dd9c4b0183a2473e99709f2dd02c36f5faaba134be0e26f38bb91bb6.webp)

## Configure a static dropdown

#### Select Static

Select **Static** and click **+ Option** to add items. Enter a value for each. Use the trashcan icon to remove an item. Click **Back** when finished.

![](/_fern-img/5c0dd246a8c91437b070fed8e54325c22173c6526179317fc15228118a4e1eed.webp)

#### Save

Click **Save**.

![](/_fern-img/0c29aada5738c741609e59b1f83e46356841b6e94a4b92f099119298478a3f37.webp)

#### Verify

Click the dropdown arrow to confirm the configured options appear.

![](/_fern-img/16380fc9b6deb8fee02516d1fa39b09e1c9db3ae2fffe7ee1fddc7a40cd208b4.webp)

## Configure a dynamic dropdown

#### Open the Configure dialog

Follow steps 3 and 4 from [Add a dropdown to a form](#add-a-dropdown-to-a-form).

#### Select Dynamic

Select **Dynamic**.

![](/_fern-img/8e1bf7b6abdbd9b90201a0e987bfc6354c3a9fe55746621cad5bf8c8993ce193.webp)

#### Configure the API request

Set the **Method**, **Base URL**, and **API Route** under **Request Configuration**, then click **Make API Call**.

![](/_fern-img/e217be6ae2a327a62f33b24f221e513767ffb7ca0a2f63296effb58bf789f1a1.webp)

The response appears in the **Response Body**.

![](/_fern-img/543fb3496b9280b6fdc6cdfc9e22d146564049842ae0c3d675077323791bf427.webp)

#### Map the data

Choose a data mapping method under **Data Mapping**.

**Source-to-Target:** Select **Source-To-Target**, enter the **Source Property** and **Property Key** (in the example below, `/results` and `/id`), then click **Query Data**.

![](/_fern-img/7cf9e58a9d1e433809c4005df937b57276befafc6d8062765c80f0c4b2f57609.webp)![](/_fern-img/6de4d62822a8d64b53ccebd095ad00fb70dfbd0b7157b2865553be7606cb38d9.webp)

**JSON Transformation:** Select **JSON Transformation**, choose a JST from the dropdown, then click **Run Transformation**. The data is parsed and the result is displayed — in the example below, the `id` field.

![](/_fern-img/8e59cea138a344acbec3b7b7c6879ad45f74eae80c8b2522221c8c17b9cbbfc9.webp)![](/_fern-img/b2ead292ab16ace48ae02dee51994bd21331b1fd9077c76876fdf6f96913048c.webp)![](/_fern-img/1f6a2d44e6d9caa07665754cc83ed39353cc132209376937a6459ad31b9db04c.webp)![](/_fern-img/e50400abe9f8b1592b0311f1dd6179d80fb7916f19d1bce02a9f8ddd8916accd.webp)

If **Run Transformation** is unavailable, run the JST at least once before using it in a JSON Form.

## Add additional bindings

Additional bindings let you combine results from multiple API calls into a single dropdown. If one binding returns `[a,b,c]` and another returns `[d,e,f]`, the dropdown displays `[a,b,c,d,e,f]`.

![](/_fern-img/98791639d45673bbd38effa47090852334f39f5ddae70817e6996aa7c11a114c.webp)

Click **+ Additional Binding** to add another API configuration. To configure it, follow the [dynamic dropdown](#configure-a-dynamic-dropdown) steps above. To remove a binding, select it and click **Remove Data Binding**.

> How to configure static and dynamic dropdown elements in a JSON Form, including Source-to-Target and JST-based data mapping.