single-choice-radio
The
single-choice-radio component allows users to make a single selection from a pre-defined set of options.Version compatibility
single-choice-radiowas introduced in version 4.36.1 of the JourneyApps Container.- It was updated visually and the
disabledattribute was introduced in version 4.75.0 of the JourneyApps Runtime.
main.view.xml
<var name="animal_type" type="single-choice">
<option key="carnivore">Carnivore</option>
<option key="herbivore">Herbivore</option>
<option key="omnivore">Omnivore</option>
</var>
<single-choice-radio label="Options" bind="animal_type" />
Version compatibility
disabled was introduced in version 4.75.0 of the JourneyApps Runtime.Version compatibility
label-case was introduced in version 4.80.0 of the JourneyApps Runtime.Version compatibility
mode was introduced in version 4.83.0 of the JourneyApps Runtime.Optional
Type:
row | columnDefault:
columnConfigure the layout of the list of options.
row lists options horizontally; column lists options vertically.When using
single-choice-integer you can omit the key attribute on options. The value passed to the function assigned to on-change will correspond to the key starting from 0.Version compatibility
radio-position was introduced in version 4.86.1 of the JourneyApps Runtime.Optional
Type:
left | rightDefault:
leftSpecify where the radio button is positioned in the component (relative to the option label).
main.view.xml
<columns>
<column>
<info>radio-position="left"</info>
<single-choice-radio radio-position="left" bind="favorite_color_single" label="Favorite color" />
</column>
<column>
<info>radio-position="right"</info>
<single-choice-radio radio-position="right" bind="favorite_color_single" label="Favorite color" />
</column>
</columns>
The following component methods are available when an
id is assigned to the component and component.singleChoiceRadio({id:'my-id'}) is called from JS/TS:Programmatically scroll until the
single-choice-radio component is visible in the view.Programmatically select an item by its label.
main.view.xml
<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-radio id="my-radio" bind="favorite_color" label="Favorite Color" />
main.js
function select() {
component.singleChoiceRadio({id: 'my-radio'}).selectItem('Yellow');
}
Programmatically select an item by its index. Note: Indexes begin at 1.
main.view.xml
<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-radio id="my-radio" bind="favorite_color" label="Favorite Color" />
main.js
function select() {
component.singleChoiceRadio({id: 'my-radio'}).selectItemByIndex(2);
// Selects "Red"
}
Last modified 3mo ago