Toggle Button

---

A toggle button can be considered a visual representation of the boolean function. And like any other button, it enables the users to initiate an action. The toggle allows you to set true/false (on/off) triggers for the given action, enabling the users to change the settings between two states.

API Methods

setDisabled

Sets the Disabled flag for this component.

Method

setDisabled(readOnly: boolean): void

Usage

// Setting the Disabled to "true" renders the element as non-clickable
a8forms.Toggle("toggleId").setDisabled(true)

// Setting the Disabled to "false" enables the element to be clickable
a8forms.Toggle("toggleId").setDisabled(false)

setVisibility

Sets the Visibility flag for this component.

Method

setVisibility(visible: boolean): void

Usage

// Setting the visibility to "true" makes the element visible
a8forms.Toggle("toggleId").setVisibility(true)

// Setting the visibility to "false" makes the element invisible
a8forms.Toggle("toggleId").setVisibility(false)

setVisibilityCondition

Sets the visibility condition for this component.

Method

setVisibilityCondition(condition: string): void

Usage

// Sets a condition for changing the element's visibility status.
a8forms.Toggle("toggleId").setVisibilityCondition("1 === 1")

Event Handlers

Event handlers allow you to set triggers for various actions based on the fired events. They are as follows:

onToggle

onToggle - Sets an action to be fired with the toggle button is selected.

Example:

To show/hide a button based on the toggle status - when the user selects the "I Accept" toggle, the status is set to true, and the button gets enabled.

onToggle

if (isToggled) {
    a8forms.Toggle("buttonId").setVisibility(true)
}
else {
    a8forms.Toggle("buttonId").setVisibility(false)
}

// Where "buttonId" is the ID of the component (button in this case) that you are setting to show/hide based on the toggle state.

---