Creating Toggle Buttons in the Home Assistant UI

Introduction

The concept is simple. Create a group of buttons of which only one can be active at any time.

This is done through an illusion of sorts. The buttons you see in the image above are all custom buttons created in the HA user interface using the Custom Button Card. Each one has a tap action to change the value of a drop-down list (also shown). In Home Assistant, drop-down lists are based upon input_select entities which you can create either with manual YAML code, or by using the Helper feature (Settings >> Devices & Services >> Helpers).

These buttons behave much like a standard radio button selection in an online form, or for the GenX'ers out there, the buttons on the radio in your first car. Only one button can be selected at any given time.

Classic Car Radio Buttons

When you tap one of the buttons, a tap_action sets the value of the input_select, and the custom button feature sets the color of the button based upon the state of the input_select. Likewise, when you use the input select form, or if the input_select is changed through an automation, the corresponding button will light up or present, according to your configuration for that button.

The extent to which you want to display changes in each button are completely up to your own creativity. The example I gave here is a simple 4 selection example without any fancy stylings or icon changes, etc.

Prerequisites

HACS Integrations

You'll need to ensure you have Button Card installed.

Helpers

You'll need to create an Input Select as this is the basis of the entire Toggle Button setup.

Basic Steps

1. Create an input_select helper with multiple options. One option for each button, preferably.
2. In the HA user interface, create a new custom button card for each selection in the input_select you created. It doesn't matter where they are located in the interface. I just happen to have them side-by-side.
3. For testing purposes,

Button Code

It's up to you how you want to layout your tab. For this example, I used a horizontal stack.

type: horizontal-stack
cards:
  - type: custom:button-card
    entity: input_select.season
    name: Winter
    color_type: card
    color: rgba(0,0,0,0%)
    tap_action:                  
      action: call-service
      service: input_select.select_option
      target:
        entity_id:
          - input_select.season
      data:
        option: Winter
    state:
      - value: Winter
        color: green
  - type: custom:button-card
    entity: input_select.season
    name: Summer
    color_type: card
    color: rgba(0,0,0,0%)
    tap_action:
      action: call-service
      service: input_select.select_option
      target:
        entity_id:
          - input_select.season
      data:
        option: Summer
    state:
      - value: Summer
        color: green
  - type: custom:button-card
    entity: input_select.season
    name: Fall
    color_type: card
    color: rgba(0,0,0,0%)
    tap_action:
      action: call-service
      service: input_select.select_option
      target:
        entity_id:
          - input_select.season
      data:
        option: Fall
    state:
      - value: Fall
        color: green
  - type: custom:button-card
    entity: input_select.season
    name: Spring
    color_type: card
    color: rgba(0,0,0,0%)
    tap_action:
      action: call-service
      service: input_select.select_option
      target:
        entity_id:
          - input_select.season
      data:
        option: Spring
    state:
      - value: Spring
        color: green