^^ What he says 
You can make it even easier, if you configure an input_select to be the source of your state switches. Take eg. a navigation. Your entries would be āhomeā, āaboutā, ācontactā.
Now setup an automation that has a state trigger, that reacts on changing the input_select. When you are on āhomeā and you change the input_select, the automation triggers and resets the state back to āhomeā after X seconds.
This is not enough information to go on. 
What do you have configured in your dashboard? Please post the YAML code of the dashboard (or at least the state-switch-card part) as well as what you have in your automation.
here we go
Yaml dashboard (state switch part)
- type: grid
cards:
- type: vertical-stack
cards:
- show_name: true
show_icon: true
type: custom:button-card
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id: input_select.frontend_grid_content
data:
option: home
name: Home
icon: mdi:home
show_state: true
card_mod:
style: |
ha-card
{
border: solid 0px var(--primary-color);
border-radius: 25px;
}
- type: custom:gap-card
height: 5
- show_name: true
show_icon: true
type: custom:button-card
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id: input_select.frontend_grid_content
data:
option: lichten
name: Lichten
icon: mdi:lightbulb-multiple
show_state: true
card_mod:
style: |
ha-card
{
border: solid 0px var(--primary-color);
border-radius: 25px;
}
- type: custom:gap-card
height: 5
- show_name: true
show_icon: true
type: custom:button-card
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id: input_select.frontend_grid_content
data:
option: rolluiken
name: Rolluiken
icon: mdi:window-shutter
show_state: true
card_mod:
style: |
ha-card
{
border: solid 0px var(--primary-color);
border-radius: 25px;
}
- type: custom:gap-card
height: 5
- show_name: true
show_icon: true
type: custom:button-card
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id: input_select.frontend_grid_content
data:
option: powerplug
name: Powerplug
icon: mdi:power
show_state: true
card_mod:
style: |
ha-card
{
border: solid 0px var(--primary-color);
border-radius: 25px;
}
- type: custom:gap-card
height: 5
- show_name: true
show_icon: true
type: custom:button-card
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id: input_select.frontend_grid_content
data:
option: weer
name: Weer
icon: mdi:power
show_state: true
card_mod:
style: |
ha-card
{
border: solid 0px var(--primary-color);
border-radius: 25px;
}
- type: custom:gap-card
height: 5
- show_name: true
show_icon: true
type: custom:button-card
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id: input_select.frontend_grid_content
data:
option: reserve
name: Reserve
icon: mdi:power
show_state: true
card_mod:
style: |
ha-card
{
border: solid 0px var(--primary-color);
border-radius: 25px;
}
- type: custom:gap-card
height: 5
- show_name: true
show_icon: true
type: custom:button-card
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id: input_select.frontend_grid_content
data:
option: reserve1
name: Reserve
icon: mdi:power
show_state: true
card_mod:
style: |
ha-card
{
border: solid 0px var(--primary-color);
border-radius: 25px;
}
columns: 1
view_layout:
grid-area: menu
- type: custom:state-switch
view_layout:
grid-area: content
entity: input_select.frontend_grid_content
default: home
transition: flip-x
transition_time: 600
states:
home:
square: true
type: grid
cards:
- type: vertical-stack
cards:
- type: media-control
entity: media_player.nest_mini
- type: custom:gap-card
height: 5
- type: thermostat
entity: climate.airco_living
- type: horizontal-stack
cards:
- type: custom:button-card
show_name: true
show_icon: true
name: Power Tv
icon: mdi:television
styles:
card:
- height: 100px
- width: 200px
tap_action:
action: toggle
entity: switch.schakelaar_tvkast
- type: custom:button-card
show_name: true
show_icon: true
icon: mdi:power
styles:
card:
- height: 100px
- width: 200px
tap_action:
action: toggle
entity: switch.schakelaar_living_l4
- type: horizontal-stack
cards:
- type: custom:button-card
show_name: true
show_icon: true
icon: mdi:power
styles:
card:
- height: 100px
- width: 200px
tap_action:
action: toggle
entity: switch.schakelaar_living_l4
- type: custom:button-card
show_name: true
show_icon: true
icon: mdi:power
styles:
card:
- height: 100px
- width: 200px
tap_action:
action: toggle
entity: switch.schakelaar_living_l4
- type: custom:gap-card
height: 10
- type: horizontal-stack
cards:
- type: custom:button-card
show_name: true
show_icon: true
icon: mdi:power
styles:
card:
- height: 100px
- width: 200px
tap_action:
action: toggle
entity: switch.schakelaar_living_l4
- type: custom:button-card
show_name: true
show_icon: true
icon: mdi:power
styles:
card:
- height: 100px
- width: 200px
tap_action:
action: toggle
entity: switch.schakelaar_living_l3
- type: vertical-stack
cards:
- type: custom:weather-card
entity: weather.forecast_thuis
number_of_forecasts: '5'
- type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.home_alarm
states:
- armed_home
- armed_away
name: thuis
show_keypad: true
primary_info: name
secondary_info: state
columns: 2
lichten:
square: false
type: grid
cards:
- type: custom:mushroom-title-card
title: Lichten Living
alignment: center
title_tap_action:
action: none
subtitle_tap_action:
action: none
- type: horizontal-stack
cards:
- type: custom:button-card
show_name: true
show_icon: true
icon: mdi:power
styles:
card:
- height: 100px
- width: 200px
tap_action:
action: toggle
entity: switch.schakelaar_living_l1
- type: custom:button-card
show_name: true
show_icon: true
icon: mdi:power
styles:
card:
- height: 100px
- width: 200px
tap_action:
action: toggle
entity: switch.schakelaar_living_l2
- type: custom:button-card
show_name: true
show_icon: true
icon: mdi:power
styles:
card:
- height: 100px
- width: 200px
tap_action:
action: toggle
entity: switch.schakelaar_living_l3
- type: custom:button-card
show_name: true
show_icon: true
icon: mdi:power
styles:
card:
- height: 100px
- width: 200px
tap_action:
action: toggle
entity: switch.schakelaar_living_l4
- type: custom:mushroom-title-card
title: Lichten Eetplaats
alignment: center
title_tap_action:
action: none
subtitle_tap_action:
action: none
- type: horizontal-stack
cards:
- type: custom:button-card
show_name: true
show_icon: true
icon: mdi:power
styles:
card:
- height: 100px
- width: 200px
tap_action:
action: toggle
entity: switch.schakelaar_eetplaats_l1
- type: custom:button-card
show_name: true
show_icon: true
icon: mdi:power
styles:
card:
- height: 100px
- width: 200px
tap_action:
action: toggle
entity: switch.schakelaar_eetplaats_l2
- type: custom:button-card
show_name: true
show_icon: true
icon: mdi:power
styles:
card:
- height: 100px
- width: 200px
tap_action:
action: toggle
entity: switch.schakelaar_eetplaats_l3
- type: custom:button-card
show_name: true
show_icon: true
icon: mdi:power
styles:
card:
- height: 100px
- width: 200px
tap_action:
action: toggle
entity: switch.schakelaar_eetplaats_l4
- type: custom:mushroom-title-card
title: Lichten Keuken
alignment: center
title_tap_action:
action: none
subtitle_tap_action:
action: none
- type: horizontal-stack
cards:
- type: custom:button-card
show_name: true
show_icon: true
icon: mdi:power
styles:
card:
- height: 100px
- width: 200px
tap_action:
action: toggle
entity: switch.schakelaar_keukentafel_right
- type: custom:button-card
show_name: true
show_icon: true
icon: mdi:power
styles:
card:
- height: 100px
- width: 200px
tap_action:
action: toggle
entity: switch.schakelaar_keukentafel_left
- type: custom:button-card
show_name: true
show_icon: true
icon: mdi:power
styles:
card:
- height: 100px
- width: 200px
tap_action:
action: toggle
entity: switch.schakelaar_kookplaats_left
- type: custom:button-card
show_name: true
show_icon: true
icon: mdi:power
styles:
card:
- height: 100px
- width: 200px
tap_action:
action: toggle
entity: switch.schakelaar_kookplaats_right
columns: 1
view_layout:
grid-area: content
rolluiken:
square: false
type: grid
cards:
- type: custom:shutter-card
entities:
- entity: cover.rolluik_vooraan
name: Vooraan
buttons_position: left
title_position: bottom
- type: custom:shutter-card
entities:
- entity: cover.rolluik_zijraam
name: Zijkant
buttons_position: left
title_position: bottom
- type: custom:shutter-card
entities:
- entity: cover.rolluik_achteraan
name: Achterkant
buttons_position: left
title_position: bottom
- type: custom:shutter-card
entities:
- entity: cover.rolluik_slaapkamer
name: Slaapkamer
buttons_position: left
title_position: bottom
- type: custom:shutter-card
entities:
- entity: cover.rolluik_dressing
name: Dressing
buttons_position: left
title_position: bottom
columns: 0
view_layout:
grid-area: content
powerplug:
square: false
type: grid
cards:
- type: custom:shutter-card
entities:
- entity: cover.rolluik_vooraan
name: Vooraan
buttons_position: left
title_position: bottom
- type: custom:shutter-card
entities:
- entity: cover.rolluik_zijraam
name: Zijkant
buttons_position: left
title_position: bottom
- type: custom:shutter-card
entities:
- entity: cover.rolluik_achteraan
name: Achterkant
buttons_position: left
title_position: bottom
- type: custom:shutter-card
entities:
- entity: cover.rolluik_slaapkamer
name: Slaapkamer
buttons_position: left
title_position: bottom
- type: custom:shutter-card
entities:
- entity: cover.rolluik_dressing
name: Dressing
buttons_position: left
title_position: bottom
view_layout:
grid-area: content
weer:
square: false
type: grid
cards:
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- camera_view: auto
type: picture-glance
title: Thuis
entities: []
camera_image: camera.buienradar
aspect_ratio: '1'
- type: vertical-stack
cards:
- type: custom:weather-card
entity: weather.forecast_thuis
number_of_forecasts: '5'
- type: custom:weather-radar-card
frame_count: 20
data_source: RainViewer-DarkSky
center_latitude: 50.8447689
center_longitude: 3.1989718
marker_latitude: 50.8447689
marker_longitude: 3.1989718
show_marker: true
show_range: true
static_map: true
frame_delay: 500
zoom_level: 9
- type: custom:weather-radar-card
frame_count: 10
center_latitude: 50.8447689
center_longitude: 3.1989718
marker_latitude: 50.8447689
marker_longitude: 3.1989718
show_marker: true
show_range: true
static_map: true
zoom_level: 7
columns: 2
view_layout:
grid-area: content
And this i have into my configuration yaml.
input_select:
frontend_grid_content:
name: Frontend Grid Content
options:
- home
- lichten
- rolluiken
- powerplug
- weer
initial: home
And this is the yaml i have now in my automation
i did this in de GUI just copied the yaml
description: ""
mode: single
trigger:
- platform: state
entity_id:
- input_select.frontend_grid_content
id: state switch
from: home
to: null
condition: []
action:
- choose:
- conditions:
- condition: trigger
id:
- state switch
sequence:
- delay:
hours: 0
minutes: 0
seconds: 30
milliseconds: 0
This is the very basic version of that automation, you can always expand on that.
description: ""
mode: single
trigger:
- platform: state
entity_id: input_select.frontend_grid_content
to: weer
action:
- delay: '00:00:10'
- service: input_select.select_option
target:
entity_id: input_select.frontend_grid_content
data:
option: "{{ trigger.from_state.state }}"
Eg. you could always switch back to āhomeā or you make the delay configurable via an input_number.
Let me know, if it works for you.
thx itās worked like i want to
I need to learn allot of this code.
What do i need to search on google to find more examples to learn this code?
Just yaml code or is this another syntax
Any way this worked for me now
alias: test return
description: ""
trigger:
- platform: state
entity_id:
- input_select.frontend_grid_content
from: null
to: null
action:
- delay: "00:00:10"
- service: input_select.select_option
target:
entity_id: input_select.frontend_grid_content
data:
option: home
mode: single
Thx again
Great it works as you want it!
Searching for code examples via Google is mostly not very straightforward, Iād use this very forum, the forum search is quite good. As topics tend to get long very quickly, the search can be restricted inside one topic, that works nice as well.
Honestly, HA has a steep learning curve, and the best way I know, is to read in this forum.
For the technical terms, you need the HA documentation and Jinja as the template language. You can find links to both docus on your ādeveloper toolsā page in your HA installation. Which btw. is as well a great resource, that youāll need very often.
And last but not least, this forum is an open place, just ask! 
Hello, is it possible to hide one specific chip inside chips card based on current user? I only managed to hide the whole card.
Is it possible to have the card match on multiple users??
So if I have a card that I want to show to 2 users, but hide from the other 3, can I do that without having to repeat the card twice??
Iām sorry but your instructions and installation procedures are unnecessarily complicated for the average user. Please sort it out as this is what gives Home Assistant a baD REP
Making creative/smart use of this Switch State card by utaliing āspaceā of other cards.
All props to the creator of this card.
My goal is to have a single-page dashboard. I have been playing around alot with different setups and came across this card.
In my example : Spotify/Sonos does have a prominent space in the dashboard.
Not without reason, because we listen alot to music.
With the switch card I can now temporaly āborrowā the space for our thermostate controls and for audio settings of Sonos.
With some automations it will switch back after X seconds/minutes to the media player.
Curious problem using state-switchā¦ (Thanks for an excellent card otherwise! 
) When using the visual editor the content of the state-switch is displayed on-top of the editor, blocking part of the view. Isolated the problem to implicate state-switch using this simple example in its own dashboard. (The Apexchart on its own works as it should.) Fully updated installation. Grateful for any suggestions?
having an issue when using this state-switch config:
when on mobile phone, the āallā is chosen, and then my view is somehow overflowing the displayās width, and unstable horizontally.
Ive had that issue before on other card, and it turned out a tooltip option was indeed set too wide, or a margin mod.
however, in the decluttering templates used in this config, not a single mod is set, so all should default to HA dashboard settings.
Moreover, if I only uses the āallā section, and take out the state-switch completely, the issue does not arise.
Making this somehow related to the state-switch card perse.
Would anyone know if there are margins used inside the resource we can card_mod down again?
title: Cameras buiten
path: cameras_buiten
type: panel
icon: cli:home-video
cards:
- type: custom:state-switch
entity: mediaquery
states:
'(min-width: 1000px)':
type: vertical-stack
cards:
- type: grid
columns: 2
square: false
cards: &camera_cards
- type: custom:decluttering-card
template: camera_available
variables:
- entity: oprit
- name: Oprit
- type: custom:decluttering-card
template: camera_privacy
variables:
- entity: poort
- name: Poort
- type: custom:decluttering-card
template: camera_available
variables:
- entity: voordeur
- name: Voordeur
- type: custom:decluttering-card
template: camera_available
variables:
- entity: terras
- name: Terras
all:
type: vertical-stack
cards: *camera_cards
full disclosure, the decluttering templates look like this:
card:
type: conditional
conditions:
- entity: camera.[[entity]]
state_not: unavailable
card:
entity: camera.[[entity]]
# name: '[[name]]'
type: picture-entity
show_state: false
show_name: false
camera_view: live
Ive also tried to write the āallā section verbosely to rule out the decluttering-card, and that has no effect. Leaving the state-switch to cause some margin issues somewhereā¦
fixed it using the new media_query options of core conditional:
title: Cameras buiten
path: cameras_buiten
type: panel
icon: cli:home-video
cards:
- type: vertical-stack
cards:
- type: conditional
conditions:
- condition: screen
media_query: '(min-width: 1200px)'
card:
type: grid
columns: 2
square: false
cards: &outside_cameras
- type: custom:decluttering-card
template: camera_available
variables:
- entity: oprit
- type: custom:decluttering-card
template: camera_privacy
variables:
- entity: poort
- type: custom:decluttering-card
template: camera_available
variables:
- entity: voordeur
- type: custom:decluttering-card
template: camera_available
variables:
- entity: terras
- type: conditional
conditions:
- condition: screen
media_query: '(max-width: 1200px)'
card:
type: vertical-stack
cards: *outside_cameras
feels but clunky to have to repeat the conditional, and not be able to set an if/else, like with state-switch, but the fact it remains within the boundaries of the view, and does not cause the view to slide to and fro makes this the preferred config now.
can even nest those conditions:
title: Cameras binnen
path: cameras_binnen
type: panel
icon: cli:home-video
card_mod:
class: class-header-margin
cards:
- type: vertical-stack
cards:
- type: conditional
conditions:
- condition: state
entity: switch.inside_wifi_cameras_privacy_mode
state: 'off'
card:
type: conditional
conditions:
- condition: screen
media_query: '(min-width: 1200px)'
card:
type: grid
columns: 2
square: false
cards: &inside_wifi_cameras
- type: custom:decluttering-card
template: camera_privacy
variables:
- entity: bijkeuken
- type: custom:decluttering-card
template: camera_privacy
variables:
- entity: hall
- type: custom:decluttering-card
template: camera_privacy
variables:
- entity: garage
- type: custom:decluttering-card
template: camera_privacy
variables:
- entity: corridor
- type: conditional
conditions:
- condition: state
entity: switch.inside_wifi_cameras_privacy_mode
state: 'off'
card:
type: conditional
conditions:
- condition: screen
media_query: '(max-width: 1200px)'
card:
type: vertical-stack
cards: *inside_wifi_cameras
Hi all,
and thank you Thomas for the mod.
I am trying to get a card to show depending on the device. I installed the BrowserMod and have both my pc and phone registered and I get the popup test to work.
With the state-switch Iām not getting the code to recognize the deviceID and it only shows the default. Can anyone help me identify the issue? Iām fairly new to HA.
Thank you in advance for any pointers.
This is the code Iām using for tests:
type: custom:state-switch
entity: deviceID
default: default
states:
4563356-c4edgfsd:
type: markdown
content: |
## This is my PC
3456345f-3456434:
type: markdown
content: |
## This is the phone app
default:
type: markdown
content: |
## Unknown Device
Hello everyone,
I have a card that displays the ink levels of my printer.
When the printer is turned off, the ink level sensors are not available.
So I would like to hide the card when the printer is turned off and only show it when the EPSON printer sensor is in one of the three following states:
idle, printing, stoppedā¦
I started like this:
type: custom:state-switch
entity: sensor.epson_xp_810_series
states:
idle:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:config-template-card
.....
.....
But I would like to avoid rewriting the same code three times for the three states dle, printing, stopped
How can I solve this?
Is there a possibility to check all three states only in one condition?
Thanks
Other possibilityā¦
When the printer is online, save the ink values into helpers.
Then you use the helpers instead of the real values who are offlineā¦
Thanks for the reply.
But I really donāt want to see the card
- type: conditional
conditions:
- entity: X
state_not: 'off'
card:
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: horizontal-stack
cards:
that is wat I have, is it that what you mean ?
I also tried with the conditional card but itās not a good solution because when the printer is turned off the EPSON sensor becomes unavailableā¦
So I canāt play on its states
Thanks