Interactions · Status feedback
Disabled State
Also called: Disabled, Grayed out, Inactive state
The style of an element that can't be used right now. It usually looks faded, the cursor shows a "not allowed" sign, and clicking does nothing.
In detail
The disabled state tells users "you can't use this right now." Common cases: the submit button is grayed out until required fields are filled in, preventing repeat clicks while submitting, actions you don't have permission for, and the bulk delete button when no rows are selected. Add the HTML disabled attribute to a button or input, and the browser blocks clicks and focus automatically.
Visually, it usually turns light gray or gets lower opacity, with the cursor set to cursor: not-allowed. But graying something out without saying why leaves users wondering "why can't I click this?" Explain it next to the element, or show the reason in a tooltip on hover.
Sometimes it's better not to disable at all. Let users click submit, then use form validation to point out what's missing. The feedback is more direct.
Developer infoTerm ID, DOM cues, match priority
- Term ID
interaction-disabled-state- DOM selectors
- No DOM cues. This concept isn't detected directly on a page.
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v1 · updated Sep 29, 2026