Overview
- Avoid disabled states when possible
- Use disabled state only for actions that aren’t currently available but will be available if the user does something on the page, ex: completes all form fields and resolves all errors.
- The surrounding interface and the hint/tooltip should clearly explain why a component is disabled and what the user needs to do for it to become active.
How to avoid disabled states
Guide the user on the correct path using plain text, inline alerts, hints and tooltips. If you are not sure if you can avoid disabling a component, reach out to the design team to brainstorm alternatives.
Buttons
In the example below, the report controlled by this date range picker is only able to display 30 days at a time. In the first example, the user is able to select beyond 30 days, then the “Apply” button is disabled and an error message appears. In the alternative approach on the right, the user is immediately shown the 30-day alert when they select “custom.” Once they’ve chosen a start date, they may only select within 30 days.
Do

Don’t

Text inputs
In the example below, the text field and button are linked to indicate an email being sent successfully. In the first example, the user is able to click on the button, see the email submission in progress, and then see a success state of the button (via a pill). The text field is still editable, even after the button has been clicked. In the alternative approach on the right, the user is immediately shown a disabled state text field, and a past-tense state button, which don't provide the right feedback to the user.
Do

Don’t

Checkboxes
In the example below, Text messages are no longer available as a setting in the native phone app. Rather than disabling the checkbox, try using plain text.
Example 1
Do

Don’t

Example 2
In the example below, settings that are available in a paid plan are disabled. Instead, try grouping paid-for settings in a section called “Advanced Settings” and adding a link to upgrade.
Do

Don’t

When it’s ok to disable
In a few scenarios, disabling is ok. See examples below:
Dates
In a date picker, unavailable dates may be disabled. Reinforce this by adding a description to “custom” so that users understand why the dates are disabled.

Submit/Next/Save Button
In a form, the submit or next button may be disabled. When tapped or clicked, it should show form errors and a tooltip that explains how to proceed.

Tooltips can help
If the user taps or clicks on disabled button, a tooltip appears explaining how to proceed.
