- Add the Dropdown element when users should select one option. - Add the Multi Select element when users should select more than one option.
- Set Labels to the list of option names users should see.
- Set Values to the list of saved values if the saved value should be different from the label.
- Leave Values empty if each option label should also be used as its value.
- Use Items JSON when you want to provide advanced option data in one field.
- Items JSON should be an array such as [{"label":"Design","value":"design"},{"label":"Development","value":"development"}].
- Set Placeholder to control the text shown before a value is selected.
- Turn Search on if users should be able to filter the options.
- Set Search placeholder to control the text shown inside the search field.
- Use Dropdown position to control whether the list opens automatically, above, or below the input.
- Use Dropdown mode to control how the list is displayed where supported.
- For Dropdown, use Selected value to preselect or control one value from Bubble.
- For Multi Select, use Selected values to preselect or control multiple values from Bubble.
- For Multi Select, set Max select if users should only be allowed to choose a limited number of options.
- Use Close after select if the picker should close after a user selects an option.
- Use Show scroll indicator if the option list should show a scroll indicator.
- Use Max dropdown height to limit how tall the opened list can become.
- Use the selected value and selected label states to access the current Dropdown selection.
- Use the selected values, selected labels, and selected count states to access the current Multi Select selection.
- Use the is open state to know when the dropdown list is visible.
- Use the search text state to know what the user typed in the search field.
- Use the item selected event when a user selects an option.
- Use the item unselected event when a user removes an option in Multi Select.
- Use the selection changed event when the selected value or selected values change.
- Use the opened and closed events to run workflows when the picker opens or closes.
- Use the search changed event to run workflows when the search text changes.
- Use Open dropdown and Close dropdown actions to control the picker from workflows.
- Use Clear selection to remove the current selection.
- Use Set selected value for the Dropdown element.
- Use Set selected values for the Multi Select element.
- Customize trigger styling for the closed input.
- Customize dropdown styling for the opened list.
- Customize search styling for the search input.
- Customize item styling for option rows.
- Customize chip styling for selected Multi Select tags.