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
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 ) |
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 / 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. |
Last modified 1yr ago