Definitely...
Kudos CSS master 
This is really a very good starting point.
Really appreciated!!!
I have done a small change to work with values instead of indexes:
- Each option has now a value:
options:[ {label:"On", value: "on", icon:"mdi-power-cycle", color:"green"}, {label:"Off", value: "off", icon:"mdi-power-off", color:"red"}, {label:"Auto", value: "auto", color:"blue"}, {label:"Manual", value: "manual"} ], - The input message payload now needs to contain a value (to be selected), instead of an index.
- The output message payload now contains a (selected) value, instead of an index.
A short demo, which also shows your nice color updates:
[{"id":"dd0cb728ad173407","type":"ui-template","z":"0bff6d05f60fe1e6","group":"9fa39c19a26ce99e","page":"","ui":"","name":"","order":0,"width":0,"height":0,"head":"","format":"<template>\n <div class=\"mss-wrapper\">\n <v-chip variant=\"text\">\n {{label}}\n </v-chip>\n <v-btn-toggle mandatory divided rounded=\"xl\" :variant=\"variant\" :color=\"selectedColor\" v-model=\"selectedValue\">\n <v-btn v-for=\"option in options\" :value=\"option.value\">\n <template v-if=\"option.icon\" v-slot:prepend>\n <v-icon> {{option.icon}} </v-icon>\n </template>\n {{option.label}}\n </v-btn> \n </v-btn-toggle>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n //define me here\n label:\"Multistate Prototype\", \n options:[\n {label:\"On\", value: \"on\", icon:\"mdi-power-cycle\", color:\"green\"}, \n {label:\"Off\", value: \"off\", icon:\"mdi-power-off\", color:\"red\"},\n {label:\"Auto\", value: \"auto\", color:\"blue\"},// you can omit the icon\n {label:\"Manual\", value: \"manual\"}// can omit color - defaults to theme color\n ],\n // \"outlined\" (if the site bg is white or very light)\"\n // \"default\" (if the site bg is dark)\"\n // (\"text\" or \"plain\" also available but requires some styling)\n look:\"outlined\", \n \n // no need to change those\n selection: null,\n selectedValue: 'on', // Default selected value\n changeByInput:false, // in case of input - render but don't send the msg out\n \n }\n },\n \n watch: {\n msg: function(){ \n if(this.msg.payload != undefined){\n if(typeof this.msg.payload === \"string\"){\n // validation should be more strict based on defined options\n let option = this.options.find(option => option.value === this.msg.payload)\n if (option) {\n this.changeByInput = true\n this.selectedValue = option.value\n }\n }\n \n }\n },\n selectedValue:function(){ \n if(this.changeByInput == true){\n this.changeByInput = false\n }\n else{\n let selectedOption = this.options.find(option => option.value === this.selectedValue)\n if (selectedOption) {\n this.send({payload:selectedOption.value,topic:'multistate'})\n }\n }\n }\n },\n \n computed: { \n selectedColor:function(){\n if(this.selectedValue == null){\n return \"\"\n }\n return this.options.find(option => option.value === this.selectedValue).color ?? \"rgb(var(--v-theme-primary))\"\n },\n variant:function(){\n return this.look == \"default\" ? null : this.look\n }\n },\n \n \n }\n</script>\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":1200,"y":80,"wires":[["4a14410bba1d4a82"]]},{"id":"4a14410bba1d4a82","type":"debug","z":"0bff6d05f60fe1e6","name":"Selected option","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":1380,"y":80,"wires":[]},{"id":"2693f680c134392c","type":"inject","z":"0bff6d05f60fe1e6","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"on","payloadType":"str","x":1030,"y":80,"wires":[["dd0cb728ad173407"]]},{"id":"e215342d9239358f","type":"inject","z":"0bff6d05f60fe1e6","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"off","payloadType":"str","x":1030,"y":120,"wires":[["dd0cb728ad173407"]]},{"id":"b0cc83d57f02f08b","type":"inject","z":"0bff6d05f60fe1e6","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"auto","payloadType":"str","x":1030,"y":160,"wires":[["dd0cb728ad173407"]]},{"id":"cbe9ae5a47a6d80d","type":"inject","z":"0bff6d05f60fe1e6","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"manual","payloadType":"str","x":1030,"y":200,"wires":[["dd0cb728ad173407"]]},{"id":"9fa39c19a26ce99e","type":"ui-group","name":"Alarm systeem","page":"8604ea49340f9d41","width":"6","height":"1","order":-1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"8604ea49340f9d41","type":"ui-page","name":"Home","ui":"be29745a6e568f30","path":"/page1","icon":"home","layout":"grid","theme":"092547d34959327c","order":-1,"className":"","visible":"true","disabled":"false"},{"id":"be29745a6e568f30","type":"ui-base","name":"UI Name","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false},{"id":"092547d34959327c","type":"ui-theme","name":"Theme Name","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"}}]
