toggle
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.main.view.xml
<var name="agree" type="boolean" />
<toggle bind="agree" label="Toggle label"/>

Version compatibility
label-case
was introduced in version 4.80.0 of the JourneyApps Runtime.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.
Optional
Default: unset
Text displayed to the right of the
toggle
when it is disabled.Optional
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"/>

Optional
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"/>

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>

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>

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:Programmatically scroll until the
toggle
component is visible in the view.Programmatically set the state of the
boolean
bound to the toggle
component.component.toggle({id: 'my-id'}).setState(true);
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();
Last modified 9mo ago