Switch - Docs

A Switch allows users to turn an individual option on or off.

Viewmodels

labelArtboardartboard

Determines which component is used for the Label.

controlArtboardartboard

Determines which artboard is used to visualize the component's state.

checkedboolean

The controlled checked state of the switch.

disabledboolean

Determines whether the switch is disabled.

labelstring

Specifies the localized strings that identifies the component.

hoverboolean

Indicates when the pointer overlaps with the component.

directionEnum

Determines the component's left-to-right alignment.

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 the Label Artboard.
  - A component instance of labelArtboard.

Root - The Root of the component.
- ThumbContainer - A Layout containing the Thumb Element. This Layout's alignment is used to drive its child's position.
  - Thumb Element - A Rounded Layout depicting the thumb. It is roughly half the size of its immediate parent.

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

Checked
- CheckedTrue - Indicates the Switch is On. Plays if (checked = true).
- CheckedFalse - Indicates the Switch is Off. Plays if (checked = false).
Disabled
- DisabledTrue - Indicates the Switch cannot be interacted with. Plays if (disabled = true).
- DisabledFalse - Indicates the Switch can be interacted with. Plays if (disabled = false).
Hover
- HoverTrue - Indicates the pointer overlaps with the Switch. Plays if (hover = true) and (disabled = false).
- HoverFalse - Indicates the pointer does not overlap with the Switch. Plays if (hover = 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.

switch_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.