single-choice-radio
Last updated
Last updated
The single-choice-radio
component allows users to make a single selection from a pre-defined set of options.
<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" />
bind
label
required
align-content
align-label
disabled
id
label-case
label-color
mode
Optional
Type: row
| column
Default: column
Configure the layout of the list of options. row
lists options horizontally; column
lists options vertically.
on-change
radio-position
Optional
Type: left
| right
Default: left
Specify where the radio button is positioned in the component (relative to the option label).
<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
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.
<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" />
function select() {
component.singleChoiceRadio({id: 'my-radio'}).selectItem('Yellow');
}
selectItemByIndex
Programmatically select an item 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-radio id="my-radio" bind="favorite_color" label="Favorite Color" />
function select() {
component.singleChoiceRadio({id: 'my-radio'}).selectItemByIndex(2);
// Selects "Red"
}