Lovelace: Lockable toggles - avoid accidental triggering

It’s easy to accidentally toggle an entity in lovelace - especially on mobile.
Here’s a solution to that problem.

- type: entities
        - entity: light.my_lamp
          name: A lamp
          type: custom:toggle-lock-entity-row


Clicking the lock will make it fade away for five seconds, and then the toggle can activated with a second click - just like how the custom-ui lock used to work.

As a bonus, you can select which users can remove the lock.


Nice! Loving all the stuff you are making for Lovelace :grinning:

1 Like

Sooo, you fixed an issue I didn’t knew I had haha. This will come in handy for my PC on/off button.
Thanks for you sharing!


Can you make the wait adjustable?

Does this also work for locking the header toggle on cards?

1 Like

No, it only works for single entities.

Wonderful! Thanks for sharing. Can you recommend a way to enable the visibility of a switch or group by entering a password?

1 Like

Different users and state-switch

I love this custom element, I use it to prevent my main pc to be shut down by accident, it works flawlessly on Chrome and on mobile, but on the new edge it doesn’t work I get custom element doesn’t exist.
I don’t know why

It is a great idea. I tryed with my garage covers, but it was converted to a button instead of the up and down arrows. Is it possible to keep the arrows? Garage is something very suitable for your solution.

Very useful, thank you!

One issue: I’ve noticed that both on desktop and on mobile (Android, Opera) it’s still possible to accidentally toggle a locked switch without unlocking it, by clicking or tapping on the very left or right edge of the switch. The switch toggles and the lock is never triggered or removed. Seems like the lock’s clickable area needs to be slightly wider in both directions.

Definitely useful, thanks!

Amazing, Thomas.
It is very useful and make HA much better to fit multiple situations.
It would be great if you could fix what Martso mentioned about the sides bypassing the lock.
Thank you!!!

How does one easily install this? I’m a bit baffled.

I did manage to trigger it, so i corrected the #lock to:

      #lock {
        opacity: 1;
        -webkit-animation-duration: 5s;animation-duration 5s;
        -webkit-animation-fill-mode: both;animation-full-mode: both;
        width: 70px;
        height: 45px;
        border-radius: 15px;
        padding: 2px;
        margin: -5px 5px 5px -20px;

I know it’s huge - but i actually like the large icon :slight_smile: