enact logoEnact
Edit on GitHub

sandstone/CheckboxItem

Sandstone styled item components with a toggleable checkbox.

import CheckboxItem from '@enact/sandstone/CheckboxItem';

Members

CheckboxItemComponent

A Sandstone-styled item with a checkbox component.

CheckboxItem will manage its selected state via Toggleable unless set directly.

import CheckboxItem from '@enact/sandstone/CheckboxItem';

CheckboxItemBaseComponent

A Sandstone-styled item with a checkbox component.

CheckboxItem may be used to allow the user to select a single option or used as part of a Group when multiple selections are possible.

Usage:

<CheckboxItem
	defaultSelected={selected}
	onToggle={handleToggle}
>
 Item with a Checkbox
</CheckboxItem>
import {CheckboxItemBase} from '@enact/sandstone/CheckboxItem';
Properties
css
Object

Customizes the component by mapping the supplied collection of CSS class names to the corresponding internal elements and states of this component.

The following classes are supported:

  • checkboxItem - The root class name

icon
StringObject

The icon content.

May be specified as either:

  • A string that represents an icon from the iconList,

  • An HTML entity string, Unicode reference or hex value (in the form '0x...'),

  • A URL specifying path to an icon image, or

  • An object representing a resolution independent resource (See ui/resolution)

indeterminate
Boolean

Enables the "indeterminate" state.

An indeterminate, mixed, or half-selected state is typically used in a hierarchy or group to represent that some, not all, children are selected.

NOTE: This does not prevent updating the selected state. Applications must control this property directly.

indeterminateIcon
String

The icon to be used in the indeterminate state.

May be specified as either:

  • A string that represents an icon from the iconList,

  • An HTML entity string, Unicode reference or hex value (in the form '0x...'),

  • A URL specifying path to an icon image, or

  • An object representing a resolution independent resource (See ui/resolution)

selected
Boolean

If true the checkbox will be selected.

slotBefore
Node

Nodes to be inserted after the checkbox and before children.

CheckboxItemDecoratorHigher-Order Component

Adds interactive functionality to CheckboxItem.

import {CheckboxItemDecorator} from '@enact/sandstone/CheckboxItem';
ArrayBooleanFunctionModuleNumberObjectString