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 Runtime.

Basic Example

main.view.xml

<var name="agree" type="boolean" />

<toggle bind="agree" label="Toggle label"/>

Standard Attributes

bind

bind

label

label

required

required

Unlike the standard require behavior, setting <toggle/> to required will force the user to enable it (Or check it if the mode attribute is set to "checkbox")

This behavior was introduced in version 5.0.1 of the JourneyApps Runtime.

Advanced Attributes

align-content

align-content

align-label

align-label

disabled

disabled

id

id

label-case

Version compatibility

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

label-case

label-color

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

on-change

show-if and hide-if

show-ifhide-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();