# Ui-list of switches replacement

**URL:** <https://discourse.nodered.org/t/ui-list-of-switches-replacement/99961>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [16 December 2025 16:04 UTC](https://discourse.nodered.org/t/ui-list-of-switches-replacement/99961 "2025-12-16T16:04:52Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![novski](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/novski/32/23243_2.png) [@novski](https://discourse.nodered.org/u/novski)\
**Post date:** [16 December 2025 16:04 UTC](https://discourse.nodered.org/t/ui-list-of-switches-replacement/99961/1 "2025-12-16T16:04:52Z")

</div>

I have a ui-list with switches and need to replace that with dashboard v2.  
How can I replace that?

 ![Bildschirmfoto 2025-12-16 um 17.01.42](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/1/2196abf5a178ce3dd3fb33deb58be97b3ec93dc2.png)

I read this: [https://discourse.nodered.org/t/ui-list-for-dashboard-2](https://discourse.nodered.org/t/ui-list-for-dashboard-2)  
It seems like a dynamic list of switches doesn't yet exist?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [16 December 2025 23:30 UTC](https://discourse.nodered.org/t/ui-list-of-switches-replacement/99961/2 "2025-12-16T23:30:27Z")

</div>

I am not aware of anyone writing a ui-list contrib node. You can however quite easily create this using a ui-template.

If I get time later in the week I'll show you how - feel free to nudge me if I've not replied by Friday afternoon.

If anyone else in the meantime wants to provide a solution, please jump in.

---

<div class="post-metadata">

**Author:** ![novski](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/novski/32/23243_2.png) [@novski](https://discourse.nodered.org/u/novski)\
**Post date:** [17 December 2025 09:54 UTC](https://discourse.nodered.org/t/ui-list-of-switches-replacement/99961/3 "2025-12-17T09:54:41Z")

</div>

Thanks. I created a template node that takes two additional fields to annotate the switch label and description.

```auto
<template>
  <v-list class="switch-list" density="compact">
    <v-list-item v-for="item in items" :key="item.id" density="compact" class="switch-item">
      <v-list-item-title class="label">
        {{ item.label }}
      </v-list-item-title>

      <v-list-item-subtitle class="description">
        {{ item.description }}
      </v-list-item-subtitle>

      <template #append>
        <v-switch v-model="item.value" density="compact" hide-details :color="item.value ? 'primary' : undefined"
          @update:modelValue="onToggle(item)" />
      </template>
    </v-list-item>
  </v-list>
</template>

<script>
export default {
  props: ["msg"],

  data() {
    return {
      items: []
    }
  },

  watch: {
    msg: {
      immediate: true,
      handler(newMsg) {
        if (Array.isArray(newMsg?.payload)) {
          // Deep copy, damit Vue reaktiv bleibt
          this.items = JSON.parse(JSON.stringify(newMsg.payload))
        }
      }
    }
  },

  methods: {
    onToggle(item) {
      this.$socket.emit("msg", {
        payload: {
          id: item.id,
          value: item.value
        },
        label: item.label,
        description: item.description
      })
    }
  }
}
</script>

<style scoped>
  .switch-list {
    padding: 0;
  }

  .switch-item {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .label {
    font-weight: 600;
  }

  .description {
    opacity: 0.7;
  }
</style>

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [31 December 2025 09:54 UTC](https://discourse.nodered.org/t/ui-list-of-switches-replacement/99961/4 "2025-12-31T09:54:51Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.