Select list Card

Display the options of an input_select entity as a clickable list card.
In other words: the content of the dropdown menu is displayed as a card.
The input_select.select_option service is called after the user clicks (selects) an option.

Some use cases:

• Select with too many options to show in dropdown
• Options with long titles
• Have all options directly shown
• You dont't want the extra click to open the dropdown menu

Using the card

Visual Editor

Select List Card supports Lovelace's Visual Editor. Click the + button to add a card and search for select list.

Options

Manual yaml mode

type: 'custom:select-list-card'
entity: input_select.tracks
title: Tracks
icon: 'mdi:playlist-music'
max_options: 6
scroll_to_selected: true
show_toggle: true
truncate: true

Installation

HACS

This card is available in HACS (Home Assistant Community Store).

Just search for Select list Card in Frontend tab.

Manual

1. Download select-list-card.js file from the latest-release.
2. Put select-list-card.js file into your config/www folder.
3. Add reference to select-list-card.js in Lovelace. There's two way to do that:
   1. Using UI: Configuration → Lovelace Dashboards → Resources → Click Plus button → Set Url as /local/select-list-card.js → Set Resource type as JavaScript Module.
   2. Using YAML: Add following code to lovelace section.

      resources:
        - url: /local/select-list-card.js
          type: module

4. Add custom:select-list-card to Lovelace UI as any other card (using either editor or YAML configuration).

Supported languages

This card supports translations. Please, help to add more translations and improve existing ones. Here's a list of supported languages:

• English
• Nederlands (Dutch)
• Your language?

Support

Hey dude! Help me out for a couple of 🍻 or a ☕!