When a control is disabled, it is slightly transparent and stops receiving input. When a control is hidden, it is no longer in the interface.
When should the controls be disabled:
- If the input value of a control is relevant, but not editable, the control should be disabled. For example, a control whose value is automatically determined under some condition should appear disabled if its value might still be used by the component or some other system,
- If the control is available under normal circumstances, but isn’t available right now due to an error or event, disable the control to indicate that it exists, but it is disabled. Provide a tooltip explaining the reason for the disabled status.
When should the controls be hidden:
- If a control is only active in very rare circumstances, it should be hidden. Don’t show the user a control that can’t be used in most cases,
- Hide input controls (e.g., Text Fields, Color Fields or Popups) when the value shown is currently irrelevant and not used,
- Buttons should never be hidden, because there is an expectation of persistence for them,
- When you are hiding controls based on the value of another control, always place the hidden control somewhere below the control that triggers the hiding. Ideally, the hidden control should be on the next line.