Comment on page

Switch

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.
Switch component
Properties
The Switch component offers the following configuration properties.
Property
Type
Default value
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)
Events
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.
API
The Switch exposes the following API in the JavaScript runtime environment.
Property / Function
Type
Behavior
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.

Property	Type	Default value	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`)

Property / Function	Type	Behavior
`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.

Component reference - Previous

Slideout

Next - Component reference

Table

Last modified 1yr ago