Skip to content
Enact

limestone/CheckboxItem

Edit on GitHub

Limestone styled item components with a toggleable checkbox.

Loading Live Preview

Members

Section titled “Members ”

CheckboxItem   Component

Section titled “CheckboxItem   Component ”

A Limestone-styled item with a checkbox component.

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

Extends: limestone/CheckboxItemlimestone/CheckboxItem.CheckboxItemBase
Wrapped with: limestone/CheckboxItemlimestone/CheckboxItem.CheckboxItemDecorator

CheckboxItemBase   Component

Section titled “CheckboxItemBase   Component ”

A Limestone-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 ui/Groupui/Group when multiple ui/Groupui/Group.Group.select are possible.

Usage:

<CheckboxItem
	defaultSelected={selected}
	onToggle={handleToggle}
>
 Item with a Checkbox
</CheckboxItem>

Extends: limestone/Itemlimestone/Item.Item

Properties
css
Section titled “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

formCheckbox
Section titled “formCheckbox”
Boolean

Enables the "formCheckbox" state.

In "formCheckbox" mode, the spotlight is located on the Checkbox component and the Item does not receive visual feedback on focus

icon
Section titled “icon”
StringObject

The icon content.

May be specified as either:

  • A string that represents an icon from the limestone/Iconlimestone/Icon.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/resolutionui/resolution)

indeterminate
Section titled “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
Section titled “indeterminateIcon”
String

The icon to be used in the indeterminate state.

May be specified as either:

  • A string that represents an icon from the limestone/Iconlimestone/Icon.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/resolutionui/resolution)

selected
Section titled “selected”
Boolean

If true the checkbox will be selected.

slotBefore
Section titled “slotBefore”
Node

Nodes to be inserted after the checkbox and before children.

CheckboxItemDecorator   Higher-Order Component

Section titled “CheckboxItemDecorator &ensp; Higher-Order Component ”

Adds interactive functionality to CheckboxItem.

Includes: ui/Toggleableui/Toggleable.Toggleable

CheckboxItemGroup   Component

Section titled “CheckboxItemGroup &ensp; Component ”

A container that surrounds multiple CheckboxItems.

A list of multiple CheckboxItems wrapped with a CheckboxItemGroup component gets required audio guidance.