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.

Please fill in your email address before submitting When form conditions are not met, disable submission and indicate missing content nearby

When to use it

Prevent submission until required input is present
Show an unavailable step that may become available
Block an action while the same request is running
Represent a permission or state constraint

When NOT to use it

Disable a control without explaining why
Use low contrast that makes the label unreadable
Leave keyboard focus on a control that cannot respond
Disable most of the page instead of clarifying the workflow

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

Complete all required fields to enable Register

Unavailable option

Alex Chen Guest

Project settings

Guests can view project settings, but only admins can edit or delete them

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