Signal that an element cannot currently receive input — an operation that often creates more confusion than clarity, making alternatives worth considering first.
The problem
Confusion and frustration
User may not understand why they can’t interact with a certain element and may struggle to figure out how to enable it. This can lead to a frustrating user experience.
Accessibility issues
Disabled states often use lower opacity or light gray colors, making them hard to see for people with visual impairments. They’re also usually not reachable by keyboard.
To-do
Form validation
Instead of disabling the submit button until everything’s filled out perfectly, let people click it anytime and check the form afterward. If something’s missing or wrong, show clear tips to help them fix it.
Related patterns
Tangentially related
- Form — alternatives to disabling form elements.
- Validation — disabling submit until the form is valid hides the problem this move exists to explain
Alternatives
- Explanation — enable and explain: keep the element interactive, then explain on interaction why it can't act yet
- Unavailable actions — hide what's irrelevant to the current context rather than showing it disabled