ToolJet/docs/versioned_docs/version-2.50.0-LTS/widgets/dropdown.md

id	title
dropdown	Dropdown

Dropdown

The Dropdown component can be used to collect user input from a list of options.

Properties

<div style={{ width:"135px"}}> Property	<div style={{ width:"100px"}}> Description
Label	Set the value of the label in the dropdown. The value can also be set dynamically using JavaScript. For example, set the Label value to Select the {{components.text1.text}}
Default value	Specify the default selected option in the dropdown
Option value	The option values correspond to the different options available in the dropdown. Dynamically set the option values based on your query, for example: {{queries.datasource.data.map(item => item.value)}}
Option labels	The option values correspond to the different options available in the dropdown. Dynamically set the option values based on your query, for example: {{queries.datasource.data.map(item => item.value)}}
Options loading state	Enable this property to display a loading state in the widget. By default, it is turned off. You can programmatically toggle it by setting the values to {{true}} or {{false}} using the Fx button
Default placeholder	Set a placeholder value that appears in the dropdown when no default option is selected or set
Advanced	The option labels represent the displayed labels for each value in the dropdown list. Dynamically set the option labels based on your query, for example: {{queries.datasource.data.map(item => item.value)}}

For example:

{{[	{label: 'One',value: 1,disable: false,visible: true},{label: 'Two',value: 2,disable: false,visible: true},{label: 'Three',value: 3,disable: false,visible: true}	]}}

Each object in the array should include the following key-value pairs:

<div style={{ width:"100px"}}> Key	<div style={{ width:"100px"}}> Value
label	Option label
value	Option value
disable	Set to true to disable the option for selection, and false to keep it enabled
visible	Set to true to display the option in the dropdown list, and false to hide it

Events

<div style={{ width:"135px"}}> Event	<div style={{ width:"100px"}}> Description
On select	On select event is triggered when an option is selected
On search text changed	This event is triggered whenever the user searches through the options by typing on the dropdown's input box. The corresponding search text will be exposed as searchText

Component Specific Actions (CSA)

<div style={{ width:"100px"}}> Actions	<div style={{ width:"135px"}}> Description	<div style={{ width:"135px"}}> How To Access
selectOption	You can set an option on the Dropdown component via a component-specific action within any event handler.	The option to employ a RunJS query to execute component-specific actions such as await components.dropdown1.setOption(1)

Exposed Variables

<div style={{ width:"100px"}}> Variable	<div style={{ width:"150px"}}> Description	<div style={{ width:"135px"}}> How To Access
Value	Holds the value of the currently selected item on the dropdown.	Value can be accesed using {{components.dropdown1.value}}
searchText	This variable is initially empty and will hold the value whenever the user searches on the dropdown.	searchText's value can be accesed using{{components.dropdown1.searchText}}
label	The variable label holds the label name of the dropdown.	label's value can be accesed using{{components.dropdown1.searchText}}
optionLabels	The optionLabels holds the option labels for the values of the dropdown.	optionLabels can be accesed using{{components.dropdown1.optionLabels}} for all the option labels in the array form or {{components.dropdown1.optionLabels[0]}} for particular option label
selectedOptionLabel	The variable holds the label of the selected option in the dropdown components.	The selected option label can be accessed dynamically using {{components.dropdown1.selectedOptionLabel}}

Validation

Custom Validation

Add a validation for the options in Dropdown widget using the ternary operator.

General

Tooltip

A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.

Under the General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.

Layout

<div style={{ width:"100px"}}> Layout	<div style={{ width:"100px"}}> Description	<div style={{ width:"135px"}}> Expected Value
Show on desktop	Toggle on or off to display desktop view.	You can programmatically determining the value by clicking on Fx to set the value {{true}} or {{false}}
Show on mobile	Toggle on or off to display mobile view.	You can programmatically determining the value by clicking on Fx to set the value {{true}} or {{false}}

Styles

<div style={{ width:"100px"}}> Style	<div style={{ width:"100px"}}> Description
Border radius	Use this property to modify the border radius of the dropdown. The field expects only numerical value from 1 to 100. By default, it's set to 0
Visibility	This is to control the visibility of the widget. If {{false}} the widget will not visible after the app is deployed. It can only have boolean values i.e. either {{true}} or {{false}}. By default, it's set to {{true}}
Selected text color	Change the text color of the selected option in the widget by providing the HEX color code or choosing the color from color picker
Disable	This property only accepts boolean values. If set to {{true}}, the widget will be locked and becomes non-functional. By default, its value is set to {{false}}
Align text	You can align the text inside the widget in following ways: left, right, center, justified

:::info Any property having Fx button next to its field can be programmatically configured. :::