# single-choice-radio

## Overview

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

{% hint style="info" %}
**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.
  {% endhint %}

### Basic Example

{% code title="main.view\.xml" %}

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

{% endcode %}

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-a15e446cf9e9219e52baebd0f903a6657c834436%2Fsingle-choice-radio-example.png?alt=media)

## Standard Attributes

### `bind`

{% content-ref url="../xml-fields/bind" %}
[bind](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/bind)
{% endcontent-ref %}

### `label`

{% content-ref url="../xml-fields/label" %}
[label](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/label)
{% endcontent-ref %}

### `required`

{% content-ref url="../xml-fields/required" %}
[required](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/required)
{% endcontent-ref %}

## Advanced Attributes

### `align-content` <a href="#standard-attributes" id="standard-attributes"></a>

{% content-ref url="../xml-fields/align-content" %}
[align-content](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/align-content)
{% endcontent-ref %}

### `align-label`

{% content-ref url="../xml-fields/align-label" %}
[align-label](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/align-label)
{% endcontent-ref %}

### `disabled`

{% hint style="info" %}
**Version compatibility**

`disabled` was introduced in version **4.75.0** of the JourneyApps Runtime.
{% endhint %}

{% content-ref url="../xml-fields/disabled" %}
[disabled](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/disabled)
{% endcontent-ref %}

### `id`

{% content-ref url="../xml-fields/id" %}
[id](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/id)
{% endcontent-ref %}

### `label-case`

{% hint style="info" %}
**Version compatibility**

`label-case` was introduced in version **4.80.0** of the JourneyApps Runtime.
{% endhint %}

{% content-ref url="../xml-fields/label-case" %}
[label-case](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/label-case)
{% endcontent-ref %}

### `label-color`

{% content-ref url="../xml-fields/label-color" %}
[label-color](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/label-color)
{% endcontent-ref %}

### `mode`

{% hint style="info" %}
**Version compatibility**

`mode` was introduced in version **4.83.0** of the JourneyApps Runtime.
{% endhint %}

**Optional**

**Type**: `row` | `column`

**Default**: `column`

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

### `on-change`

{% content-ref url="../xml-fields/on-change" %}
[on-change](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/on-change)
{% endcontent-ref %}

{% hint style="info" %}
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`.
{% endhint %}

### `radio-position`

{% hint style="info" %}
**Version compatibility**

`radio-position` was introduced in version **4.86.1** of the JourneyApps Runtime.
{% endhint %}

**Optional**

**Type**: `left` | `right`

**Default**: `left`

Specify where the radio button is positioned in the component (relative to the option label).

{% code title="main.view\.xml" %}

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

{% endcode %}

<figure><img src="https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2FpbsEa5Tcbd7nXzsxXHE7%2Fimage.png?alt=media&#x26;token=21336ec2-cf4c-4eca-8f8a-cc3d11e1ea5b" alt=""><figcaption></figcaption></figure>

### `show-if` and `hide-if`

{% content-ref url="../xml-fields/show-if" %}
[show-if](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/show-if)
{% endcontent-ref %}

{% content-ref url="../xml-fields/hide-if" %}
[hide-if](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/hide-if)
{% endcontent-ref %}

## Component Methods

The following component methods are available when an [`id`](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/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.

{% code title="main.view\.xml" %}

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

```

{% endcode %}

{% code title="main.js" %}

```javascript
function select() {
    component.singleChoiceRadio({id: 'my-radio'}).selectItem('Yellow');
}
```

{% endcode %}

### `selectItemByIndex`

Programmatically select an item by its index. **Note**: Indexes begin at 1.

{% code title="main.view\.xml" %}

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

```

{% endcode %}

{% code title="main.js" %}

```javascript
function select() {
    component.singleChoiceRadio({id: 'my-radio'}).selectItemByIndex(2);
    // Selects "Red"
}
```

{% endcode %}