Disabled controls

Usage

Controls are disabled when some state of the application is preventing them from being used. For example, the pagination controls highlighted in red cannot be clicked because the user has reached the last page.



Use disabled controls when it's likely that users will not discover hidden/dependent controls but should be made aware that more than one option exists. In the following screen shots users can see that there is more than one possibility for choosing a date range. They can also tell that they must click either the Since option to enable the corresponding drop-down or the From To option to enable the date pickers shown in the image on the right.





PCF elements

Disabled controls represent a pattern. There is no primary PCF element because any input can be disabled.

Best Practices

Show the controls but keep them in disabled state until the user selects the option that enables those controls. For example, the Remove button is initially disabled because nothing is selected. When the user selects a row, the Remove button is enabled.