single-choice-dropdown
Overview
A single-choice-dropdown
component allows users to make a single selection from a pre-defined set of options in a dropdown component.
Basic Example
<var name="selected_country" type="single-choice">
<option key="us">USA</option>
<option key="uk">UK</option>
<option key="de">Germany</option>
...
</var>
<single-choice-dropdown label="Country of residence" bind="selected_country" required="false" />


Standard Attributes
bind
bindbind
label
labellabel
required
requiredrequired
Advanced Attributes
align-content
align-contentalign-content
align-dialog-content
align-dialog-content
Optional
Type: center
| left
| right
Default: center
Specifies how the content of the list of options dialog should be aligned. This includes the display value of each option, as well as the header text of the dialog.
<single-choice-dropdown label="Country of residence" align-dialog-content="left" bind="selected_country" />
align-label
align-labelalign-label
clear-button-visibility
clear-button-visibilityclear-button-visibility
dialog-title
dialog-title
Optional
Type: string
(static text, a format string or the return value of a JS/TS function)
Default: "Choose an option"
Header text of the dialog that displays the list of options of the single-choice-dropdown
.
<single-choice-dropdown label="Country of residence" dialog-title="Choose the country of residence" bind="selected_country" />
disabled
disableddisabled
empty-message
empty-message
Optional
Type: string
(static text, a format string or the return value of a JS/TS function)
Default: unset
Text that is displayed if no options are available to list once the user opens the single-choice-dropdown
.
<single-choice-dropdown label="Country of residence" bind="selected_country" empty-message="No countries are available. Please contact your administrator." />
icon-position
icon-positionicon-position
id
idid
label-case
label-caselabel-case
label-color
label-colorlabel-color
modifier-text
modifier-textmodifier-text
on-change
on-changeon-change
placeholder
placeholderplaceholder
search-controls
search-controls
Optional
Type: auto
| none
| show
Default: auto
Set the visibility of the search box of the single-choice-dropdown
component. auto
shows the search box when the list of options contains 12 options or more. none
never shows the search box, and show
always shows the search box at the top of the list of options.
<single-choice-dropdown label="Country of residence" bind="selected_country" search-controls="show" />
show-if
and hide-if
show-ifhide-ifshow-if
and hide-if
Component Methods
The following component methods are available when an id
is assigned to the component and component.singleChoiceDropdown({id:'my-id'})
is called from JS/TS:
clear
clear
Programmatically clear the selected value bound to the single-choice-dropdown
.
clearSearch
clearSearch
Programmatically clear a value entered into the search box.
openDropdown
openDropdown
Programmatically open the list of items.
closeDropdown
closeDropdown
Programmatically close the list of items.
scrollDown
scrollDown
Programmatically scroll down the list of items when the single-choice-dropdown
is opened.
scrollIntoView
scrollIntoView
Programmatically scroll until the single-choice-dropdown
is visible in the view.
scrollUp
scrollUp
Programmatically scroll up the list of items when the single-choice-dropdown
is opened.
selectItem
selectItem
Programmatically select an item from the list by its label.
<var name="favorite_color" type="single-choice">
<option key="green">Green</option>
<option key="red">Red</option>
<option key="yellow">Yellow</option>
</var>
<single-choice-dropdown id="my-dropdown" bind="favorite_color" label="Favorite Color" />
function select() {
component.singleChoiceDropdown({id: 'my-dropdown'}).openDropdown(); // Need to open the dropdown first
component.singleChoiceDropdown({id: 'my-dropdown'}).selectItem('Yellow');
}
selectItemByIndex
selectItemByIndex
Programmatically select an item from the list by its index. Note: Indexes begin at 1.
<var name="favorite_color" type="single-choice">
<option key="green">Green</option>
<option key="red">Red</option>
<option key="yellow">Yellow</option>
</var>
<single-choice-dropdown id="my-dropdown" bind="favorite_color" label="Favorite Color" />
function select() {
component.singleChoiceDropdown({id: 'my-dropdown'}).openDropdown(); // Need to open the dropdown first
component.singleChoiceDropdown({id: 'my-dropdown'}).selectItemByIndex(2);
// Selects "Red"
}
setSearch
setSearch
Programmatically enter a search value and triggers a search of the single-choice-dropdown
.
Last updated