Multiple options dropdown menu

Hi there!
I need to write a multi-choice-menu, like this:

populated with a simple array from my Panel Controller, like this:

this.variables = [{“selected”: true, “value”: “1”}, {“selected”: true, “value”: “2”}, {“selected”: false, “value”: “3”}];

Can you suggest to me the right way to write down the html?
I tried to use the same templates-menu code in dashboard submenu (the image above) but it’s a bit complicated …

Thanks so much!


Are you trying to use such a dropdown menu in one of your own panel plugins?


Sorry for lateness.
Yes, I’m trying to do that in a panel plugin…

@novolabs are you sure you want a template variable dropdown? They are automatically generated from template variables and when you change the value, it triggers a refresh and changes the template variable value.

Or do you just want a multichoice dropdown? If so, then you will have to use a different component. The template variable dropdown is very customized.

There isn’t a good reusable multi-select in Grafana at the moment. We have started using react-select but that is not exposed to plugins currently.

The simplest is just a select with the multiple attribute:

<select multiple>
          <option value="val1">Text One</option>
          <option value="val2">Text Two</option>
          <option value="val3">Text 3</option>

Otherwise, you will have to find/make your own custom multi-select component.