toggle

Overview

toggle is an input component with a binary state, which allows users to easily switch between the two states.

Basic Example

<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

label-color

mode

Optional

Type: toggle | radio | checkbox

Default: toggle

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.

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

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

<toggle bind="toggle_state" label="Toggle label" status-true="On" status-false="Off"/>

toggle-direction

Optional

Type: left-to-right | right-to-left

Default: left-to-right

Specify in which direction the toggle widget moves when activated.

<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

Optional

Type: left | right

Default: left

Specify where the toggle button is positioned in the component (relative to the status text).

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