Checkbox
Last updated
Last updated
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.
The Checkbox component offers the following configuration properties.
Default value
boolean
false
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
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.
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.
The Checkbox exposes the following API in the JavaScript runtime environment.
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.
Determines the initial state of the checkbox, and the state it will have when the reset() is used. When configured with a JS expression, it also updates the checkbox reactively when a dependency changes.
Whether this checkbox must be active when a surrounding form is submitted.
