Selectable Box

Represents a content box to used in a group where one or more can be selected.

Set the control-type attribute to change the box's selectable control. It accepts a subset of predefined values. When control-type is set to radio, it is the consuming app's responsibility to ensure only one Selectable Box in a group is checked at a time.

Use the control-placement attribute to change the box's selectable control placement.

Set the connotation attribute to change the box's connotation. It accepts a subset of predefined values.

By default, the card's control element (checkbox or radio) is the clickable element. This allows you to use other clickable elements within the box. Setting the clickable-box attribute makes the whole box clickable, just make sure the box does not contain other clickable elements.

Set the checked attribute to indicate the checked state of the box.

By default, the Selectable Box is styled in a spacious manner. Enabling the tight member will remove the padding around the box's content.

The disabled attribute disables the control (checkbox or radio) and indicates that the action is not available.