[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?

[Daniel75]

Hello
I noticed today that when I add a button at the top, custom dropdowns no longer work at the top or bottom.

I hope the translator did a good job.

[mattjago]

This card is almost exactly what I've been looking for. Currently I have a sub-button that toggles on/off all the lights in a room, and the sub-button icon and container change colour depending on the light state. I'm trying to make this button a dropdown of all the lights in a room for me to tap to toggle on/off individually. Just one problem that I can't figure out, is that once I use this model the custom background of the sub button is lost (effectively transparent and so I just see the icon). the icon is still visible and changes colour just fine
LivingRoomCard.yaml

[mattjago]

Just tried this with rc.3 and it is indeed fixed. However the dropdown now appears behind other elements on the dashboard

[Clooos]

I haven't this issue on my side, have you added some custom styles to this card?

[mattjago]

Yes, I've added custom styles and I am using the Custom Dropdown (Labels, icons, colors, actions...) module. However, I have recreated the card(s) with no custom styles or modules and this still happens. Here's the (un-customised) yaml
CardExample.yaml

[Clooos]

What theme do you use? The HA default one?

[mattjago]

Ah! I handed considered the theme. I'm using the rounded bubble theme from https://jlnbln.gumroad.com/l/xxfno and that does seem to be the culprit, it works fine with the default theme (albeit I lose the overall look that I was going for, but at least I know what the problem is now). Thanks for the fix to the dropdown!

[Airblader]

Great module! A couple wish list items, or maybe a TODO list for my own modifications:

1. Fall back to the original label if no override is specified.
2. Change the icon of the dropdown box to the currently selected item's icon. (Edit: This is actually how it works, lol)
3. Move away from the static "1, 2, 3, 4" configuration to arbitrary number of sub-buttons (don't think this is possible without a breaking change due to current limitations).
4. (Not sure there's a good way to even do this) Support templates for the label / icon -- my use case here is a room selector where I really just want to grab icon and label from the corresponding areas, but unfortunately areas are not exposed as entities, otherwise I would phrase this as "select entity to get icon / label from".

[Airblader]

It also seems that this module currently doesn't work with dropdowns inside sub-button groups.

Edit: Actually, it kind of does, but it's a bit confusing.

[Airblader]

I have implemented support for arbitrary number of configurations, groups, and a bit of a better UX in such cases locally. I can't / won't publish here as this module is Patreon-only, but leaving this here for visibility.

As per usual, I couldn't do it without finding a bug, though, that I'll raise separately (Edit: #2081).