Checkbox

The Checkbox is similar to the Switch component, offering the user to make a "Yes or No" decision, but using a checkbox as the UI element instead of a toggle.

Properties

The Checkbox component offers the following configuration properties.

Property	Type	Default value	Behavior
Default value	boolean	false	Determines the initial state of the checkbox, and the state it will have when the reset() API function is used. When configured with a JS expression, it also updates the checkbox reactively when a dependency changes. Learn more
Disabled	boolean	false	Whether the checkbox should be disabled. When disabled, the checkbox is greyed out and does not trigger the associated events.
Label	stringWithJs	'Checkbox'	Text displayed next to the checkbox.
Label alignment	'left' | 'center' | 'right'	'left'	Alignment of the label text.
Label position	'left' | 'right'	'left'	Whether the checkbox is rendered to the left of the label text, or to the right of it.
Required	boolean	false	Whether this checkbox must be active when a surrounding form is submitted. Learn more about form submission
Toggle with label click	boolean	false	When set to true, the checkbox state is toggled when clicking on the label text as well. Otherwise, only a click on the checkbox itself changes its state.

Events

The Checkbox offers three events related to changing its state. All of these events will only fire when the state changes due to UI events (i.e. user clicks), not when the checkbox state is changed programmatically. None of the associated actions will receive any arguments when triggered.

• On change run: This action is triggered every time the checkbox value changes.

• On false run: This action is triggered when the checkbox value changes from true to false, i.e. when the user unchecks it.

• On true run: This action is triggered when the checkbox value changes from false to true, i.e. when the user checks it.

"On false run" and "On true run" are triggered slightly earlier than "On change". They are however not executed in sequence, i.e. triggering the "On change" action does not wait or depend on the execution of "On false" or "On true". Due to this behavior, their executions might overlap.

API

The Checkbox exposes the following API in the JavaScript runtime environment.

Property / Function	Type	Behavior
clear()	() => void	Clears the checkbox, i.e. sets its value to false and unchecks it visually.
disabled	boolean	Provides the current boolean value of the "Disabled" property.
label	string	Provides the current string value of the "Label" property.
reset()	() => void	Resets the checkbox state to the initial "Default value", i.e. it is set to the same state that it had after initial app load.
setDisabled(value)	(value: boolean) => void	Sets the value of the "Disabled" property to the provided boolean value.
setLabel(value)	(value: string) => void	Updates the value of the "Label" property to the provided string value.
setValue(value)	(value: boolean) => void	Sets the value of the checkbox to the provided boolean value. true checks it, false unchecks it. This does not trigger any actions associated with checkbox events.
value	boolean	Provides the current boolean value of the checkbox state. true in case the checkbox is checked, false otherwise.