Disabled State
The visual and functional appearance of an element that exists but cannot currently be interacted with.
Plain English
Disabled states communicate "this exists but is not available right now." They are different from hidden elements — something disabled is visible, which can inform users about what is possible in the product even when it is not yet available to them. The classic treatment is reduced opacity (40–50%), muted colour, and cursor: not-allowed. The most common mistake is making disabled elements invisible — users should be able to see that the action exists, just not that they can take it.
Technical
HTML: disabled attribute on form elements prevents interaction natively. CSS: the :disabled pseudo-class targets disabled form elements. For non-form interactive elements (divs, custom components), use aria-disabled="true" + pointer-events: none + visual treatment. Do not use opacity: 0 or display: none for disabled states — disabled things should be visible. pointer-events: none prevents hover/click CSS effects and JavaScript event handlers but allows cursor CSS.
Live Demo
Disabled State Design
❌ Bad — looks identical to active
✓ Good — clearly disabled
Disabled ≠ invisible. Users need to see it exists — just know they can't use it yet.
Usage
✓ Good usage
A disabled submit button at 45% opacity with cursor: not-allowed and a tooltip "Please complete all required fields" — communicates what is needed without removing the element.
✗ Bad usage
Hiding the button completely until the form is valid — users do not know the submit action exists or what state they need to reach.
Recommended values
- Opacity: 40–50% (or equivalent tonal muting)
- cursor: not-allowed (communicates unavailability)
- Colour: switch to muted/grey palette
- pointer-events: none (prevents interaction)
- Include tooltip explaining why (if the reason is not obvious)
Common mistakes
- pointer-events: none without visual treatment — element looks enabled but does not respond.
- Disabled elements below 3:1 contrast — may be invisible to low-vision users.
- No explanation of why something is disabled — users are left guessing.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Disabled interactive elements: opacity: 0.45, cursor: not-allowed, pointer-events: none, colour switched to grey scale. Add a tooltip explaining why disabled when the reason is not obvious. Never hide disabled elements — they should be visible.