---

name: ha-conditional-cards description: | Implements conditional visibility for Home Assistant dashboard cards using state, numeric_state, screen, user, time, and/or conditions via Conditional Card wrapper and per-card visibility property. Use when asked to "hide card when", "show only if", "user-specific dashboard", "mobile vs desktop cards", "conditional visibility", or "show card based on state/time/user".

---

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

Condition	Parameters	Use Case
state	entity, state	Show when entity has specific state
numeric_state	entity, above, below	Show when sensor in range
screen	media_query	Show based on screen width
user	users (list of user IDs)	Show for specific users only
time	after, before	Show during specific time window
and	List of conditions	All conditions must be true
or	List of conditions	At least one condition must be true

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

Issue	Solution
Card not hiding	Exit edit mode, check entity state, verify YAML indentation
User condition fails	Use user ID (not username), find in Settings → People → URL
Time condition fails	Use 24-hour format "23:00:00", check HA timezone
Numeric condition fails	Verify sensor has numeric state (not "unknown")
Screen condition fails	Test on actual device (not browser resize)

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