toggle
Overview
toggle
is an input component with a binary state, which allows users to easily switch between the two states.
Version compatibility
toggle
was introduced in version 4.36.1 of the JourneyApps Container.
Basic Example
Standard Attributes
bind
bindbind
label
labellabel
required
requiredrequired
Advanced Attributes
align-content
align-contentalign-content
align-label
align-labelalign-label
disabled
disableddisabled
id
idid
label-case
label-case
Version compatibility
label-case
was introduced in version 4.80.0 of the JourneyApps Runtime.
label-color
label-colorlabel-color
mode
mode
Optional
Type: toggle
| radio
| checkbox
Default: toggle
Version compatibility
mode
was introduced in version 4.84.0 of the JourneyApps Runtime.
Specify whether the boolean value should be displayed as a toggle, radio, or checkbox.
on-change
on-changeon-change
show-if
and hide-if
show-ifhide-ifshow-if
and hide-if
status-disabled
status-disabled
Optional
Type: string
(static text, a format string or the return value of a JS/TS function)
Default: unset
Text displayed to the right of the toggle
when it is disabled.
status-false
status-false
Optional
Type: string
(static text, a format string or the return value of a JS/TS function)
Default: unset
Text displayed to the right of the toggle
when it is bound to a false
state.
status-true
status-true
Optional
Type: string
(static text, a format string or the return value of a JS/TS function)
Default: unset
Text displayed to the right of the toggle
when it is bound to a true
state.
toggle-direction
toggle-direction
Version compatibility
toggle-direction
was introduced in version 4.86.1 of the JourneyApps Runtime.
Optional
Type: left-to-right
| right-to-left
Default: left-to-right
Specify in which direction the toggle widget moves when activated.
toggle-position
toggle-position
Version compatibility
toggle-position
was introduced in version 4.86.1 of the JourneyApps Runtime.
Optional
Type: left
| right
Default: left
Specify where the toggle button is positioned in the component (relative to the status text).
Component Methods
The following component methods are available when an id
is assigned to the component and component.textInput({id:'my-id'}).xxx
is called from JS/TS:
scrollIntoView
scrollIntoView
Programmatically scroll until the toggle
component is visible in the view.
setState
setState
Programmatically set the state of the boolean
bound to the toggle
component.
toggleState
toggleState
Programmatically toggle the state of the boolean
bound to the toggle
component. A false
or null
state will toggle to true
, and a true
state will toggle to false
.
Last updated