Disabled
You might say
Keep the submit button gray and unclickable until the form is complete.
Show that a control is currently unavailableA disabled control cannot be operated in the current state. Use it when the action is visible and its future availability matters, and explain what condition is missing. If the action is irrelevant, removing it may be clearer than leaving a page full of disabled controls.
You can say this to an AI Agent
When Submit is disabled because Company name is missing, explain the requirement near the field and update the button as input changes. Do not rely on a tooltip or gray styling while still submitting. Verify visible reasons and consistent behavior with keyboard and touch.
When to use it
- Prevent submission until required input is presentSubmitSubmit
- Show an unavailable step that may become availablelin@example.comPassword (required)Sign upA required field is still empty, so Submit remains disabled.
- Block an action while the same request is runningPlease enter a password first.Sign up
- Represent a permission or state constraintSubmitting…
When NOT to use it
- Disable a control without explaining whyBuy now
- Use low contrast that makes the label unreadableMemberHiding an unavailable entry point permanently may keep people from discovering the feature or how to request access.
- Leave keyboard focus on a control that cannot respondDelete project
- Disable most of the page instead of clarifying the workflowSubmit
Anatomy
Submit🚫 Invalid clickTip: Fill in your email address first
Reduce visual emphasis while keeping text and status still legible
Native disabled usually prevents interaction and focus; aria-disabled only expresses semantics and still requires scripts to prevent operations and determine focus strategies.
Explain why the control is unavailable and what will make it available
Variants
Native disabled
Submit
Use native disabled for controls that are truly unavailable; test their appearance and behavior in your target browsers
With Reason
RegisterFill in the password first
The control will become available after a clear condition is met; show that condition nearby
Hidden
(no rendering)
The action does not apply in this context and needs no explanation; omit it instead of showing a disabled control
Typical use cases
Submit button
Register an account
Complete all required fields to enable Register
Unavailable option
Loading action
Mechanical keyboard ×1¥ 199.00
Delivery: Alex Chen · Nanshan District, Shenzhen
Keep the button disabled while the order is being submitted to prevent duplicates
Permission-limited control
Sold out
Limited-edition cat figurine
¥ 89 · Restock date not announced
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check