Switch

Displays a binary value (similar to a check box) using an On or Off visual switch widget.

Data binding

Set or modify the data binding for the view in the General properties. The view should be bound to a Boolean variable. The data type is Boolean.

Configuration properties

Under Configuration, set or modify the appearance properties for the view.
Screen size
A configuration property that has the Screen Sizes icon The Screen Sizes icon beside the property name can have different values for each screen size. If you do not set a value, the screen size inherits the value of the next larger screen size as its default value.
Theme definitions
Theme definitions specify the colors and styles for a view and determine its appearance. You can preview the look and feel of views in the theme editor. See Themes.

The appearance configuration properties for Switch are shown in the following table:

Table 1. Appearance configuration properties for Switch
Appearance configuration property Description Data type
Color style Specifies a color style for the view. The colors correspond to variables in the specified theme. TooltipColorStyle
Shape Style Specifies one of the following shape styles for the switch:
  • Default (rounded)
  • Square (square)
  • Modern (slider)

The default shape style is Default (rounded).

SwitchShapeStyle
Size style The Screen Sizes icon Specifies one of the following size styles for the switch:
  • Default (medium)
  • Large
  • Small

The default size style is Default (medium).

SwitchSizeStyle
Label type Specifies whether text or an icon is used as a label to indicate the On and Off positions of the switch. The default value is Text. SwitchLabelType
On label Specifies the label to use when the switch is in the On position. By default, no label value is specified.

If you are using text for the label, type the text that you want to use to indicate the On position. If you are using an icon for the label, you can choose from a variety of icons that graphically indicate the On position by browsing the Font Awesome V4.7.0 web site. (The Font Awesome prefix fa- is optional.)

String
Off label Specifies the label to use when the switch is in the Off position. By default, no label value is specified.

If you are using text for the label, type the text that you want to use to indicate the Off position. If you are using an icon for the label, you can choose from a variety of icons that graphically indicate the Off position by browsing the Font Awesome V4.7.0 web site. (The Font Awesome prefix fa- is optional.)

String

Events

Set or modify the event handlers for the view in the Events properties. You can set events to be triggered programmatically or when a user interacts with the view. For information about how to define and code events, see User-defined events.
Switch has the following types of event handlers:
  • On load: Activated when the page loads. For example:
    me.setChecked(${Checkbox}.isChecked())
    where Checkbox is the view ID of the Check Box.
  • On change: Activated when a change is detected.
    ${Section2}.setVisible(me.isChecked())
    where Section2 is the control ID of a Section view.

Methods

For detailed information on the available methods for Switch, see the Switch JavaScript API.

Additional resources

For information about how to create a coach or page, see Building coaches.
For information about standard properties (General, Configuration, Positioning, Visibility, and HTML Attributes), see View properties.