I'm working on a masking pattern for our text input fields. Show/hide would look like this:

Two input fields, one with masked characters, one without

I'm not sure if we should provide show/hide if the input is disabled.

Masked content in a disabled field

Right now in the disabled state, we'd be defaulting to the masked input pattern, and the user can't reveal the content. It seems like users might want to see what's in the field, though, even if they can't update it.

But it also seems like providing an active control in a disabled field makes it seem updatable. Which is also a problem.

Should we drop the show/hide in disabled input fields? And if so, is it better to show just masked dots, or the content that is masked?

1 Answer 1


The disabled state communicates and forces that you can't interact with the component. But in your case it is still possible to interact with the component, namely for showing or hiding the value. You can make the field either readonly* or replace the input with plain text.

I would keep the functionality for masking and unmasking the input, since that's there for a reason I suppose.

* https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.