Disabled element still looks editable

I have four fields that I added a conditional to: when reset button is visible, these elements are disabled.

Functionally this works, but visually, two of the four fields still look editable to the user. The two radio button fields show a circle with an X through it when the user hovers over the radio button to change it when in disabled mode - which is good.

The date input field shows a white finger pointing even though it is functionally disabled. This makes it look like you can still change the date, although you cannot.

The drop down field shows a black arrow on hover even though it is functionally disabled, again making it look like the user can change it.

Any suggestions on how to visually make these two elements behave more like the radio buttons?

Hi you could try using conditionals to change the background colour or font colour to grey it out when its disabled.


@simon thank you. That’s what I ended up doing but it still looks clickable due to the hand and mouse appearing on hover. Any ideas to make it turn to the circle with an x through it on hover instead so it is super obvious?

Hi, I am now aware of a way to do that, sorry


This topic was automatically closed after 70 days. New replies are no longer allowed.