noodl-docs/nodes/ui-controls/checkbox.md

hide_title, hide_table_of_contents, title

hide_title	hide_table_of_contents	title
true	true	Checkbox

<##head##>

Checkbox

This node places a customizable checkbox in the visual tree.

The checkbox will flip its state when clicked and its Checked property can be connected to a data source, such as a variable or object.

<##head##>

This control contains all logic such as accessibility etc. It can be styled in via it's properties, or you can use it only for the logic and create your own checkbox component in your own design system.

Inputs

The main input of the Checkbox node is the Checked input:

Data	Description
Checked	<##input:checked##>A boolean setting the checkbox in "checked" or "unchecked" state. This is the value of the checkbox and can be connected to a data source.<##input##>
Background Color	<##input:backgroundColor##>The background color when the checkbox is "checked"<##input##>.

It can be enabled and disabled using the Enabled input:

@include "../shared-props/inputs/_enabled.md"

The Checkbox node has a set of label properties that can be set:

Data	Description
Enable Label	Sets whether the label is visible or not.
Text Style	Set an existing text style to this node, or create a new text style from the current properties.
Label	A text string that will be shown as the label on the button.
Spacing	The spacing between the label and the checkbox.

Similarly, it has a set of icon properties:

Data	Description
Enable Icon	Sets whether the icon is visible or not.
Type	Use this to set if you want to use a predefined icon or a custom image from the project folder.
Source	Where to get the icon.
Placement	Sets whether the icon should be to the left or to the right of the Label
Size	The width of the icon in px.
Color	Sets the color of the icon. Only visible if Type is set to icon.

Signal	Description
Check	Reflects the same action as the user checked the Checkbox.
Uncheck	Reflects the same action as the user unchecked the Checkbox.

Visual

This node supports the following Visual Input Properties:

• Margin
• Alignment
• Dimensions
• Layout, Position
• Style
• Border Style
• Corner Radius
• Box Shadow
• Placement
• Other
• Advanced HTML

Outputs

The main output of the Checkbox node is the Checked output.

Data	Description
Checked	<##output:checked##>A boolean output that is true when this checkbox control is checked and false if not. This is useful when using this control as a base for your own component that will represent visually that it is checked.<##output##>

It also features a set of signals:

@include "../shared-props/outputs/_control-events.md"

States

Apart from triggering signals the Checkbox node also notifies of its state through data outputs:

@include "../shared-props/outputs/_control-states.md"

Visual

This node supports the following Visual Output Properties:

• Bounding Box
• Mounted
• Other

@include "../shared-props/inputs/_visual-input-properties.md"

@include "../shared-props/outputs/_visual-output-properties.md"