What's NewDeveloper CommunitySupportStatus
Search
⌃K
Links

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

main.view.xml
<var name="agree" type="boolean" />
​
<toggle bind="agree" label="Toggle label"/>

Standard Attributes

bind

label

required

Advanced Attributes

align-content

align-label

disabled

id

label-case

Version compatibility
label-case was introduced in version 4.80.0 of the JourneyApps Runtime.

label-color

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

show-if and hide-if

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

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.
main.view.xml
<var name="toggle_state" type="boolean"/>
​
<toggle bind="toggle_state" label="Toggle label" status-true="On" status-false="Off"/>

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.
main.view.xml
<var name="toggle_state" type="boolean"/>
​
<toggle bind="toggle_state" label="Toggle label" status-true="On" status-false="Off"/>

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.
main.view.xml
<columns>
<column>
<info>toggle-direction="left-to-right"</info>
<toggle toggle-direction="left-to-right" bind="i_agree" label="Agree?" status-true="Yes" status-false="No" />
</column>
<column>
<info>toggle-direction="right-to-left"</info>
<toggle toggle-direction="right-to-left" bind="i_agree" label="Agree?" status-true="Yes" status-false="No" />
</column>
</columns>

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).
main.view.xml
<columns>
<column>
<info>toggle-position="left"</info>
<toggle toggle-position="left" bind="i_agree" label="Agree?" status-true="Yes" status-false="No" />
</column>
<column>
<info>toggle-position="right"</info>
<toggle toggle-position="right" bind="i_agree" label="Agree?" status-true="Yes" status-false="No" />
</column>
</columns>

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

Programmatically scroll until the toggle component is visible in the view.

setState

Programmatically set the state of the boolean bound to the toggle component.
component.toggle({id: 'my-id'}).setState(true);

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.
component.toggle({id: 'my-id'}).toggleState();
Previous
time-input
Next
view
Last modified 9mo ago