# Switch

Compact on/off controls with clear state labels.

## Installation

Download: /api/catalog/switch/download

Ignition Perspective 8.3. In a development project, choose Designer > File > Import and select the ZIP. Preserve the view and style-class paths. Review resource conflicts before replacing anything.

No separate stylesheet snippet is included.

Add an Embedded View (ia.display.view), set props.path to Primitives/Switch, and configure props.params using the contract below. Connect your own data in the host view. The package does not include live tags, page configuration or Gateway settings.

## Parameters

Types are inferred from saved defaults; directions come from native propConfig. These are not full schemas or validated ranges.

| Parameter | Type | Direction | Default |

| --- | --- | --- | --- |

| label | string | input | "Airplane mode" |

| selected | boolean | input | false |

| hint | string | input | "" |

| error | string | input | "" |

| disabled | boolean | input | false |

| size | string | input | "default" |

| labelPosition | string | input | "right" |

## Embedded View usage

```json

{
  "type": "ia.display.view",
  "props": {
    "path": "Primitives/Switch",
    "params": {
      "label": "Airplane mode",
      "selected": false,
      "hint": "",
      "error": "",
      "disabled": false,
      "size": "default",
      "labelPosition": "right"
    },
    "useDefaultViewWidth": false,
    "useDefaultViewHeight": false
  }
}

```

## Verification

Source and archive hashes are checked. Designer import acceptance has not been completed for this archive; test in your development project before production.

## Files

### com.inductiveautomation.perspective/views/Primitives/Switch/view.json

```json

{
  "custom": {},
  "params": {
    "label": "Airplane mode",
    "selected": false,
    "hint": "",
    "error": "",
    "disabled": false,
    "size": "default",
    "labelPosition": "right"
  },
  "propConfig": {
    "params.label": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.selected": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.hint": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.error": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.disabled": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.size": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.labelPosition": {
      "paramDirection": "input",
      "persistent": true
    }
  },
  "props": {
    "defaultSize": {
      "width": 320,
      "height": 48
    }
  },
  "root": {
    "type": "ia.container.flex",
    "version": 0,
    "meta": {
      "name": "root"
    },
    "props": {
      "direction": "column",
      "justify": "flex-start",
      "alignItems": "stretch",
      "overflow": "hidden",
      "style": {
        "gap": "0px",
        "width": "100%",
        "overflow": "hidden",
        "boxSizing": "border-box"
      }
    },
    "children": [
      {
        "type": "ia.container.flex",
        "version": 0,
        "meta": {
          "name": "row"
        },
        "props": {
          "direction": "row",
          "alignItems": "center",
          "overflow": "hidden",
          "style": {
            "gap": "10px",
            "width": "100%",
            "overflow": "hidden"
          }
        },
        "position": {
          "grow": 0,
          "shrink": 0,
          "basis": "auto"
        },
        "children": [
          {
            "type": "ia.container.flex",
            "version": 0,
            "meta": {
              "name": "trackShell"
            },
            "props": {
              "direction": "row",
              "justify": "flex-start",
              "alignItems": "center",
              "style": {
                "classes": "vc/switch vc/switch-off",
                "width": "32px",
                "height": "18px",
                "minWidth": "32px",
                "minHeight": "18px",
                "maxWidth": "32px",
                "maxHeight": "18px",
                "padding": "1px",
                "position": "relative",
                "overflow": "hidden",
                "boxSizing": "border-box",
                "borderRadius": "999px"
              }
            },
            "position": {
              "grow": 0,
              "shrink": 0,
              "basis": "32px"
            },
            "propConfig": {
              "props.justify": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "if({view.params.selected}, \"flex-end\", \"flex-start\")"
                  }
                }
              },
              "props.style.classes": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "\"vc/switch \" + if({view.params.selected}, \"vc/switch-on\", \"vc/switch-off\") + if({view.params.size} = \"sm\", \" vc/switch-sm\", \"\") + if({view.params.disabled}, \" vc/switch-disabled\", \"\")"
                  }
                }
              },
              "props.style.width": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "if({view.params.size} = \"sm\", \"24px\", \"32px\")"
                  }
                }
              },
              "props.style.height": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "if({view.params.size} = \"sm\", \"14px\", \"18px\")"
                  }
                }
              },
              "props.style.minWidth": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "if({view.params.size} = \"sm\", \"24px\", \"32px\")"
                  }
                }
              },
              "props.style.minHeight": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "if({view.params.size} = \"sm\", \"14px\", \"18px\")"
                  }
                }
              },
              "props.style.maxWidth": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "if({view.params.size} = \"sm\", \"24px\", \"32px\")"
                  }
                }
              },
              "props.style.maxHeight": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "if({view.params.size} = \"sm\", \"14px\", \"18px\")"
                  }
                }
              },
              "position.basis": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "if({view.params.size} = \"sm\", \"24px\", \"32px\")"
                  }
                }
              }
            },
            "children": [
              {
                "type": "ia.display.label",
                "version": 0,
                "meta": {
                  "name": "thumb"
                },
                "props": {
                  "text": " ",
                  "style": {
                    "classes": "vc/switch-thumb vc/switch-thumb-off",
                    "width": "16px",
                    "height": "16px",
                    "minWidth": "16px",
                    "minHeight": "16px",
                    "maxWidth": "16px",
                    "maxHeight": "16px",
                    "borderRadius": "999px",
                    "backgroundColor": "#fafafa",
                    "pointerEvents": "none",
                    "zIndex": "1",
                    "boxSizing": "border-box",
                    "overflow": "hidden",
                    "padding": "0",
                    "margin": "0",
                    "borderStyle": "none",
                    "borderWidth": "0px"
                  }
                },
                "position": {
                  "grow": 0,
                  "shrink": 0,
                  "basis": "16px"
                },
                "propConfig": {
                  "props.style.classes": {
                    "binding": {
                      "type": "expr",
                      "config": {
                        "expression": "\"vc/switch-thumb \" + if({view.params.selected}, \"vc/switch-thumb-on\", \"vc/switch-thumb-off\")"
                      }
                    }
                  },
                  "props.style.backgroundColor": {
                    "binding": {
                      "type": "expr",
                      "config": {
                        "expression": "if({view.params.selected}, \"#18181b\", \"#fafafa\")"
                      }
                    }
                  },
                  "props.style.width": {
                    "binding": {
                      "type": "expr",
                      "config": {
                        "expression": "if({view.params.size} = \"sm\", \"12px\", \"16px\")"
                      }
                    }
                  },
                  "props.style.height": {
                    "binding": {
                      "type": "expr",
                      "config": {
                        "expression": "if({view.params.size} = \"sm\", \"12px\", \"16px\")"
                      }
                    }
                  },
                  "props.style.minWidth": {
                    "binding": {
                      "type": "expr",
                      "config": {
                        "expression": "if({view.params.size} = \"sm\", \"12px\", \"16px\")"
                      }
                    }
                  },
                  "props.style.minHeight": {
                    "binding": {
                      "type": "expr",
                      "config": {
                        "expression": "if({view.params.size} = \"sm\", \"12px\", \"16px\")"
                      }
                    }
                  },
                  "props.style.maxWidth": {
                    "binding": {
                      "type": "expr",
                      "config": {
                        "expression": "if({view.params.size} = \"sm\", \"12px\", \"16px\")"
                      }
                    }
                  },
                  "props.style.maxHeight": {
                    "binding": {
                      "type": "expr",
                      "config": {
                        "expression": "if({view.params.size} = \"sm\", \"12px\", \"16px\")"
                      }
                    }
                  },
                  "position.basis": {
                    "binding": {
                      "type": "expr",
                      "config": {
                        "expression": "if({view.params.size} = \"sm\", \"12px\", \"16px\")"
                      }
                    }
                  }
                }
              },
              {
                "type": "ia.input.toggle-switch",
                "version": 0,
                "meta": {
                  "name": "toggle"
                },
                "props": {
                  "selected": false,
                  "enabled": true,
                  "style": {
                    "classes": "",
                    "position": "absolute",
                    "top": "0",
                    "left": "0",
                    "right": "0",
                    "bottom": "0",
                    "width": "100%",
                    "height": "100%",
                    "opacity": "0",
                    "zIndex": "3",
                    "margin": "0",
                    "padding": "0"
                  }
                },
                "position": {
                  "grow": 0,
                  "shrink": 0,
                  "basis": "100%"
                },
                "propConfig": {
                  "props.selected": {
                    "binding": {
                      "type": "property",
                      "config": {
                        "path": "view.params.selected",
                        "bidirectional": true
                      }
                    }
                  },
                  "props.enabled": {
                    "binding": {
                      "type": "expr",
                      "config": {
                        "expression": "!{view.params.disabled}"
                      }
                    }
                  }
                }
              }
            ]
          },
          {
            "type": "ia.display.label",
            "version": 0,
            "meta": {
              "name": "label"
            },
            "props": {
              "text": "Airplane mode",
              "style": {
                "classes": "vc/switch-label",
                "overflow": "hidden"
              }
            },
            "position": {
              "grow": 1,
              "shrink": 1,
              "basis": "0%"
            },
            "propConfig": {
              "props.text": {
                "binding": {
                  "type": "property",
                  "config": {
                    "path": "view.params.label"
                  }
                }
              },
              "meta.visible": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "len(trim(toString({view.params.label}))) > 0"
                  }
                }
              }
            }
          }
        ]
      },
      {
        "type": "ia.display.label",
        "version": 0,
        "meta": {
          "name": "hint"
        },
        "props": {
          "text": "",
          "style": {
            "classes": "vc/switch-hint",
            "overflow": "hidden"
          }
        },
        "position": {
          "grow": 0,
          "shrink": 0,
          "basis": "auto"
        },
        "propConfig": {
          "props.text": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "if(len(trim(toString({view.params.error}))) > 0, {view.params.error}, {view.params.hint})"
              }
            }
          },
          "props.style.classes": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "if(len(trim(toString({view.params.error}))) > 0, \"vc/switch-error\", \"vc/switch-hint\")"
              }
            }
          },
          "meta.visible": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "len(trim(toString({view.params.error}))) > 0 || len(trim(toString({view.params.hint}))) > 0"
              }
            }
          }
        }
      }
    ]
  }
}


```

### com.inductiveautomation.perspective/views/Primitives/Switch/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "view.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/switch/style.json

```json

{
  "base": {
    "style": {
      "borderRadius": "999px",
      "overflow": "hidden",
      "boxSizing": "border-box",
      "borderStyle": "none",
      "borderWidth": "0px",
      "boxShadow": "none"
    },
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/switch/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/switch-off/style.json

```json

{
  "base": {
    "style": {
      "backgroundColor": "#27272a",
      "borderStyle": "none",
      "borderWidth": "0px",
      "boxShadow": "none"
    },
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/switch-off/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/switch-on/style.json

```json

{
  "base": {
    "style": {
      "backgroundColor": "#fafafa",
      "borderStyle": "none",
      "borderWidth": "0px",
      "boxShadow": "none"
    },
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/switch-on/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/switch-sm/style.json

```json

{
  "base": {
    "style": {
      "width": "24px",
      "height": "14px",
      "minWidth": "24px",
      "minHeight": "14px",
      "maxWidth": "24px",
      "maxHeight": "14px"
    },
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/switch-sm/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/switch-disabled/style.json

```json

{
  "base": {
    "style": {
      "opacity": "0.5"
    },
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/switch-disabled/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/switch-thumb/style.json

```json

{
  "base": {
    "style": {
      "borderRadius": "999px",
      "boxShadow": "none",
      "borderStyle": "none",
      "borderWidth": "0px"
    },
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/switch-thumb/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/switch-thumb-off/style.json

```json

{
  "base": {
    "style": {
      "backgroundColor": "#fafafa"
    },
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/switch-thumb-off/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/switch-thumb-on/style.json

```json

{
  "base": {
    "style": {
      "backgroundColor": "#18181b",
      "background": "#18181b",
      "color": "#18181b",
      "borderColor": "#18181b",
      "borderStyle": "none",
      "borderWidth": "0px",
      "boxShadow": "none"
    },
    "mediaQueries": []
  },
  "variants": []
}

```

### com.inductiveautomation.perspective/style-classes/vc/switch-thumb-on/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/switch-label/style.json

```json

{
  "base": {
    "style": {
      "fontSize": "14px",
      "fontWeight": "500",
      "color": "#fafafa",
      "overflow": "hidden"
    },
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/switch-label/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/switch-hint/style.json

```json

{
  "base": {
    "style": {
      "fontSize": "12px",
      "color": "#a1a1aa",
      "marginTop": "4px",
      "overflow": "hidden"
    },
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/switch-hint/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/switch-error/style.json

```json

{
  "base": {
    "style": {
      "fontSize": "12px",
      "color": "#f87171",
      "marginTop": "4px",
      "overflow": "hidden"
    },
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/switch-error/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```