Switch
Last updated
Last updated
The Switch
allows the user to make a basic "Yes or No" decision, i.e. it represents an input for a boolean value. This is useful either as part of a form, or as a stand-alone toggle for basic filters for tables and similar use cases.
The Switch
component offers the following configuration properties.
The Switch
offers three events, that are all related to the UI event when the switch is toggled:
On change: This event is triggered whenever the switch is toggled, regardless whether activated or deactivated.
On false: This event is triggered whenever the switch is deactivated. This is equivalent to an action running at "On change", with a condition like if (!mySwitch.value) { ... }
inside.
On true: This event is triggered whenever the switch is activated. This is equivalent to an action running at "On change", with a condition like if (mySwitch.value) { ... }
inside.
The Switch
exposes the following API in the JavaScript runtime environment.
Property | Type | Default value | Behavior |
---|---|---|---|
Property / Function | Type | Behavior |
---|---|---|
Default value
boolean
false
Determines whether the initial state of the switch should be active or not. If used with dynamic JavaScript expressions, this can reactively update the toggle based on specific conditions.
Disabled
boolean
false
Whether the switch should be disabled or not. When disabled, the input is greyed out and cannot be toggled.
Label
stringWithJs
'Switch'
Label that is rendered next to the toggle element.
Label alignment
'left' | 'center' | 'right'
'left'
Text alignment of the label.
Label position
'left' | 'right'
'left'
Determines whether the toggle should be placed to the left of the label or to the right.
Required
boolean
false
Determines how the switch behaves as part of a form during submit. When set to true
, the surrounding form submit fails with a validation error in case the switch is not activated.
Toggle with label click
boolean
false
Determines whether the switch can be toggled only by clicking the toggle directly (false
), or also by clicking on the label (true
)
clear()
() => void
Resets the switch to inactive (value
being false
)
disabled
boolean
Current boolean value of the "Disabled" property.
label
string
Current string value of the "Label" property.
reset()
() => void
Resets the switch similar to the clear()
function, however not always to false
, but to the value of the "Default value" property. This is usually used to reset a form to a default state, instead of completely clearing it.
setDisabled(value)
(value: boolean) => void
Sets the value of the "Disabled" property to the provided boolean value.
setLabel(value)
(value: string) => void
Sets the value of the "Label" property to the provided string value.
setValue(value)
(value: boolean) => void
Sets the toggle-state to the provided boolean value. This does not trigger any events.
value
boolean
Current boolean value representing the toggle-state of the switch. Will return true
if active, and false
if inactive.