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

pagebind

label

pagelabel

required

pagerequired

Advanced Attributes

align-content

pagealign-content

align-label

pagealign-label

disabled

pagedisabled

id

pageid

label-case

Version compatibility

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

pagelabel-case

label-color

pagelabel-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

pageon-change

show-if and hide-if

pageshow-ifpagehide-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();