dawiddutoit/custom-claude/ha-conditional-cards

Works with Lovelace YAML dashboards and conditional/visibility card configurations.

Home Assistant Conditional Cards

Control card visibility dynamically based on states, users, screen size, and complex conditions.

Overview

Home Assistant provides two approaches for conditional visibility:

• Conditional Card (wrapper): Shows/hides entire card based on conditions
• Per-Card Visibility: Native visibility property on any card

Both support multiple condition types:

• state: Entity matches specific state
• numeric_state: Sensor value within range
• screen: Screen width/media queries
• user: Current user matches list
• time: Current time within range
• and/or: Complex logic combinations

When to Use This Skill

Use this skill when you need to:

• Show cards only when specific conditions are met (person home, motion detected, temperature threshold)
• Create responsive dashboards with mobile vs desktop layouts
• Build user-specific views with different access levels
• Display time-based cards (daytime vs nighttime controls)
• Combine multiple conditions with AND/OR logic for complex visibility rules

Do NOT use when:

• You need to modify card content based on state (use template cards instead)
• Building static dashboards where all cards are always visible
• Checking entity attributes directly (create template sensor first)

Quick Start

Conditional Card (Wrapper)

type: conditional
conditions:
  - condition: state
    entity: person.john
    state: home
card:
  type: entities
  entities:
    - light.bedroom

Per-Card Visibility (Native)

type: entities
entities:
  - light.bedroom
visibility:
  - condition: state
    entity: person.john
    state: home

Usage

1. Choose approach: Use Conditional Card wrapper for complex logic, per-card visibility for simple conditions
2. Select condition type: state, numeric_state, screen, user, time, and/or
3. Apply condition: Add conditions to conditional card or visibility to any card
4. Test in edit mode: Exit edit mode to test visibility (cards always show when editing)
5. Verify entity states: Check Developer Tools → States to debug conditions

See Condition Types Reference below for all available conditions and syntax.

Condition Types Reference

State Conditions

Basic State Match

type: conditional
conditions:
  - condition: state
    entity: binary_sensor.motion_living_room
    state: "on"
card:
  type: camera
  entity: camera.living_room

Multiple State Options

visibility:
  - condition: state
    entity: climate.living_room
    state_not:
      - "off"
      - unavailable

State with Attributes (Workaround)

Note: Native conditional cards don't support attribute conditions. Create a template sensor instead.

# In configuration.yaml
template:
  - sensor:
      - name: "AC Mode Cool"
        state: "{{ state_attr('climate.living_room', 'hvac_mode') == 'cool' }}"
 
# In dashboard
visibility:
  - condition: state
    entity: sensor.ac_mode_cool
    state: "True"

Numeric State Conditions

Temperature Range

type: entities
entities:
  - climate.bedroom
visibility:
  - condition: numeric_state
    entity: sensor.temperature
    above: 18
    below: 30

Above Threshold

visibility:
  - condition: numeric_state
    entity: sensor.battery
    below: 20  # Show when battery < 20%

Between Values

visibility:
  - condition: numeric_state
    entity: sensor.humidity
    above: 40
    below: 60  # Show when 40% < humidity < 60%

Screen/Responsive Conditions

Mobile Only

visibility:
  - condition: screen
    media_query: "(max-width: 600px)"

Desktop Only

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

Tablet Range

visibility:
  - condition: screen
    media_query: "(min-width: 601px) and (max-width: 1279px)"

Common Media Queries

# Mobile (portrait)
media_query: "(max-width: 600px)"
 
# Tablet (portrait)
media_query: "(min-width: 601px) and (max-width: 900px)"
 
# Desktop
media_query: "(min-width: 1280px)"
 
# Landscape orientation
media_query: "(orientation: landscape)"
 
# Portrait orientation
media_query: "(orientation: portrait)"

User Conditions

Single User

visibility:
  - condition: user
    users:
      - 1234567890abcdef  # User ID (not username)

Multiple Users (Admin Access)

type: entities
entities:
  - switch.advanced_settings
visibility:
  - condition: user
    users:
      - 1234567890abcdef  # Admin user 1
      - fedcba0987654321  # Admin user 2

Finding User IDs:

1. Go to Settings → People
2. Click on user
3. User ID is in the URL: /config/person/USER_ID_HERE

Time Conditions

During Daytime

visibility:
  - condition: time
    after: "06:00:00"
    before: "22:00:00"

Night Mode Cards

visibility:
  - condition: time
    after: "22:00:00"
    before: "06:00:00"

Business Hours

visibility:
  - condition: time
    after: "09:00:00"
    before: "17:00:00"
    weekday:
      - mon
      - tue
      - wed
      - thu
      - fri

Complex Logic (AND/OR)

AND Condition (All Must Be True)

visibility:
  - condition: and
    conditions:
      - condition: state
        entity: person.john
        state: home
      - condition: numeric_state
        entity: sensor.temperature
        below: 18
      - condition: time
        after: "06:00:00"
        before: "23:00:00"

OR Condition (At Least One Must Be True)

visibility:
  - condition: or
    conditions:
      - condition: state
        entity: person.john
        state: home
      - condition: state
        entity: person.jane
        state: home

Nested Logic

visibility:
  - condition: and
    conditions:
      # Show during daytime...
      - condition: time
        after: "06:00:00"
        before: "22:00:00"
      # ...AND (someone is home OR security is armed)
      - condition: or
        conditions:
          - condition: state
            entity: person.john
            state: home
          - condition: state
            entity: alarm_control_panel.home
            state: armed_away

Real-World Patterns

Show Camera When Motion Detected

type: conditional
conditions:
  - condition: state
    entity: binary_sensor.motion_living_room
    state: "on"
card:
  type: camera
  entity: camera.living_room

Mobile vs Desktop Layout

# Mobile: Compact view
type: custom:mushroom-chips-card
visibility:
  - condition: screen
    media_query: "(max-width: 600px)"
 
# Desktop: Detailed view
type: grid
columns: 3
visibility:
  - condition: screen
    media_query: "(min-width: 1280px)"

User-Specific Controls

type: entities
entities:
  - switch.developer_mode
visibility:
  - condition: user
    users:
      - 1234567890abcdef  # Admin user ID (Settings → People → URL)

For more patterns (low battery alerts, temperature warnings, occupied rooms, time-based controls), see references/advanced-patterns.md.

Best Practices

1. Combine approaches: Use conditional card for complex logic, per-card visibility for simple conditions
2. Test in edit mode: Exit edit mode to test visibility (cards always visible when editing)
3. Use helper entities: Create template sensors for attribute-based or complex conditions
4. Add buffer zones: Use hysteresis for numeric conditions to prevent flapping
5. Document user IDs: Keep reference of user IDs for maintenance
6. Screen conditions: Use media queries for responsive mobile/desktop layouts

Limitations

Cannot check attributes directly - Create template sensor to expose attribute as entity state.

No template conditions - Create template binary sensor instead.

Always visible in edit mode - Must exit edit mode to test visibility behavior.

For detailed workarounds, see references/advanced-patterns.md.

Troubleshooting

For detailed troubleshooting, see references/advanced-patterns.md.

Supporting Files

• references/advanced-patterns.md - Complex logic patterns, real-world use cases, workarounds, detailed troubleshooting, best practices, common media queries

Official Documentation

• Conditional card - Home Assistant
• Card Visibility - Home Assistant
• Template Sensors - Home Assistant