---
title: "single-choice-radio"
description: "Select one option using radio controls."
permalink: /docs/runtime/all-ui-components/single-choice-radio/
---
# single-choice-radio
Refreshed the component's appearance and added the `disabled` attribute.
## Overview
The `single-choice-radio` component allows users to make a single selection from a pre-defined set of options.
### Basic Example
**main.view\.xml**
```xml
```
## Advanced Attributes
### `mode`
Configure the layout of the list of options. `row` lists options horizontally; `column` lists options vertically.
### `radio-position`
Specify where the radio button is positioned in the component (relative to the option label).
**main.view\.xml**
```xml
radio-position="left"radio-position="right"
```
### `align-content`
### `align-label`
### `disabled`
### `id`
### `label-case`
### `label-color`
### `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`.
### `show-if`
### `hide-if`
## Common Attributes
### `bind`
### `label`
### `required`
## Component Methods
The following component methods are available when an [`id`](/docs/runtime/common-component-attributes/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**
```xml
```
**main.js**
```javascript
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**
```xml
```
**main.js**
```javascript
function select() {
component.singleChoiceRadio({id: 'my-radio'}).selectItemByIndex(2);
// Selects "Red"
}
```