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.