# Combobox

Search and select equipment from a list of options.

## Installation

Download: /api/catalog/combobox/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.

Append stylesheet-snippet.css to Perspective Styles > stylesheet.css (enable Advanced Stylesheet). Preserve existing CSS. This supporting file is not imported automatically.

Add an Embedded View (ia.display.view), set props.path to Viewcraft/Components/UI/Combobox/Combobox, 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 | "Equipo / tag" |

| value | string | inout | "" |

| query | string | inout | "" |

| placeholder | string | input | "Buscar tag…" |

| emptyText | string | input | "Sin tags" |

| disabled | boolean | input | false |

| open | boolean | inout | false |

| item0Value | string | input | "area-norte" |

| item0Label | string | input | "Área Norte" |

| item1Value | string | input | "bomba-01" |

| item1Label | string | input | "Bomba-01" |

| item2Value | string | input | "bomba-02" |

| item2Label | string | input | "Bomba-02" |

| item3Value | string | input | "valvula-12" |

| item3Label | string | input | "Válvula-12" |

| item4Value | string | input | "linea-a" |

| item4Label | string | input | "Línea A" |

| item5Value | string | input | "tanque-3" |

| item5Label | string | input | "Tanque-3" |

| item6Value | string | input | "caudal-fi" |

| item6Label | string | input | "Caudalímetro FI-01" |

| item7Value | string | input | "motor-m1" |

| item7Label | string | input | "Motor M1" |

| showClear | boolean | input | false |

## Embedded View usage

```json

{
  "type": "ia.display.view",
  "props": {
    "path": "Viewcraft/Components/UI/Combobox/Combobox",
    "params": {
      "label": "Equipo / tag",
      "value": "",
      "query": "",
      "placeholder": "Buscar tag…",
      "emptyText": "Sin tags",
      "disabled": false,
      "open": false,
      "item0Value": "area-norte",
      "item0Label": "Área Norte",
      "item1Value": "bomba-01",
      "item1Label": "Bomba-01",
      "item2Value": "bomba-02",
      "item2Label": "Bomba-02",
      "item3Value": "valvula-12",
      "item3Label": "Válvula-12",
      "item4Value": "linea-a",
      "item4Label": "Línea A",
      "item5Value": "tanque-3",
      "item5Label": "Tanque-3",
      "item6Value": "caudal-fi",
      "item6Label": "Caudalímetro FI-01",
      "item7Value": "motor-m1",
      "item7Label": "Motor M1",
      "showClear": false
    },
    "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/Viewcraft/Components/UI/Combobox/Combobox/view.json

```json

{
  "custom": {
    "activeIndex": -1
  },
  "params": {
    "label": "Equipo / tag",
    "value": "",
    "query": "",
    "placeholder": "Buscar tag…",
    "emptyText": "Sin tags",
    "disabled": false,
    "open": false,
    "item0Value": "area-norte",
    "item0Label": "Área Norte",
    "item1Value": "bomba-01",
    "item1Label": "Bomba-01",
    "item2Value": "bomba-02",
    "item2Label": "Bomba-02",
    "item3Value": "valvula-12",
    "item3Label": "Válvula-12",
    "item4Value": "linea-a",
    "item4Label": "Línea A",
    "item5Value": "tanque-3",
    "item5Label": "Tanque-3",
    "item6Value": "caudal-fi",
    "item6Label": "Caudalímetro FI-01",
    "item7Value": "motor-m1",
    "item7Label": "Motor M1",
    "showClear": false
  },
  "propConfig": {
    "params.value": {
      "paramDirection": "inout",
      "persistent": true,
      "onChange": {
        "enabled": true,
        "script": "\tif not self.params.open:\n\t\tself.params.query = next((unicode(getattr(self.params, \"item%dLabel\" % i)) for i in range(8) if getattr(self.params, \"item%dValue\" % i) == currentValue.value), \"\")\n"
      }
    },
    "params.query": {
      "paramDirection": "inout"
    },
    "params.open": {
      "paramDirection": "inout",
      "persistent": true
    },
    "params.label": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.placeholder": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.emptyText": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.disabled": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.item0Value": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.item0Label": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.item1Value": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.item1Label": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.item2Value": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.item2Label": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.item3Value": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.item3Label": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.item4Value": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.item4Label": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.item5Value": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.item5Label": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.item6Value": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.item6Label": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.item7Value": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.item7Label": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.showClear": {
      "paramDirection": "input"
    }
  },
  "props": {
    "defaultSize": {
      "width": 320,
      "height": 120
    }
  },
  "root": {
    "type": "ia.container.flex",
    "version": 0,
    "meta": {
      "name": "ComboboxRoot"
    },
    "props": {
      "direction": "column",
      "style": {
        "classes": "vc/combobox vc-r-combo"
      }
    },
    "children": [
      {
        "type": "ia.display.label",
        "version": 0,
        "meta": {
          "name": "Dismiss"
        },
        "props": {
          "text": "",
          "style": {
            "classes": "vc-r-dismiss"
          }
        },
        "position": {
          "grow": 0,
          "shrink": 0,
          "basis": "auto"
        },
        "propConfig": {
          "props.style.classes": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "(\"vc-r-dismiss\") + if({view.params.open} && !{view.params.disabled}, \"\", \" vc-r-hidden\")"
              }
            }
          }
        },
        "events": {
          "dom": {
            "onClick": {
              "type": "script",
              "scope": "G",
              "config": {
                "script": "\tself.view.params.open = False\n"
              }
            }
          }
        }
      },
      {
        "type": "ia.display.label",
        "version": 0,
        "meta": {
          "name": "FieldLabel"
        },
        "props": {
          "text": "Equipo / tag",
          "style": {
            "classes": "vc/combobox-label"
          }
        },
        "propConfig": {
          "props.text": {
            "binding": {
              "type": "property",
              "config": {
                "path": "view.params.label"
              }
            }
          },
          "meta.visible": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "len(coalesce({view.params.label}, '')) > 0"
              }
            }
          },
          "props.style.classes": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "(\"vc/combobox-label\") + if(len(coalesce({view.params.label}, '')) > 0, \"\", \" vc-r-hidden\")"
              }
            }
          }
        }
      },
      {
        "type": "ia.container.flex",
        "version": 0,
        "meta": {
          "name": "Anchor"
        },
        "props": {
          "direction": "column",
          "style": {
            "classes": "vc/combobox-anchor",
            "position": "relative",
            "width": "100%"
          }
        },
        "children": [
          {
            "type": "ia.container.flex",
            "version": 0,
            "meta": {
              "name": "Trigger"
            },
            "props": {
              "direction": "row",
              "alignItems": "center",
              "style": {
                "classes": "vc/combobox-trigger"
              }
            },
            "propConfig": {
              "props.style.classes": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "if(coalesce({view.params.open}, false), \"vc/combobox-trigger vc/combobox-trigger-open\", \"vc/combobox-trigger\")"
                  }
                }
              }
            },
            "children": [
              {
                "type": "ia.input.text-field",
                "version": 0,
                "meta": {
                  "name": "Query"
                },
                "position": {
                  "grow": 1,
                  "shrink": 1,
                  "basis": "auto"
                },
                "props": {
                  "text": "",
                  "placeholder": "Buscar tag…",
                  "deferUpdates": false,
                  "rejectUpdatesWhileFocused": false,
                  "style": {
                    "classes": "vc/combobox-input",
                    "borderStyle": "none"
                  }
                },
                "propConfig": {
                  "props.text": {
                    "binding": {
                      "type": "property",
                      "config": {
                        "path": "view.params.query",
                        "bidirectional": true
                      }
                    }
                  },
                  "props.enabled": {
                    "binding": {
                      "type": "expr",
                      "config": {
                        "expression": "!{view.params.disabled}"
                      }
                    }
                  },
                  "props.placeholder": {
                    "binding": {
                      "type": "property",
                      "config": {
                        "path": "view.params.placeholder"
                      }
                    }
                  }
                },
                "events": {
                  "dom": {
                    "onClick": {
                      "type": "script",
                      "scope": "G",
                      "config": {
                        "script": "\tif not self.view.params.disabled:\n\t\tself.view.params.open = True\n"
                      }
                    },
                    "onFocus": {
                      "type": "script",
                      "scope": "G",
                      "config": {
                        "script": "\tif not self.view.params.disabled:\n\t\tself.view.params.open = True\n"
                      }
                    },
                    "onKeyDown": {
                      "type": "script",
                      "scope": "G",
                      "config": {
                        "script": "\tif self.view.params.disabled: return\n\tkey = event.key\n\tif key in ('Escape', 'Tab'):\n\t\tself.view.params.open = False\n\t\treturn\n\tif len(key) == 1 or key in (\"Backspace\", \"Delete\"):\n\t\tself.view.params.open = True\n\t\tself.view.custom.activeIndex = -1\n\tq = unicode(self.view.params.query or '').lower()\n\tids = [i for i in range(8) if unicode(getattr(self.view.params, 'item%dLabel' % i) or '') and q in unicode(getattr(self.view.params, 'item%dLabel' % i) or '').lower()]\n\tif key in ('ArrowDown', 'ArrowUp') and ids:\n\t\tself.view.params.open = True\n\t\told = int(self.view.custom.activeIndex)\n\t\tpos = ids.index(old) if old in ids else (-1 if key == 'ArrowDown' else 0)\n\t\tself.view.custom.activeIndex = ids[(pos + (1 if key == 'ArrowDown' else -1)) % len(ids)]\n\telif key == 'Enter' and self.view.params.open and ids:\n\t\ti = int(self.view.custom.activeIndex)\n\t\tif i not in ids: i = ids[0]\n\t\tself.view.params.value = getattr(self.view.params, 'item%dValue' % i)\n\t\tself.view.params.query = getattr(self.view.params, 'item%dLabel' % i)\n\t\tself.view.params.open = False\n"
                      }
                    }
                  }
                }
              },
              {
                "type": "ia.input.button",
                "version": 0,
                "meta": {
                  "name": "Clear"
                },
                "props": {
                  "text": "×",
                  "style": {
                    "classes": "vc-r-clear"
                  }
                },
                "position": {
                  "grow": 0,
                  "shrink": 0,
                  "basis": "auto"
                },
                "events": {
                  "component": {
                    "onActionPerformed": {
                      "type": "script",
                      "scope": "G",
                      "config": {
                        "script": "\tif not self.view.params.disabled:\n\t\tself.view.params.value = \"\"\n\t\tself.view.params.query = \"\"\n\t\tself.view.params.open = False\n"
                      }
                    }
                  }
                },
                "propConfig": {
                  "props.style.classes": {
                    "binding": {
                      "type": "expr",
                      "config": {
                        "expression": "(\"vc-r-clear\") + if({view.params.showClear} && len({view.params.value}) > 0, \"\", \" vc-r-hidden\")"
                      }
                    }
                  }
                }
              },
              {
                "type": "ia.display.label",
                "version": 0,
                "meta": {
                  "name": "Chevron"
                },
                "position": {
                  "grow": 0,
                  "shrink": 0,
                  "basis": "20px"
                },
                "props": {
                  "text": "▾",
                  "align": "center",
                  "style": {
                    "classes": "vc/combobox-chevron"
                  }
                },
                "events": {
                  "dom": {
                    "onClick": {
                      "type": "script",
                      "scope": "G",
                      "config": {
                        "script": "\tif self.view.params.disabled:\n\t\treturn\n\tself.view.params.open = not self.view.params.open\n"
                      }
                    }
                  }
                },
                "propConfig": {
                  "props.style.classes": {
                    "binding": {
                      "type": "expr",
                      "config": {
                        "expression": "(\"vc/combobox-chevron\") + if(!{view.params.showClear} || len({view.params.value}) = 0, \"\", \" vc-r-hidden\")"
                      }
                    }
                  }
                }
              }
            ]
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "meta": {
              "name": "Menu"
            },
            "props": {
              "direction": "column",
              "style": {
                "classes": "vc/combobox-menu"
              }
            },
            "propConfig": {
              "meta.visible": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "coalesce({view.params.open}, false) && !coalesce({view.params.disabled}, false)"
                  }
                }
              },
              "props.style.classes": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "((\"vc/combobox-menu\") + if(coalesce({view.params.open}, false) && !coalesce({view.params.disabled}, false), \"\", \" vc-r-hidden\")) + if({view.params.open} && !{view.params.disabled}, \"\", \" vc-r-hidden\")"
                  }
                }
              }
            },
            "children": [
              {
                "type": "ia.display.label",
                "version": 0,
                "meta": {
                  "name": "Empty"
                },
                "props": {
                  "text": "Sin tags",
                  "style": {
                    "classes": "vc/combobox-empty"
                  }
                },
                "propConfig": {
                  "props.text": {
                    "binding": {
                      "type": "property",
                      "config": {
                        "path": "view.params.emptyText"
                      }
                    }
                  },
                  "props.style.classes": {
                    "binding": {
                      "type": "expr",
                      "config": {
                        "expression": "if(!((len({view.params.item0Label}) > 0 && indexOf(lower({view.params.item0Label}), lower({view.params.query})) >= 0) || (len({view.params.item1Label}) > 0 && indexOf(lower({view.params.item1Label}), lower({view.params.query})) >= 0) || (len({view.params.item2Label}) > 0 && indexOf(lower({view.params.item2Label}), lower({view.params.query})) >= 0) || (len({view.params.item3Label}) > 0 && indexOf(lower({view.params.item3Label}), lower({view.params.query})) >= 0) || (len({view.params.item4Label}) > 0 && indexOf(lower({view.params.item4Label}), lower({view.params.query})) >= 0) || (len({view.params.item5Label}) > 0 && indexOf(lower({view.params.item5Label}), lower({view.params.query})) >= 0) || (len({view.params.item6Label}) > 0 && indexOf(lower({view.params.item6Label}), lower({view.params.query})) >= 0) || (len({view.params.item7Label}) > 0 && indexOf(lower({view.params.item7Label}), lower({view.params.query})) >= 0)), \"vc/combobox-empty\", \"vc/combobox-empty vc-r-hidden\")"
                      }
                    }
                  }
                }
              },
              {
                "type": "ia.container.flex",
                "version": 0,
                "meta": {
                  "name": "Opt0"
                },
                "position": {
                  "grow": 0,
                  "shrink": 0,
                  "basis": "auto"
                },
                "props": {
                  "direction": "row",
                  "alignItems": "center",
                  "style": {
                    "classes": "vc/combobox-item"
                  }
                },
                "events": {
                  "dom": {
                    "onClick": {
                      "type": "script",
                      "scope": "G",
                      "config": {
                        "script": "\tif self.view.params.disabled:\n\t\treturn\n\tself.view.params.value = self.view.params.item0Value\n\tself.view.params.query = self.view.params.item0Label\n\tself.view.params.open = False\n\tself.view.custom.activeIndex = -1\n"
                      }
                    }
                  }
                },
                "propConfig": {
                  "meta.visible": {
                    "binding": {
                      "type": "expr",
                      "config": {
                        "expression": "len(coalesce({view.params.item0Label}, '')) > 0 && (len(coalesce({view.params.query}, '')) = 0 || indexOf(lower(coalesce({view.params.item0Label}, '')), lower(coalesce({view.params.query}, ''))) >= 0 || indexOf(lower(coalesce({view.params.item0Value}, '')), lower(coalesce({view.params.query}, ''))) >= 0)"
                      }
                    }
                  },
                  "props.style.classes": {
                    "binding": {
                      "type": "expr",
                      "config": {
                        "expression": "(if(coalesce({view.params.value}, '') = coalesce({view.params.item0Value}, '') && len(coalesce({view.params.value}, '')) > 0, \"vc/combobox-item vc/combobox-item-active\", \"vc/combobox-item\")) + if(len(coalesce({view.params.item0Label}, '')) > 0 && (len(coalesce({view.params.query}, '')) = 0 || indexOf(lower(coalesce({view.params.item0Label}, '')), lower(coalesce({view.params.query}, ''))) >= 0 || indexOf(lower(coalesce({view.params.item0Value}, '')), lower(coalesce({view.params.query}, ''))) >= 0), \"\", \" vc-r-hidden\") + if({view.custom.activeIndex} = 0, \" vc-r-active\", \"\")"
                      }
                    }
                  }
                },
                "children": [
                  {
                    "type": "ia.display.label",
                    "version": 0,
                    "meta": {
                      "name": "OptLab0"
                    },
                    "position": {
                      "grow": 1,
                      "shrink": 1,
                      "basis": "auto"
                    },
                    "props": {
                      "text": "Área Norte",
                      "style": {
                        "color": "#fafafa",
                        "fontSize": "13px"
                      }
                    },
                    "propConfig": {
                      "props.text": {
                        "binding": {
                          "type": "property",
                          "config": {
                            "path": "view.params.item0Label"
                          }
                        }
                      }
                    }
                  },
                  {
                    "type": "ia.display.label",
                    "version": 0,
                    "meta": {
                      "name": "OptCheck0"
                    },
                    "position": {
                      "grow": 0,
                      "shrink": 0,
                      "basis": "16px"
                    },
                    "props": {
                      "text": "✓",
                      "style": {
                        "color": "#fafafa",
                        "fontSize": "12px"
                      }
                    },
                    "propConfig": {
                      "meta.visible": {
                        "binding": {
                          "type": "expr",
                          "config": {
                            "expression": "coalesce({view.params.value}, '') = coalesce({view.params.item0Value}, '') && len(coalesce({view.params.value}, '')) > 0"
                          }
                        }
                      },
                      "props.style.classes": {
                        "binding": {
                          "type": "expr",
                          "config": {
                            "expression": "(\"\") + if(coalesce({view.params.value}, '') = coalesce({view.params.item0Value}, '') && len(coalesce({view.params.value}, '')) > 0, \"\", \" vc-r-hidden\")"
                          }
                        }
                      }
                    }
                  }
                ]
              },
              {
                "type": "ia.container.flex",
                "version": 0,
                "meta": {
                  "name": "Opt1"
                },
                "position": {
                  "grow": 0,
                  "shrink": 0,
                  "basis": "auto"
                },
                "props": {
                  "direction": "row",
                  "alignItems": "center",
                  "style": {
                    "classes": "vc/combobox-item"
                  }
                },
                "events": {
                  "dom": {
                    "onClick": {
                      "type": "script",
                      "scope": "G",
                      "config": {
                        "script": "\tif self.view.params.disabled:\n\t\treturn\n\tself.view.params.value = self.view.params.item1Value\n\tself.view.params.query = self.view.params.item1Label\n\tself.view.params.open = False\n\tself.view.custom.activeIndex = -1\n"
                      }
                    }
                  }
                },
                "propConfig": {
                  "meta.visible": {
                    "binding": {
                      "type": "expr",
                      "config": {
                        "expression": "len(coalesce({view.params.item1Label}, '')) > 0 && (len(coalesce({view.params.query}, '')) = 0 || indexOf(lower(coalesce({view.params.item1Label}, '')), lower(coalesce({view.params.query}, ''))) >= 0 || indexOf(lower(coalesce({view.params.item1Value}, '')), lower(coalesce({view.params.query}, ''))) >= 0)"
                      }
                    }
                  },
                  "props.style.classes": {
                    "binding": {
                      "type": "expr",
                      "config": {
                        "expression": "(if(coalesce({view.params.value}, '') = coalesce({view.params.item1Value}, '') && len(coalesce({view.params.value}, '')) > 0, \"vc/combobox-item vc/combobox-item-active\", \"vc/combobox-item\")) + if(len(coalesce({view.params.item1Label}, '')) > 0 && (len(coalesce({view.params.query}, '')) = 0 || indexOf(lower(coalesce({view.params.item1Label}, '')), lower(coalesce({view.params.query}, ''))) >= 0 || indexOf(lower(coalesce({view.params.item1Value}, '')), lower(coalesce({view.params.query}, ''))) >= 0), \"\", \" vc-r-hidden\") + if({view.custom.activeIndex} = 1, \" vc-r-active\", \"\")"
                      }
                    }
                  }
                },
                "children": [
                  {
                    "type": "ia.display.label",
                    "version": 0,
                    "meta": {
                      "name": "OptLab1"
                    },
                    "position": {
                      "grow": 1,
                      "shrink": 1,
                      "basis": "auto"
                    },
                    "props": {
                      "text": "Bomba-01",
                      "style": {
                        "color": "#fafafa",
                        "fontSize": "13px"
                      }
                    },
                    "propConfig": {
                      "props.text": {
                        "binding": {
                          "type": "property",
                          "config": {
                            "path": "view.params.item1Label"
                          }
                        }
                      }
                    }
                  },
                  {
                    "type": "ia.display.label",
                    "version": 0,
                    "meta": {
                      "name": "OptCheck1"
                    },
                    "position": {
                      "grow": 0,
                      "shrink": 0,
                      "basis": "16px"
                    },
                    "props": {
                      "text": "✓",
                      "style": {
                        "color": "#fafafa",
                        "fontSize": "12px"
                      }
                    },
                    "propConfig": {
                      "meta.visible": {
                        "binding": {
                          "type": "expr",
                          "config": {
                            "expression": "coalesce({view.params.value}, '') = coalesce({view.params.item1Value}, '') && len(coalesce({view.params.value}, '')) > 0"
                          }
                        }
                      },
                      "props.style.classes": {
                        "binding": {
                          "type": "expr",
                          "config": {
                            "expression": "(\"\") + if(coalesce({view.params.value}, '') = coalesce({view.params.item1Value}, '') && len(coalesce({view.params.value}, '')) > 0, \"\", \" vc-r-hidden\")"
                          }
                        }
                      }
                    }
                  }
                ]
              },
              {
                "type": "ia.container.flex",
                "version": 0,
                "meta": {
                  "name": "Opt2"
                },
                "position": {
                  "grow": 0,
                  "shrink": 0,
                  "basis": "auto"
                },
                "props": {
                  "direction": "row",
                  "alignItems": "center",
                  "style": {
                    "classes": "vc/combobox-item"
                  }
                },
                "events": {
                  "dom": {
                    "onClick": {
                      "type": "script",
                      "scope": "G",
                      "config": {
                        "script": "\tif self.view.params.disabled:\n\t\treturn\n\tself.view.params.value = self.view.params.item2Value\n\tself.view.params.query = self.view.params.item2Label\n\tself.view.params.open = False\n\tself.view.custom.activeIndex = -1\n"
                      }
                    }
                  }
                },
                "propConfig": {
                  "meta.visible": {
                    "binding": {
                      "type": "expr",
                      "config": {
                        "expression": "len(coalesce({view.params.item2Label}, '')) > 0 && (len(coalesce({view.params.query}, '')) = 0 || indexOf(lower(coalesce({view.params.item2Label}, '')), lower(coalesce({view.params.query}, ''))) >= 0 || indexOf(lower(coalesce({view.params.item2Value}, '')), lower(coalesce({view.params.query}, ''))) >= 0)"
                      }
                    }
                  },
                  "props.style.classes": {
                    "binding": {
                      "type": "expr",
                      "config": {
                        "expression": "(if(coalesce({view.params.value}, '') = coalesce({view.params.item2Value}, '') && len(coalesce({view.params.value}, '')) > 0, \"vc/combobox-item vc/combobox-item-active\", \"vc/combobox-item\")) + if(len(coalesce({view.params.item2Label}, '')) > 0 && (len(coalesce({view.params.query}, '')) = 0 || indexOf(lower(coalesce({view.params.item2Label}, '')), lower(coalesce({view.params.query}, ''))) >= 0 || indexOf(lower(coalesce({view.params.item2Value}, '')), lower(coalesce({view.params.query}, ''))) >= 0), \"\", \" vc-r-hidden\") + if({view.custom.activeIndex} = 2, \" vc-r-active\", \"\")"
                      }
                    }
                  }
                },
                "children": [
                  {
                    "type": "ia.display.label",
                    "version": 0,
                    "meta": {
                      "name": "OptLab2"
                    },
                    "position": {
                      "grow": 1,
                      "shrink": 1,
                      "basis": "auto"
                    },
                    "props": {
                      "text": "Bomba-02",
                      "style": {
                        "color": "#fafafa",
                        "fontSize": "13px"
                      }
                    },
                    "propConfig": {
                      "props.text": {
                        "binding": {
                          "type": "property",
                          "config": {
                            "path": "view.params.item2Label"
                          }
                        }
                      }
                    }
                  },
                  {
                    "type": "ia.display.label",
                    "version": 0,
                    "meta": {
                      "name": "OptCheck2"
                    },
                    "position": {
                      "grow": 0,
                      "shrink": 0,
                      "basis": "16px"
                    },
                    "props": {
                      "text": "✓",
                      "style": {
                        "color": "#fafafa",
                        "fontSize": "12px"
                      }
                    },
                    "propConfig": {
                      "meta.visible": {
                        "binding": {
                          "type": "expr",
                          "config": {
                            "expression": "coalesce({view.params.value}, '') = coalesce({view.params.item2Value}, '') && len(coalesce({view.params.value}, '')) > 0"
                          }
                        }
                      },
                      "props.style.classes": {
                        "binding": {
                          "type": "expr",
                          "config": {
                            "expression": "(\"\") + if(coalesce({view.params.value}, '') = coalesce({view.params.item2Value}, '') && len(coalesce({view.params.value}, '')) > 0, \"\", \" vc-r-hidden\")"
                          }
                        }
                      }
                    }
                  }
                ]
              },
              {
                "type": "ia.container.flex",
                "version": 0,
                "meta": {
                  "name": "Opt3"
                },
                "position": {
                  "grow": 0,
                  "shrink": 0,
                  "basis": "auto"
                },
                "props": {
                  "direction": "row",
                  "alignItems": "center",
                  "style": {
                    "classes": "vc/combobox-item"
                  }
                },
                "events": {
                  "dom": {
                    "onClick": {
                      "type": "script",
                      "scope": "G",
                      "config": {
                        "script": "\tif self.view.params.disabled:\n\t\treturn\n\tself.view.params.value = self.view.params.item3Value\n\tself.view.params.query = self.view.params.item3Label\n\tself.view.params.open = False\n\tself.view.custom.activeIndex = -1\n"
                      }
                    }
                  }
                },
                "propConfig": {
                  "meta.visible": {
                    "binding": {
                      "type": "expr",
                      "config": {
                        "expression": "len(coalesce({view.params.item3Label}, '')) > 0 && (len(coalesce({view.params.query}, '')) = 0 || indexOf(lower(coalesce({view.params.item3Label}, '')), lower(coalesce({view.params.query}, ''))) >= 0 || indexOf(lower(coalesce({view.params.item3Value}, '')), lower(coalesce({view.params.query}, ''))) >= 0)"
                      }
                    }
                  },
                  "props.style.classes": {
                    "binding": {
                      "type": "expr",
                      "config": {
                        "expression": "(if(coalesce({view.params.value}, '') = coalesce({view.params.item3Value}, '') && len(coalesce({view.params.value}, '')) > 0, \"vc/combobox-item vc/combobox-item-active\", \"vc/combobox-item\")) + if(len(coalesce({view.params.item3Label}, '')) > 0 && (len(coalesce({view.params.query}, '')) = 0 || indexOf(lower(coalesce({view.params.item3Label}, '')), lower(coalesce({view.params.query}, ''))) >= 0 || indexOf(lower(coalesce({view.params.item3Value}, '')), lower(coalesce({view.params.query}, ''))) >= 0), \"\", \" vc-r-hidden\") + if({view.custom.activeIndex} = 3, \" vc-r-active\", \"\")"
                      }
                    }
                  }
                },
                "children": [
                  {
                    "type": "ia.display.label",
                    "version": 0,
                    "meta": {
                      "name": "OptLab3"
                    },
                    "position": {
                      "grow": 1,
                      "shrink": 1,
                      "basis": "auto"
                    },
                    "props": {
                      "text": "Válvula-12",
                      "style": {
                        "color": "#fafafa",
                        "fontSize": "13px"
                      }
                    },
                    "propConfig": {
                      "props.text": {
                        "binding": {
                          "type": "property",
                          "config": {
                            "path": "view.params.item3Label"
                          }
                        }
                      }
                    }
                  },
                  {
                    "type": "ia.display.label",
                    "version": 0,
                    "meta": {
                      "name": "OptCheck3"
                    },
                    "position": {
                      "grow": 0,
                      "shrink": 0,
                      "basis": "16px"
                    },
                    "props": {
                      "text": "✓",
                      "style": {
                        "color": "#fafafa",
                        "fontSize": "12px"
                      }
                    },
                    "propConfig": {
                      "meta.visible": {
                        "binding": {
                          "type": "expr",
                          "config": {
                            "expression": "coalesce({view.params.value}, '') = coalesce({view.params.item3Value}, '') && len(coalesce({view.params.value}, '')) > 0"
                          }
                        }
                      },
                      "props.style.classes": {
                        "binding": {
                          "type": "expr",
                          "config": {
                            "expression": "(\"\") + if(coalesce({view.params.value}, '') = coalesce({view.params.item3Value}, '') && len(coalesce({view.params.value}, '')) > 0, \"\", \" vc-r-hidden\")"
                          }
                        }
                      }
                    }
                  }
                ]
              },
              {
                "type": "ia.container.flex",
                "version": 0,
                "meta": {
                  "name": "Opt4"
                },
                "position": {
                  "grow": 0,
                  "shrink": 0,
                  "basis": "auto"
                },
                "props": {
                  "direction": "row",
                  "alignItems": "center",
                  "style": {
                    "classes": "vc/combobox-item"
                  }
                },
                "events": {
                  "dom": {
                    "onClick": {
                      "type": "script",
                      "scope": "G",
                      "config": {
                        "script": "\tif self.view.params.disabled:\n\t\treturn\n\tself.view.params.value = self.view.params.item4Value\n\tself.view.params.query = self.view.params.item4Label\n\tself.view.params.open = False\n\tself.view.custom.activeIndex = -1\n"
                      }
                    }
                  }
                },
                "propConfig": {
                  "meta.visible": {
                    "binding": {
                      "type": "expr",
                      "config": {
                        "expression": "len(coalesce({view.params.item4Label}, '')) > 0 && (len(coalesce({view.params.query}, '')) = 0 || indexOf(lower(coalesce({view.params.item4Label}, '')), lower(coalesce({view.params.query}, ''))) >= 0 || indexOf(lower(coalesce({view.params.item4Value}, '')), lower(coalesce({view.params.query}, ''))) >= 0)"
                      }
                    }
                  },
                  "props.style.classes": {
                    "binding": {
                      "type": "expr",
                      "config": {
                        "expression": "(if(coalesce({view.params.value}, '') = coalesce({view.params.item4Value}, '') && len(coalesce({view.params.value}, '')) > 0, \"vc/combobox-item vc/combobox-item-active\", \"vc/combobox-item\")) + if(len(coalesce({view.params.item4Label}, '')) > 0 && (len(coalesce({view.params.query}, '')) = 0 || indexOf(lower(coalesce({view.params.item4Label}, '')), lower(coalesce({view.params.query}, ''))) >= 0 || indexOf(lower(coalesce({view.params.item4Value}, '')), lower(coalesce({view.params.query}, ''))) >= 0), \"\", \" vc-r-hidden\") + if({view.custom.activeIndex} = 4, \" vc-r-active\", \"\")"
                      }
                    }
                  }
                },
                "children": [
                  {
                    "type": "ia.display.label",
                    "version": 0,
                    "meta": {
                      "name": "OptLab4"
                    },
                    "position": {
                      "grow": 1,
                      "shrink": 1,
                      "basis": "auto"
                    },
                    "props": {
                      "text": "Línea A",
                      "style": {
                        "color": "#fafafa",
                        "fontSize": "13px"
                      }
                    },
                    "propConfig": {
                      "props.text": {
                        "binding": {
                          "type": "property",
                          "config": {
                            "path": "view.params.item4Label"
                          }
                        }
                      }
                    }
                  },
                  {
                    "type": "ia.display.label",
                    "version": 0,
                    "meta": {
                      "name": "OptCheck4"
                    },
                    "position": {
                      "grow": 0,
                      "shrink": 0,
                      "basis": "16px"
                    },
                    "props": {
                      "text": "✓",
                      "style": {
                        "color": "#fafafa",
                        "fontSize": "12px"
                      }
                    },
                    "propConfig": {
                      "meta.visible": {
                        "binding": {
                          "type": "expr",
                          "config": {
                            "expression": "coalesce({view.params.value}, '') = coalesce({view.params.item4Value}, '') && len(coalesce({view.params.value}, '')) > 0"
                          }
                        }
                      },
                      "props.style.classes": {
                        "binding": {
                          "type": "expr",
                          "config": {
                            "expression": "(\"\") + if(coalesce({view.params.value}, '') = coalesce({view.params.item4Value}, '') && len(coalesce({view.params.value}, '')) > 0, \"\", \" vc-r-hidden\")"
                          }
                        }
                      }
                    }
                  }
                ]
              },
              {
                "type": "ia.container.flex",
                "version": 0,
                "meta": {
                  "name": "Opt5"
                },
                "position": {
                  "grow": 0,
                  "shrink": 0,
                  "basis": "auto"
                },
                "props": {
                  "direction": "row",
                  "alignItems": "center",
                  "style": {
                    "classes": "vc/combobox-item"
                  }
                },
                "events": {
                  "dom": {
                    "onClick": {
                      "type": "script",
                      "scope": "G",
                      "config": {
                        "script": "\tif self.view.params.disabled:\n\t\treturn\n\tself.view.params.value = self.view.params.item5Value\n\tself.view.params.query = self.view.params.item5Label\n\tself.view.params.open = False\n\tself.view.custom.activeIndex = -1\n"
                      }
                    }
                  }
                },
                "propConfig": {
                  "meta.visible": {
                    "binding": {
                      "type": "expr",
                      "config": {
                        "expression": "len(coalesce({view.params.item5Label}, '')) > 0 && (len(coalesce({view.params.query}, '')) = 0 || indexOf(lower(coalesce({view.params.item5Label}, '')), lower(coalesce({view.params.query}, ''))) >= 0 || indexOf(lower(coalesce({view.params.item5Value}, '')), lower(coalesce({view.params.query}, ''))) >= 0)"
                      }
                    }
                  },
                  "props.style.classes": {
                    "binding": {
                      "type": "expr",
                      "config": {
                        "expression": "(if(coalesce({view.params.value}, '') = coalesce({view.params.item5Value}, '') && len(coalesce({view.params.value}, '')) > 0, \"vc/combobox-item vc/combobox-item-active\", \"vc/combobox-item\")) + if(len(coalesce({view.params.item5Label}, '')) > 0 && (len(coalesce({view.params.query}, '')) = 0 || indexOf(lower(coalesce({view.params.item5Label}, '')), lower(coalesce({view.params.query}, ''))) >= 0 || indexOf(lower(coalesce({view.params.item5Value}, '')), lower(coalesce({view.params.query}, ''))) >= 0), \"\", \" vc-r-hidden\") + if({view.custom.activeIndex} = 5, \" vc-r-active\", \"\")"
                      }
                    }
                  }
                },
                "children": [
                  {
                    "type": "ia.display.label",
                    "version": 0,
                    "meta": {
                      "name": "OptLab5"
                    },
                    "position": {
                      "grow": 1,
                      "shrink": 1,
                      "basis": "auto"
                    },
                    "props": {
                      "text": "Tanque-3",
                      "style": {
                        "color": "#fafafa",
                        "fontSize": "13px"
                      }
                    },
                    "propConfig": {
                      "props.text": {
                        "binding": {
                          "type": "property",
                          "config": {
                            "path": "view.params.item5Label"
                          }
                        }
                      }
                    }
                  },
                  {
                    "type": "ia.display.label",
                    "version": 0,
                    "meta": {
                      "name": "OptCheck5"
                    },
                    "position": {
                      "grow": 0,
                      "shrink": 0,
                      "basis": "16px"
                    },
                    "props": {
                      "text": "✓",
                      "style": {
                        "color": "#fafafa",
                        "fontSize": "12px"
                      }
                    },
                    "propConfig": {
                      "meta.visible": {
                        "binding": {
                          "type": "expr",
                          "config": {
                            "expression": "coalesce({view.params.value}, '') = coalesce({view.params.item5Value}, '') && len(coalesce({view.params.value}, '')) > 0"
                          }
                        }
                      },
                      "props.style.classes": {
                        "binding": {
                          "type": "expr",
                          "config": {
                            "expression": "(\"\") + if(coalesce({view.params.value}, '') = coalesce({view.params.item5Value}, '') && len(coalesce({view.params.value}, '')) > 0, \"\", \" vc-r-hidden\")"
                          }
                        }
                      }
                    }
                  }
                ]
              },
              {
                "type": "ia.container.flex",
                "version": 0,
                "meta": {
                  "name": "Opt6"
                },
                "position": {
                  "grow": 0,
                  "shrink": 0,
                  "basis": "auto"
                },
                "props": {
                  "direction": "row",
                  "alignItems": "center",
                  "style": {
                    "classes": "vc/combobox-item"
                  }
                },
                "events": {
                  "dom": {
                    "onClick": {
                      "type": "script",
                      "scope": "G",
                      "config": {
                        "script": "\tif self.view.params.disabled:\n\t\treturn\n\tself.view.params.value = self.view.params.item6Value\n\tself.view.params.query = self.view.params.item6Label\n\tself.view.params.open = False\n\tself.view.custom.activeIndex = -1\n"
                      }
                    }
                  }
                },
                "propConfig": {
                  "meta.visible": {
                    "binding": {
                      "type": "expr",
                      "config": {
                        "expression": "len(coalesce({view.params.item6Label}, '')) > 0 && (len(coalesce({view.params.query}, '')) = 0 || indexOf(lower(coalesce({view.params.item6Label}, '')), lower(coalesce({view.params.query}, ''))) >= 0 || indexOf(lower(coalesce({view.params.item6Value}, '')), lower(coalesce({view.params.query}, ''))) >= 0)"
                      }
                    }
                  },
                  "props.style.classes": {
                    "binding": {
                      "type": "expr",
                      "config": {
                        "expression": "(if(coalesce({view.params.value}, '') = coalesce({view.params.item6Value}, '') && len(coalesce({view.params.value}, '')) > 0, \"vc/combobox-item vc/combobox-item-active\", \"vc/combobox-item\")) + if(len(coalesce({view.params.item6Label}, '')) > 0 && (len(coalesce({view.params.query}, '')) = 0 || indexOf(lower(coalesce({view.params.item6Label}, '')), lower(coalesce({view.params.query}, ''))) >= 0 || indexOf(lower(coalesce({view.params.item6Value}, '')), lower(coalesce({view.params.query}, ''))) >= 0), \"\", \" vc-r-hidden\") + if({view.custom.activeIndex} = 6, \" vc-r-active\", \"\")"
                      }
                    }
                  }
                },
                "children": [
                  {
                    "type": "ia.display.label",
                    "version": 0,
                    "meta": {
                      "name": "OptLab6"
                    },
                    "position": {
                      "grow": 1,
                      "shrink": 1,
                      "basis": "auto"
                    },
                    "props": {
                      "text": "Caudalímetro FI-01",
                      "style": {
                        "color": "#fafafa",
                        "fontSize": "13px"
                      }
                    },
                    "propConfig": {
                      "props.text": {
                        "binding": {
                          "type": "property",
                          "config": {
                            "path": "view.params.item6Label"
                          }
                        }
                      }
                    }
                  },
                  {
                    "type": "ia.display.label",
                    "version": 0,
                    "meta": {
                      "name": "OptCheck6"
                    },
                    "position": {
                      "grow": 0,
                      "shrink": 0,
                      "basis": "16px"
                    },
                    "props": {
                      "text": "✓",
                      "style": {
                        "color": "#fafafa",
                        "fontSize": "12px"
                      }
                    },
                    "propConfig": {
                      "meta.visible": {
                        "binding": {
                          "type": "expr",
                          "config": {
                            "expression": "coalesce({view.params.value}, '') = coalesce({view.params.item6Value}, '') && len(coalesce({view.params.value}, '')) > 0"
                          }
                        }
                      },
                      "props.style.classes": {
                        "binding": {
                          "type": "expr",
                          "config": {
                            "expression": "(\"\") + if(coalesce({view.params.value}, '') = coalesce({view.params.item6Value}, '') && len(coalesce({view.params.value}, '')) > 0, \"\", \" vc-r-hidden\")"
                          }
                        }
                      }
                    }
                  }
                ]
              },
              {
                "type": "ia.container.flex",
                "version": 0,
                "meta": {
                  "name": "Opt7"
                },
                "position": {
                  "grow": 0,
                  "shrink": 0,
                  "basis": "auto"
                },
                "props": {
                  "direction": "row",
                  "alignItems": "center",
                  "style": {
                    "classes": "vc/combobox-item"
                  }
                },
                "events": {
                  "dom": {
                    "onClick": {
                      "type": "script",
                      "scope": "G",
                      "config": {
                        "script": "\tif self.view.params.disabled:\n\t\treturn\n\tself.view.params.value = self.view.params.item7Value\n\tself.view.params.query = self.view.params.item7Label\n\tself.view.params.open = False\n\tself.view.custom.activeIndex = -1\n"
                      }
                    }
                  }
                },
                "propConfig": {
                  "meta.visible": {
                    "binding": {
                      "type": "expr",
                      "config": {
                        "expression": "len(coalesce({view.params.item7Label}, '')) > 0 && (len(coalesce({view.params.query}, '')) = 0 || indexOf(lower(coalesce({view.params.item7Label}, '')), lower(coalesce({view.params.query}, ''))) >= 0 || indexOf(lower(coalesce({view.params.item7Value}, '')), lower(coalesce({view.params.query}, ''))) >= 0)"
                      }
                    }
                  },
                  "props.style.classes": {
                    "binding": {
                      "type": "expr",
                      "config": {
                        "expression": "(if(coalesce({view.params.value}, '') = coalesce({view.params.item7Value}, '') && len(coalesce({view.params.value}, '')) > 0, \"vc/combobox-item vc/combobox-item-active\", \"vc/combobox-item\")) + if(len(coalesce({view.params.item7Label}, '')) > 0 && (len(coalesce({view.params.query}, '')) = 0 || indexOf(lower(coalesce({view.params.item7Label}, '')), lower(coalesce({view.params.query}, ''))) >= 0 || indexOf(lower(coalesce({view.params.item7Value}, '')), lower(coalesce({view.params.query}, ''))) >= 0), \"\", \" vc-r-hidden\") + if({view.custom.activeIndex} = 7, \" vc-r-active\", \"\")"
                      }
                    }
                  }
                },
                "children": [
                  {
                    "type": "ia.display.label",
                    "version": 0,
                    "meta": {
                      "name": "OptLab7"
                    },
                    "position": {
                      "grow": 1,
                      "shrink": 1,
                      "basis": "auto"
                    },
                    "props": {
                      "text": "Motor M1",
                      "style": {
                        "color": "#fafafa",
                        "fontSize": "13px"
                      }
                    },
                    "propConfig": {
                      "props.text": {
                        "binding": {
                          "type": "property",
                          "config": {
                            "path": "view.params.item7Label"
                          }
                        }
                      }
                    }
                  },
                  {
                    "type": "ia.display.label",
                    "version": 0,
                    "meta": {
                      "name": "OptCheck7"
                    },
                    "position": {
                      "grow": 0,
                      "shrink": 0,
                      "basis": "16px"
                    },
                    "props": {
                      "text": "✓",
                      "style": {
                        "color": "#fafafa",
                        "fontSize": "12px"
                      }
                    },
                    "propConfig": {
                      "meta.visible": {
                        "binding": {
                          "type": "expr",
                          "config": {
                            "expression": "coalesce({view.params.value}, '') = coalesce({view.params.item7Value}, '') && len(coalesce({view.params.value}, '')) > 0"
                          }
                        }
                      },
                      "props.style.classes": {
                        "binding": {
                          "type": "expr",
                          "config": {
                            "expression": "(\"\") + if(coalesce({view.params.value}, '') = coalesce({view.params.item7Value}, '') && len(coalesce({view.params.value}, '')) > 0, \"\", \" vc-r-hidden\")"
                          }
                        }
                      }
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    ],
    "events": {
      "dom": {
        "onKeyDown": {
          "type": "script",
          "scope": "G",
          "config": {
            "script": "\tif event.key == \"Escape\":\n\t\tself.view.params.open = False\n"
          }
        }
      }
    }
  }
}


```

### com.inductiveautomation.perspective/views/Viewcraft/Components/UI/Combobox/Combobox/resource.json

```json

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

```

### stylesheet-snippet.css

```css


[class~="psc-vc/combobox"], .psc-vc\/combobox {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 360px !important;
  box-sizing: border-box !important;
}
[class~="psc-vc/combobox-anchor"], .psc-vc\/combobox-anchor {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  align-self: stretch !important;
  overflow: visible !important;
}
[class~="psc-vc/combobox"], .psc-vc\/combobox {
  overflow: visible !important;
}
[class~="psc-vc/combobox-trigger"], .psc-vc\/combobox-trigger {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 36px !important;
  height: auto !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  border: 1px solid var(--vc-border, #3f3f46) !important;
  background-color: var(--vc-panel, #171717) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}
[class~="psc-vc/combobox-trigger"]:hover, .psc-vc\/combobox-trigger:hover {
  border-color: #52525b !important;
}
[class~="psc-vc/combobox-trigger-open"], .psc-vc\/combobox-trigger-open {
  border-color: var(--vc-ring, #a1a1aa) !important;
}
[class~="psc-vc/combobox-input"], .psc-vc\/combobox-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  border: none !important;
  background: transparent !important;
  color: var(--vc-foreground, #fafafa) !important;
  font-size: 14px !important;
  outline: none !important;
  box-shadow: none !important;
}
[class~="psc-vc/combobox-chevron"], .psc-vc\/combobox-chevron {
  color: var(--vc-muted-fg, #a1a1aa) !important;
  font-size: 12px !important;
  width: 20px !important;
  text-align: center !important;
  flex: 0 0 auto !important;
}
[class~="psc-vc/combobox-menu"], .psc-vc\/combobox-menu {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 50 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  max-height: 240px !important;
  overflow: auto !important;
  padding: 6px !important;
  border-radius: 10px !important;
  border: 1px solid var(--vc-border, #3f3f46) !important;
  background-color: var(--vc-panel, #171717) !important;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.45) !important;
  box-sizing: border-box !important;
}
[class~="psc-vc/combobox-item"], .psc-vc\/combobox-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 32px !important;
  padding: 6px 8px !important;
  border-radius: 6px !important;
  color: var(--vc-foreground, #fafafa) !important;
  font-size: 13px !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}
[class~="psc-vc/combobox-item"]:hover, .psc-vc\/combobox-item:hover {
  background-color: var(--vc-secondary, #27272a) !important;
}
[class~="psc-vc/combobox-item-active"], .psc-vc\/combobox-item-active {
  background-color: var(--vc-secondary, #27272a) !important;
}
[class~="psc-vc/combobox-empty"], .psc-vc\/combobox-empty {
  color: var(--vc-muted-fg, #a1a1aa) !important;
  font-size: 13px !important;
  padding: 10px 8px !important;
}
[class~="psc-vc/combobox-label"], .psc-vc\/combobox-label {
  color: var(--vc-muted-fg, #a1a1aa) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
[class~="psc-vc/combobox-menu"] .component-meta-hidden, .psc-vc\/combobox-menu .component-meta-hidden {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: none !important;
  flex: 0 0 0 !important;
}
[class~="psc-vc/lab-hmi-page"] [class~="psc-vc/combobox-trigger"], .psc-vc\/lab-hmi-page .psc-vc\/combobox-trigger{
  min-height:44px!important;
  box-sizing:border-box!important;
}
[class~="psc-vc/lab-hmi-page"] [class~="psc-vc/combobox-trigger"], .psc-vc\/lab-hmi-page .psc-vc\/combobox-trigger{
  transition:opacity 160ms var(--vc-hmi-ease,cubic-bezier(0.23, 1, 0.32, 1)),background-color 160ms var(--vc-hmi-ease,cubic-bezier(0.23, 1, 0.32, 1)),border-color 160ms var(--vc-hmi-ease,cubic-bezier(0.23, 1, 0.32, 1)),color 160ms var(--vc-hmi-ease,cubic-bezier(0.23, 1, 0.32, 1))!important;
}
@media (hover:hover) and (pointer:fine){
  [class~="psc-vc/lab-hmi-page"] [class~="psc-vc/combobox-item"]:hover, .psc-vc\/lab-hmi-page .psc-vc\/combobox-item:hover{
    background-color:var(--vc-hmi-surface,#27272a)!important;
  }
}
@media (prefers-reduced-motion:reduce){
  [class~="psc-vc/lab-hmi-page"] [class~="psc-vc/combobox-trigger"], .psc-vc\/lab-hmi-page .psc-vc\/combobox-trigger{
    transition:none!important;
  }
}
[class~="psc-vc/lab-hmi-page"] [class~="psc-vc/combobox-trigger"], .psc-vc\/lab-hmi-page .psc-vc\/combobox-trigger{
  min-height:44px!important;
}
[class~="psc-vc/combobox-invalid"] [class~="psc-vc/combobox-trigger"], .psc-vc\/combobox-invalid .psc-vc\/combobox-trigger{
  border-color: var(--vc-destructive, #f87171) !important;
}
.psc-vc-r-card:has(.psc-vc-r-combo:has([class~="psc-vc/combobox-trigger-open"])) { z-index:40!important; }
.psc-vc-r-combo [class~="psc-vc/combobox-label"] { font:500 14px/20px Inter,"Segoe UI",sans-serif!important; color: var(--vc-foreground, #fafafa)!important; }
.psc-vc-r-combo [class~="psc-vc/combobox-trigger"] { position:relative!important; z-index:40!important; height:32px!important; min-height:32px!important; padding:0 8px 0 10px!important; border:1px solid #303030!important; border-radius:10px!important; background:#151515!important; gap:4px!important; }
.psc-vc-r-combo [class~="psc-vc/combobox-trigger"]:focus-within { border-color:#737373!important; box-shadow:0 0 0 3px #73737366!important; }
.psc-vc-r-combo [class~="psc-vc/combobox-input"] { height:30px!important; min-height:24px!important; padding:4px 0!important; font:400 14px/20px Inter,"Segoe UI",sans-serif!important; color: var(--vc-foreground, #fafafa)!important; background:transparent!important; border:0!important; outline:none!important; box-shadow:none!important; width:100%!important; }
.psc-vc-r-combo [class~="psc-vc/combobox-input"]::placeholder { color: var(--vc-muted-fg, #a1a1a1)!important; }
.psc-vc-r-combo [class~="psc-vc/combobox-chevron"] { width:16px!important; flex:0 0 16px!important; font-size:0!important; height:16px!important; background:#a1a1a1!important; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat!important; cursor:pointer!important; }
.psc-vc-r-combo [class~="psc-vc/combobox-menu"] { position:absolute!important; top:calc(100% + 6px)!important; left:0!important; width:100%!important; max-height:248px!important; min-height:0!important; padding:4px!important; gap:0!important; background: var(--vc-panel, #171717)!important; border:1px solid #303030!important; border-radius:10px!important; box-shadow:0 6px 18px #0005!important; z-index:41!important; overflow:auto!important; }
.psc-vc-r-combo [class~="psc-vc/combobox-item"] { height:28px!important; min-height:28px!important; flex:0 0 28px!important; padding:4px 6px!important; border-radius:8px!important; gap:6px!important; background:transparent!important; cursor:default!important; }
.psc-vc-r-combo [class~="psc-vc/combobox-item"] > * { font-size:14px!important; line-height:20px!important; }
.psc-vc-r-combo [class~="psc-vc/combobox-item"]:hover { background:#262626!important; }
.psc-vc-r-combo [class~="psc-vc/combobox-empty"] { padding:12px 8px!important; color: var(--vc-muted-fg, #a1a1a1)!important; font-size:14px!important; text-align:center!important; }
.psc-vc-r-invalid [class~="psc-vc/combobox-trigger"] { border-color:#e36571!important; box-shadow:0 0 0 3px #e3657133!important; }
.psc-vc-r-invalid [class~="psc-vc/combobox-label"] { color:#e36571!important; font-size:14px!important; }


@supports (anchor-scope: --vc-field) {
 .psc-vc-r-combo [class~="psc-vc/combobox-trigger"] { anchor-name:--vc-field; }
}


@supports (anchor-scope: --vc-field) {
 .psc-vc-r-combo [class~="psc-vc/combobox-menu"] { position:fixed!important; position-anchor:--vc-field; top:auto!important; left:auto!important; bottom:auto!important; right:auto!important; width:anchor-size(width)!important; position-area:bottom; margin:6px 0!important; position-try-fallbacks:flip-block; }
}

```