RadioButtonList

RadioButtonList displays a list of items with radio buttons for single selection

import { RadioButtonList } from "@roku-sdk/components";

RadioButtonList(props: IRadioButtonListProps): JSX.Element

Description

RadioButtonList displays a list of items with radio buttons for single selection.

Each item shows a text string and a radio button icon positioned to the left. Unlike CheckList which allows multiple selections, RadioButtonList enforces single selection - selecting one item automatically deselects the previous.

Data Binding

The content field should be set to a ContentNode with one child ContentNode for each item. Each child ContentNode should have a TITLE attribute (string) that specifies the label text for that item.

<contentNode>
    <contentNode title="Option A" />
    <contentNode title="Option B" />
    <contentNode title="Option C" />
</contentNode>

Parameters

Name	Type	Description
`props`	IRadioButtonListProps

Example

<radioButtonList
    itemSize={[440, 48]}
    checkedItem={0}
    checkOnSelect={true}
    content={
        <contentNode>
            <contentNode title="Low Quality" />
            <contentNode title="Medium Quality" />
            <contentNode title="High Quality" />
        </contentNode>
    }
/>

<radioButtonList
    itemSize={[440, 48]}
    checkedIconUri="pkg:/images/radio-on.png"
    focusedCheckedIconUri="pkg:/images/radio-on-focused.png"
    content={
        <contentNode>
            <contentNode title="English" />
            <contentNode title="Spanish" />
        </contentNode>
    }
/>

Types

IRadioButtonListProps

Properties for the RadioButtonList component.

Extends ILabelListProps with single-selection radio button state management and custom radio icon options.

Name	Type	Description
`checkedIconUri?`	`Uri`	URI for the radio button icon when item is selected and not focused. Typically shows a filled circle indicator. Only set to specify a custom bitmap different from default.
`checkedItem?`	`number`	Specifies the index of the currently selected (checked) radio button item. See below.
`checkOnSelect?`	`boolean`	Controls whether pressing OK automatically sets `checkedItem` to the focused item index. See below.
`content`	`Element`	The data model for the list. Should be a ContentNode with child ContentNodes, one for each item in the list.
`focusedCheckedIconUri?`	`Uri`	URI for the radio button icon when item is selected and has focus. Typically shows a filled circle indicator with focus highlight. Only set to specify a custom bitmap different from default.

Extends ILabelListProps.

IRadioButtonListProps.checkedItem

Specifies the index of the currently selected (checked) radio button item. Only one item can be selected at a time.

Set to -1 to indicate no item is selected.

IRadioButtonListProps.checkOnSelect

Controls whether pressing OK automatically sets checkedItem to the focused item index.

When false, developer must manage selection manually via checkedItem.