StdDlgItemGroup

Groups StdDlg item nodes with reduced spacing and optional radio-button exclusivity

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

StdDlgItemGroup(props: IStdDlgItemGroupProps): JSX.Element

Description

Groups StdDlg item nodes with reduced spacing and optional radio-button exclusivity.

Attach onSelected to each StdDlgActionCardItem to handle selection changes.

Parameters

Name	Type	Description
`props`	IStdDlgItemGroupProps

Example

const [selectedOption, setSelectedOption] = createSignal(0);

<stdDlgItemGroup selectedIndex={selectedOption()}>
    <stdDlgActionCardItem iconType="radiobutton" onSelected={() => setSelectedOption(0)}>
        <stdDlgTextItem text="Option A" />
    </stdDlgActionCardItem>
    <stdDlgActionCardItem iconType="radiobutton" onSelected={() => setSelectedOption(1)}>
        <stdDlgTextItem text="Option B" />
    </stdDlgActionCardItem>
    <stdDlgActionCardItem iconType="radiobutton" onSelected={() => setSelectedOption(2)}>
        <stdDlgTextItem text="Option C" />
    </stdDlgActionCardItem>
</stdDlgItemGroup>

Types

IStdDlgItemGroupProps

Properties for the StdDlgItemGroup component.

Visually groups StdDlgItemBase child nodes with reduced vertical spacing. Enforces a radio-button "only 1 of N" rule for StdDlgActionCardItem children with iconType="radiobutton".

Name	Type	Description
`selectedIndex?`	`number`	Index of the currently selected child node. Updated when the user selects an ActionCardItem child. Enforces radio-button exclusivity.

Extends IStdDlgItemBaseProps.

Description

Parameters

Example

Types

IStdDlgItemGroupProps

What’s Next