# Select

Choose an equipment item or operating mode.

## Installation

Download: /api/catalog/select/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/Select, 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 | "Fruit" |

| value | string | input | "" |

| placeholder | string | input | "Select a fruit" |

| options | array | input | [{"value":"","label":"Select a fruit"},{"value":"apple","label":"Apple"},{"value":"banana","label":"Banana"},{"value":"blueberry","label":"Blueberry"},{"value":"grapes","label":"Grapes"},{"value":"pineapple","label":"Pineapple"}] |

| hint | string | input | "" |

| error | string | input | "" |

| disabled | boolean | input | false |

| size | string | input | "default" |

| maxWidth | number | input | 320 |

| onChangeMessage | string | input | "" |

## Embedded View usage

```json

{
  "type": "ia.display.view",
  "props": {
    "path": "Primitives/Select",
    "params": {
      "label": "Fruit",
      "value": "",
      "placeholder": "Select a fruit",
      "options": [
        {
          "value": "",
          "label": "Select a fruit"
        },
        {
          "value": "apple",
          "label": "Apple"
        },
        {
          "value": "banana",
          "label": "Banana"
        },
        {
          "value": "blueberry",
          "label": "Blueberry"
        },
        {
          "value": "grapes",
          "label": "Grapes"
        },
        {
          "value": "pineapple",
          "label": "Pineapple"
        }
      ],
      "hint": "",
      "error": "",
      "disabled": false,
      "size": "default",
      "maxWidth": 320,
      "onChangeMessage": ""
    },
    "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/Select/view.json

```json

{
  "custom": {
    "token": "",
    "popupId": "",
    "displayLabel": "Select…",
    "hasValue": false
  },
  "params": {
    "label": "Fruit",
    "value": "",
    "placeholder": "Select a fruit",
    "options": [
      {
        "value": "",
        "label": "Select a fruit"
      },
      {
        "value": "apple",
        "label": "Apple"
      },
      {
        "value": "banana",
        "label": "Banana"
      },
      {
        "value": "blueberry",
        "label": "Blueberry"
      },
      {
        "value": "grapes",
        "label": "Grapes"
      },
      {
        "value": "pineapple",
        "label": "Pineapple"
      }
    ],
    "hint": "",
    "error": "",
    "disabled": false,
    "size": "default",
    "maxWidth": 320,
    "onChangeMessage": ""
  },
  "propConfig": {
    "params.label": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.value": {
      "paramDirection": "input",
      "persistent": true,
      "onChange": {
        "enabled": true,
        "script": "\tviewcraft.select.value_changed(self)"
      }
    },
    "params.placeholder": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.options": {
      "paramDirection": "input",
      "persistent": true,
      "onChange": {
        "enabled": true,
        "script": "\tviewcraft.select.value_changed(self)"
      }
    },
    "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.maxWidth": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.onChangeMessage": {
      "paramDirection": "input",
      "persistent": true
    }
  },
  "props": {
    "defaultSize": {
      "width": 320,
      "height": 80
    }
  },
  "root": {
    "type": "ia.container.flex",
    "version": 0,
    "meta": {
      "name": "root"
    },
    "props": {
      "direction": "column",
      "justify": "flex-start",
      "alignItems": "stretch",
      "overflow": "hidden",
      "style": {
        "gap": "6px",
        "width": "100%",
        "maxWidth": "320px",
        "boxSizing": "border-box",
        "overflow": "hidden"
      }
    },
    "propConfig": {
      "props.style.maxWidth": {
        "binding": {
          "type": "expr",
          "config": {
            "expression": "toString({view.params.maxWidth}) + \"px\""
          }
        }
      }
    },
    "children": [
      {
        "type": "ia.display.label",
        "version": 0,
        "meta": {
          "name": "label"
        },
        "props": {
          "text": "Fruit",
          "style": {
            "classes": "vc/select-label",
            "overflow": "hidden"
          }
        },
        "position": {
          "grow": 0,
          "shrink": 0,
          "basis": "auto"
        },
        "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.container.flex",
        "version": 0,
        "meta": {
          "name": "trigger"
        },
        "props": {
          "direction": "row",
          "alignItems": "center",
          "justify": "space-between",
          "overflow": "hidden",
          "style": {
            "classes": "vc/select-trigger",
            "width": "100%",
            "height": "36px",
            "minHeight": "36px",
            "maxHeight": "36px",
            "paddingLeft": "12px",
            "paddingRight": "10px",
            "gap": "8px",
            "boxSizing": "border-box",
            "overflow": "hidden",
            "cursor": "pointer"
          }
        },
        "position": {
          "grow": 0,
          "shrink": 0,
          "basis": "36px"
        },
        "propConfig": {
          "props.style.classes": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "\"vc/select-trigger\" + if({view.params.size} = \"sm\", \" vc/select-trigger-sm\", \"\") + if(len(trim(toString({view.params.error}))) > 0, \" vc/select-trigger-error\", \"\") + if({view.params.disabled}, \" vc/select-trigger-disabled\", \"\")"
              }
            }
          },
          "props.style.height": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "if({view.params.size} = \"sm\", \"32px\", \"36px\")"
              }
            }
          },
          "props.style.minHeight": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "if({view.params.size} = \"sm\", \"32px\", \"36px\")"
              }
            }
          },
          "props.style.maxHeight": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "if({view.params.size} = \"sm\", \"32px\", \"36px\")"
              }
            }
          },
          "props.style.anchorName": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "\" --vc-select-\" + {view.custom.token}"
              }
            }
          }
        },
        "events": {
          "dom": {
            "onClick": {
              "type": "script",
              "scope": "G",
              "config": {
                "script": "\tviewcraft.select.open_menu(self.view, event)"
              }
            }
          }
        },
        "children": [
          {
            "type": "ia.display.label",
            "version": 0,
            "meta": {
              "name": "value"
            },
            "props": {
              "text": "Select a fruit",
              "style": {
                "classes": "vc/select-value",
                "overflow": "hidden",
                "whiteSpace": "nowrap",
                "textOverflow": "ellipsis",
                "flexGrow": "1",
                "fontSize": "14px",
                "color": "#a1a1a1"
              }
            },
            "position": {
              "grow": 1,
              "shrink": 1,
              "basis": "0%"
            },
            "propConfig": {
              "props.text": {
                "binding": {
                  "type": "property",
                  "config": {
                    "path": "view.custom.displayLabel"
                  }
                }
              },
              "props.style.color": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "if({view.custom.hasValue}, \"#fafafa\", \"#a1a1a1\")"
                  }
                }
              }
            }
          },
          {
            "type": "ia.display.label",
            "version": 0,
            "meta": {
              "name": "chevron"
            },
            "props": {
              "text": " ",
              "style": {
                "classes": "vc/select-chevron",
                "width": "16px",
                "minWidth": "16px",
                "maxWidth": "16px",
                "height": "16px",
                "minHeight": "16px",
                "maxHeight": "16px",
                "backgroundImage": "url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNhMWExYTEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJtNiA5IDYgNiA2LTYiLz48L3N2Zz4=\")",
                "backgroundRepeat": "no-repeat",
                "backgroundPosition": "center",
                "backgroundSize": "16px 16px",
                "overflow": "hidden"
              }
            },
            "position": {
              "grow": 0,
              "shrink": 0,
              "basis": "16px"
            }
          }
        ]
      },
      {
        "type": "ia.display.label",
        "version": 0,
        "meta": {
          "name": "hint"
        },
        "props": {
          "text": "",
          "style": {
            "classes": "vc/select-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/select-error\", \"vc/select-hint\")"
              }
            }
          },
          "meta.visible": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "len(trim(toString({view.params.error}))) > 0 || len(trim(toString({view.params.hint}))) > 0"
              }
            }
          }
        }
      }
    ],
    "events": {
      "system": {
        "onStartup": {
          "type": "script",
          "scope": "G",
          "config": {
            "script": "\tviewcraft.select.start(self.view)"
          }
        }
      }
    },
    "scripts": {
      "messageHandlers": [
        {
          "messageType": "viewcraft.select.internal.select",
          "pageScope": true,
          "sessionScope": false,
          "viewScope": false,
          "script": "\tviewcraft.select.receive_select(self.view, payload)"
        }
      ]
    }
  }
}


```

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

```json

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

```

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

```json

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


```

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

```json

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

```

### com.inductiveautomation.perspective/style-classes/vc/select-trigger/style.json

```json

{
  "base": {
    "style": {
      "display": "flex",
      "alignItems": "center",
      "height": "36px",
      "minHeight": "36px",
      "maxHeight": "36px",
      "width": "100%",
      "boxSizing": "border-box",
      "borderStyle": "solid",
      "borderWidth": "1px",
      "borderColor": "#3f3f46",
      "borderRadius": "6px",
      "paddingLeft": "12px",
      "paddingRight": "12px",
      "backgroundColor": "#18181b",
      "color": "#fafafa",
      "overflow": "hidden"
    },
    "mediaQueries": []
  },
  "variants": [
    {
      "pseudo": "hover",
      "style": {
        "borderColor": "#52525b"
      },
      "mediaQueries": []
    }
  ]
}


```

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

```json

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

```

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

```json

{
  "base": {
    "style": {
      "height": "32px",
      "minHeight": "32px",
      "maxHeight": "32px",
      "paddingLeft": "10px",
      "paddingRight": "10px",
      "fontSize": "12px"
    },
    "mediaQueries": []
  },
  "variants": []
}


```

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

```json

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

```

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

```json

{
  "base": {
    "style": {
      "borderColor": "#dc2626",
      "borderStyle": "solid",
      "borderWidth": "1px"
    },
    "mediaQueries": []
  },
  "variants": []
}


```

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

```json

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

```

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

```json

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


```

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

```json

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

```

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

```json

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


```

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

```json

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

```

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

```json

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


```

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

```json

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

```