Skip to content


The switch control is used to toggle two mutually exclusive states, On and Off.

Switch Properties

Property Type Required Default
Caption string Optional
HelperText string Optional
IsEditable boolean Optional true
IsVisible boolean Optional true
OnValueChange ActionOrRule Optional
Separator boolean Optional true
Styles object Optional
Value boolean Optional false
_Name string Required
_Type const Required


The key name of the property

  • type: string


Helper text to be displayed if there is no validation view.

  • type: string


Disables or enables interaction

  • type: boolean
  • default: true


Sets the visibility of the control.

  • type: boolean
  • default: true


Action or rule to perform after value changed


Sets the visibility of the separator line below the control. This property will take precedence over ControlSeparator in section and is only supported for Form Cell control in Sectioned Table and not supported in Form Cell Container.

  • type: boolean
  • default: true


Set styles for Background, Switch and Caption.

  • type: object with following properties.
Property Type Required Default
Background string Optional
Switch string Optional
Caption string Optional


The string value is a style class name for Background.


The string value is a style class name for Switch.


The string value is a style class name for Caption.


Set the switch in on/off mode

  • type: boolean
  • default: false


  • type: string


  • type: const

The value of this property must be equal to:



  "_Type": "Page",
  "_Name": "FormCellsPage",
  "Caption": "FormCell Example",
  "Controls": [{
    "_Type": "Control.Type.FormCellContainer",
    "_Name": "FormCellContainer",
    "Sections": [{
      "Caption": "Section1",
      "Controls": [{
        "_Type": "Control.Type.FormCell.Switch",
        "_Name": "Switchcell",
        "Caption": "Confirmed",
        "Value": false,
        "IsEditable": true,
        "HelperText": "This is helper text",
        "validationProperties": {
          "ValidationMessage": "Validation Message",
          "ValidationMessageColor": "ff0000",
          "SeparatorBackgroundColor": "000000",
          "SeparatorIsHidden": false,
          "ValidationViewBackgroundColor": "fffa00",
          "ValidationViewIsHidden": false
        "Styles": {
          "Background": "SwitchFormCellBackground",
          "Switch": "SwitchFormCellSwitch",
          "Caption": "SwitchFormCellCaption"

Style Classes Definition

/* Switch Form Cell - Background */
.SwitchFormCellBackground {
  background-color: yellow;

/* Switch Form Cell - Switch */
.SwitchFormCellSwitch {
  background-color: red;
  padding: 5px;

/* Switch Form Cell - Caption */
.SwitchFormCellCaption {
  background-color: #0000FF;
  color: black;
  font-style: body;  /* iOS Only */
  font-typeface: bold;  /* Android Only */
  font-size: 16px;