single-choice-radio

Overview

The single-choice-radio component allows users to make a single selection from a pre-defined set of options.

Version compatibility

• single-choice-radio was introduced in version 4.36.1 of the JourneyApps Container.

• It was updated visually and the disabled attribute was introduced in version 4.75.0 of the JourneyApps Runtime.

Basic Example

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" />

Standard Attributes

bind

bind

label

label

required

required

Advanced Attributes

align-content

align-content

align-label

align-label

disabled

Version compatibility

disabled was introduced in version 4.75.0 of the JourneyApps Runtime.

disabled

id

id

label-case

Version compatibility

label-case was introduced in version 4.80.0 of the JourneyApps Runtime.

label-case

label-color

label-color

mode

Version compatibility

mode was introduced in version 4.83.0 of the JourneyApps Runtime.

Optional

Type: row | column

Default: column

Configure the layout of the list of options. row lists options horizontally; column lists options vertically.

on-change

on-change

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.

radio-position

Version compatibility

radio-position was introduced in version 4.86.1 of the JourneyApps Runtime.

Optional

Type: left | right

Default: left

Specify 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>

show-if and hide-if

show-if

hide-if

Component Methods

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:

scrollIntoView

Programmatically scroll until the single-choice-radio component is visible in the view.

selectItem

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');
}

selectItemByIndex

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"
}