Checkbox - Docs

A checkbox allows users to make a binary choice, i.e. a choice between one of two possible mutually exclusive options.

Viewmodels

labelArtboardartboard

Determines which component is used for the Label.

controlArtboardartboard

Determines which component is used to visualize the checkbox's visuals.

checkedboolean

The controlled checked state of the checkbox.

labelstring

Specifies the localized strings that identifies the checkbox.

hoverboolean

Indicates when the pointer overlaps with the Checkbox.

disabledboolean

Determines whether the checkbox is disabled.

invalidboolean

Determines whether the checkbox is invalid. Use if the choice is incompatible with the current context.

directionEnum

Determines if the checkbox is oriented left-to-right or right-to-left.

Root - The Root of the component.
- Control - A Layout containing the Control Artboard. All pointer functionality targets this layout.
  - A Component Instance of controlArtboard.
- Label - A Layout containing a component instance of the Label Artboard.
  - A Component Instance of labelArtboard.

Root - The Root of the component.
- Container - A group containing the shape used to indicate the checkmark. This group prevents its parent layout from distorting the shape.
  - Shape Layout - Contains a shape representing the Checkbox's checkmark.
    - Checkmark - A shape depicting a checkmark.

This component contains four pairs of animations, each on their own layer.

Checked
- CheckedTrue - Indicates the Checkbox is checked. Plays if (checked = true).
- CheckedFalse - Indicates the Checkbox is unchecked. Plays if (checked = false).
Disabled
- DisabledTrue - Indicates the Checkbox cannot be interacted with. Plays if (disabled = true).
- DisabledFalse - Indicates the Checkbox can be interacted with. Plays if (disabled = false).
Hover
- HoverTrue - Indicates the pointer overlaps with the Checkbox. Plays if (hover = true).
- HoverFalse - Indicates the pointer does not overlap with the Checkbox. Plays if (hover = false).
Invalid
- InvalidTrue - Indicates the checkbox is invalid. Plays if (invalid = true).
- InvalidFalse - Indicates the checkbox is not invalid. Plays if (invalid = false).

Root - The Root of the component.
- Text Layout - A Layout containing a Text Element.
  - Text - A text element. The value of its Text Run is bound to label.

checkbox_component hugs its content. In the event you create a new control artboard for it, you may want to adjust the layout settings to ensure consistent sizing.