[JS+Editor Module] Custom dropdown (Labels, icons, colors, actions...)

[Clooos]

Custom dropdown (Labels, icons, colors, actions...)

Version: v1.1
Creator: Clooos

Important

Supported cards:

• Button
• Calendar
• Climate
• Cover
• Media Player
• Pop Up
• Select
• Separator

This module lets you customize the labels, icons, and icon colors of dropdown items, and also allows you to define actions or add navigation to pop-ups or dashboard pages. It works for both the main select card and sub-buttons in supported cards.

Example use cases

Quick controls: Create a dropdown where each option opens a different pop-up: one for lights, one for media, one for climate...

Vacuum room selector: Set up a dropdown for your robot vacuum, where each item represents a room like “Kitchen”, “Living Room”, or “Bedroom”. Selecting an option sends a service call to clean only the selected area.

Color picker: Build a dropdown for a light entity, with each item showing a colored icon and label like “Warm White”, “Cool White”, or “Red”. Selecting an option sends a command to instantly change the light color.

YAML example: Color picker from the screenshot

# "light.your_light" must be replaced with your light entity.
custom_select:
  sub_button_1:
    - position: 1
      name: Select a color
      icon: mdi:palette-outline
    - position: 2
      name: Warm White
      icon: mdi:circle
      color: "#FFD9B3"
      action:
        - action: light.turn_on
          target:
            entity_id: light.your_light
          data:
            rgb_color:
              - 255
              - 223
              - 191
            brightness: 255
        - delay:
            seconds: 1
        - action: input_select.select_option
          data:
            option: "1"
          target:
            entity_id: input_select.6_items
    - position: 3
      name: Cool White
      icon: mdi:circle
      color: "#CCE6FF"
      action:
        - action: light.turn_on
          target:
            entity_id: light.your_light
          data:
            rgb_color:
              - 204
              - 230
              - 255
            brightness: 255
        - delay:
            seconds: 1
        - action: input_select.select_option
          data:
            option: "1"
          target:
            entity_id: input_select.6_items
    - position: 4
      name: Red
      icon: mdi:circle
      color: "#F44336"
      action:
        - action: light.turn_on
          target:
            entity_id: light.your_light
          data:
            rgb_color:
              - 244
              - 67
              - 54
            brightness: 255
        - delay:
            seconds: 1
        - action: input_select.select_option
          data:
            option: "1"
          target:
            entity_id: input_select.6_items
    - position: 5
      name: Green
      icon: mdi:circle
      color: "#4CAF50"
      action:
        - action: light.turn_on
          target:
            entity_id: light.your_light
          data:
            rgb_color:
              - 76
              - 175
              - 80
            brightness: 255
        - delay:
            seconds: 1
        - action: input_select.select_option
          data:
            option: "1"
          target:
            entity_id: input_select.6_items
    - position: 6
      name: Blue
      icon: mdi:circle
      color: "#2196F3"
      action:
        - action: light.turn_on
          target:
            entity_id: light.your_light
          data:
            rgb_color:
              - 33
              - 150
              - 243
            brightness: 255
        - delay:
            seconds: 1
        - action: input_select.select_option
          data:
            option: "1"
          target:
            entity_id: input_select.6_items
    - position: 7
      name: Purple
      icon: mdi:circle
      color: "#9C27B0"
      action:
        - action: light.turn_on
          target:
            entity_id: light.your_light
          data:
            rgb_color:
              - 156
              - 39
              - 176
            brightness: 255
        - delay:
            seconds: 1
        - action: input_select.select_option
          data:
            option: "1"
          target:
            entity_id: input_select.6_items
    - position: 8
      name: Orange
      icon: mdi:circle
      color: "#FF9800"
      action:
        - action: light.turn_on
          target:
            entity_id: light.your_light
          data:
            rgb_color:
              - 255
              - 152
              - 0
            brightness: 255
        - delay:
            seconds: 1
        - action: input_select.select_option
          data:
            option: "1"
          target:
            entity_id: input_select.6_items
    - position: 9
      name: Cyan
      icon: mdi:circle
      color: "#00BCD4"
      action:
        - action: light.turn_on
          target:
            entity_id: light.your_light
          data:
            rgb_color:
              - 0
              - 188
              - 212
            brightness: 255
        - delay:
            seconds: 1
        - action: input_select.select_option
          data:
            option: "1"
          target:
            entity_id: input_select.6_items

This module is also really easy to set up using its built-in editor, so you can get started in just a few minutes 😄 I recommend starting with a basic input_select template entity (with labels like 1, 2, 3...), then you can customize everything directly from the module.

---

🧩 Get this Module

If you're already supporting my project, this module is now available on my Patreon page! If not, you can join to support my work, this helps me keep improving this huge project and creating new features.

Thank you so much ❤️

---

Screenshot:

[andarotajo]

That looks pretty cool. Is a module like this possible with the current options? I don't remember seeing possibilities that fancy when I read the docs and would love to upgrade my modules to have better UI

[Clooos]

The object selector is wrongly documented (or not documented at all? I don't remember 😅), but I finally found how it works 😄

The HA selectors are not documented anywhere, so I had to dig deeply in the HA source code to make that documentation, and it is definitely not complete.

I will update the schemas documentation to add this one as soon as possible 🙂

[andarotajo]

The HA selectors are not documented anywhere, so I had to dig deeply in the HA source code to make that documentation, and it is definitely not complete.

I did find this documentation: https://www.home-assistant.io/docs/blueprint/selectors
It seems pretty good and I managed to get an object selector up and running. Did some experimenting and wanted to put another object selector inside the first one but that doesn't work apparently 😄 I wonder if it's possible to get expandable sections inside the object selector dialog, didn't find any way yet

[Clooos]

Oh good find! I will check it!

I tried as well, and as far as I know, nested object selectors are not supported (unfortunately), nor are expandable sections.

Edit: I can't believe I missed this documentation, I wonder if this is new? 😅

[ddkedr]

I'm already loving it!!! That's exactly what a was thinking about since you've introduced select dropdowns! 😍

Thank you man!

[Clooos]

You're welcome! Enjoy! 😄

[skarchmit]

How do you install this? It looks great, but it only says manual install.

[Clooos]

Hi! This module is available on my Patreon page, this is explained when you click on "Get this Module" above in this post, the link is there as well 🙂 Then when you have the YAML, just copy it, go to the module's editor, click on the "Import from YAML" button, then paste it there.

[Clooos]

Updated to v1.1:

• Added the possibility to reuse the same input_select entity twice (or the same labels in two different input_select).
• Better example with easier modification

[junkemails1234]

Is it possible to make it drop up?

[Clooos]

Sadly not currently, but I will probably work on this possibility at some point 🙂

[skn3]

The import does not work. Nothing happens. I had to manually add a module and split up each part within the UI inputs. This works, but then the module itself doesn't function. Any advice?

[skn3]

So I debugged. I needed to make sure I matched the module name to "custom_select". So I guess there is just some formatting error in your patreon download?