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.
Related patterns
Tangential to
- 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