Conditional card


The conditional card displays another card based on conditions.

Screenshot of the conditional card

To add the conditional card to your user interface:

  1. In the top right of the screen, select the pencil icon.
    • If this is your first time editing a dashboard, the Edit dashboard dialog appears.
      • By editing the dashboard, you are taking over control of this dashboard.
      • This means that it is no longer automatically updated when new dashboard elements become available.
      • To continue, in the dialog, select the three dots menu, then select Take control.
  2. Add a card to your dashboard.

Note that while editing the dashboard, the card will always be shown, so be sure to exit editing mode to test the conditions.

Most options for this card can be configured via the user interface.

YAML configuration

The following YAML options are available when you use YAML mode or just prefer to use YAML in the code editor in the UI.

Configuration Variables

type string Required

conditional

conditions list Required

List of conditions to check. See available conditions.

card map Required

Card to display if all conditions match.

Examples

Only show when all the conditions are met:

type: conditional
conditions:
  - condition: state
    entity: light.bed_light
    state: "on"
  - condition: state
    entity: light.bed_light
    state_not: "off"
  - condition: user
    users:
      - 581fca7fdc014b8b894519cc531f9a04
card:
  type: entities
  entities:
    - device_tracker.demo_paulus
    - cover.kitchen_window
    - group.kitchen
    - lock.kitchen_door
    - light.bed_light

Example condition where only one of the conditions needs to be met:

type: conditional
conditions:
  - condition: or
    conditions:
      - condition: state
        entity: binary_sensor.co_alert
        state: 'on'
      - condition: state
        entity: binary_sensor.rookmelder
        state: 'on'
card:
  type: entities
  entities:
    - binary_sensor.co_alert
    - binary_sensor.rookmelder

Card conditions

State

condition: "state"
entity: climate.thermostat
state: heat
condition: "state"
entity: climate.thermostat
state_not: "off"

Tests if an entity has a specified state.

Configuration Variables

condition string Required

state

entity string Required

Entity ID.

state list | string (Optional)

Entity state is equal to this value. Can contain an array of states.*

state_not list | string (Optional)

Entity state is unequal to this value. Can contain an array of states.*

*one is required (state or state_not)

Numeric state

Tests if an entity state matches the thresholds.

condition: "numeric_state"
entity: sensor.outside_temperature
above: 10
below: 20

Configuration Variables

condition string Required

numeric_state

entity string Required

Entity ID.

above string (Optional)

Entity state is above this value.*

below string (Optional)

Entity state is below to this value.*

*at least one is required (above or below)

Screen

Specify the visibility of the card per screen size. Some screen size presets are available in the UI but you can use any CSS media query you want in YAML.

condition: screen
media_query: "(min-width: 1280px)"

Configuration Variables

condition string Required

screen

media_query string Required

Media query to check which screen size are allowed to display the card.

User

Specify the visibility of the card per user.

condition: "user"
users:
  - 581fca7fdc014b8b894519cc531f9a04

Configuration Variables

condition string Required

user

users list Required

User ID that can see the card (unique hex value found on the Users configuration page).

Related topics