single-choice-dropdown (legacy docs)

These single-choice-dropdown docs are out of date

New functionality and features were added to single-choice-dropdown in version 4.84.0 of the JourneyApps runtime. Please refer to the latest docs here.

A single choice dropdown allows the user to select a single option from a dropdown menu.

Note: If there are more than 12 items displayed, a type-ahead filter is displayed.

<var name="meal_type" type="single-choice">
    <option key="meat">Meat</option>
    <option key="vegetarian">Vegetarian</option>
    <option key="vegan">Vegan</option>
</var>

<single-choice-dropdown label="Meal Type" bind="meal_type" />

Configuration

Option	Required	Details
bind	required	Variable/field in which to store the input value of the field. Must be a variable or field of type single-choice, single-choice-integer or boolean. Note that the options displayed in the list are derived from the options defined for the field specified here.
label	required	Text to display above the dropdown. It can be a format string to make the text dynamic. If not specified, defaults to the value of the field specified in bind. To have no label, specify label="".
required	optional	true if this field must have a value before proceeding to another view. Defaults to false.
show-if	optional	Controls whether the component is hidden or shown. The argument specified to show-if can either be a literal boolean value (true or false), or it can specify a variable, parameter or field that can be a string, number, object, etc. that evaluates to false or evaluates to true. If the component also specifies required="true", but it is hidden, the validation will be ignored/skipped.
hide-if	optional	The opposite of show-if (see above).
on‑change	optional	Function to call after a new value is selected. E.g. on-change="someFunction($value)"