CheckList

CheckList displays a list of items with optional checkboxes for selection

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

CheckList(props: ICheckListProps): JSX.Element

Description

CheckList displays a list of items with optional checkboxes for selection.

Each item shows a text string and an optional checkbox icon positioned to the left. Checkboxes display as empty (unchecked) or with a checkmark (checked).

Items can optionally hide their checkbox by setting HIDEICON attribute to false on the ContentNode, allowing mixed checkbox and regular list items.

Parameters

Name	Type	Description
`props`	ICheckListProps

Example

<checkList
    itemSize={[440, 48]}
    checkedState={[true, false, false]}
    checkOnSelect={true}
    content={
        <contentNode>
            <contentNode title="Option 1" />
            <contentNode title="Option 2" />
            <contentNode title="Option 3" />
        </contentNode>
    }
/>

<checkList
    itemSize={[440, 48]}
    content={
        <contentNode>
            <contentNode title="Selectable Option" />
            <contentNode title="Regular Item" HIDEICON={false} />
        </contentNode>
    }
/>

Types

ICheckListProps

Properties for the CheckList component.

Extends ILabelListProps with checkbox state management and custom checkbox icon options.

Name	Type	Description
`checkedIconUri?`	`Uri`	URI for the checkbox icon when item is checked and not focused. Typically includes the outline of a box with a checkmark indicator inside. Only set to specify a custom bitmap different from default.
`checkedState?`	`boolean[]`	Specifies the checked state of each item in the list. See below.
`checkOnSelect?`	`boolean`	Controls whether pressing OK toggles the checked state of the focused item. When `false`, developer must manage checked state manually via `checkedState`.
`focusedCheckedIconUri?`	`Uri`	URI for the checkbox icon when item is checked and has focus. Typically includes the outline of a box with a checkmark indicator inside. Only set to specify a custom bitmap different from default.
`focusedUncheckedIconUri?`	`Uri`	URI for the checkbox icon when item is unchecked and has focus. Typically includes the outline of an empty box. Only set to specify a custom bitmap different from default.
`uncheckedIconUri?`	`Uri`	URI for the checkbox icon when item is unchecked and not focused. Typically includes the outline of an empty box. Only set to specify a custom bitmap different from default.

Extends ILabelListProps.

ICheckListProps.checkedState

Specifies the checked state of each item in the list. true indicates checked, false indicates unchecked.

When reading, always includes one value per item. When writing with fewer values than items, unspecified items remain unchanged.