id: enable-disable

title: Enable/Disable#


There are multiple scenarios where we need to enable or disable, including managing users for an app or product, locations for an app or product, and app-level settings and configurations. There are scenarios where users need to complete this action for a single item and others where a user needs to complete the action for multiple items. This pattern does not apply when turning a product or app on or off.


Please see Enable/Disable vs On/Off.


Enable or disable a single item within a form.

Enable or disable a single item within a table.

  • Use the Switch component.
  • The disabled state displays with the switch to the left and coloured grey.
  • The enabled state displays with the switch to the right and coloured blue.
  • The switch column should be ordered before any dependent editable columns, if there are any.

A table with inline enable/disable, all rows disabled:


Enable a location to display the dependent editable column:


Enable or disable multiple items within a table.

  • List all like items that can be enabled or disabled in a table.
  • Primary column (farthest left) should list the name of the item.
  • Secondary column data should provide the user with the necessary information to ensure they can identify the item they wish to enable or disable.
  • If there is required data to enable or disable an item, that data should be visible in a column.
  • If the required data is missing and the action cannot be completed without it, the checkbox should be disabled until the necessary data has been added.
  • Once a single checkbox has been selected, the enable / disable buttons are displayed.
  • The disabled status is displayed as a grey badge.
  • The enabled status is displayed as a green badge.

All locations disabled: Disabled

Select a location and click enable or disable: DisabledSelected

Selected location is now enabled: Enabled

Related components#

Last updated on by tanyalisleiq