The component state determines the interactivity and the visibility of the component. A component can have only one component state at any given time.

Variants

The following component states are available:

• Enabled
• Disabled
• Read-only
• Hidden

Enabled

An enabled component can be interactive and can be used to perform the action. Usually, this is the default state for all components. The component is focusable, visible, and – if applicable – editable.

  Use:

• If a component can currently be used.

  Don’t Use:

• If a component can’t currently be used.
• If a component can’t be used at all. Hide it instead.

Disabled

A disabled component can’t currently be used. Disabled components have reduced visibility and aren’t focusable or editable.

  Use:

• If a component can’t currently be used, but it’s obvious how to enable it.

  Don’t Use:

• If the user can never enable the component. Hide it instead.
• If it wouldn’t be clear why a component is disabled. In this case, keep the component enabled and provide a message if it is used incorrectly.

Read Only

Read-only components are displayed in edit mode, but aren’t editable. The component is fully legible and focusable. The value can be recognized and selected, but not changed.

  Use:

• If a page or a part of it is in edit mode, and a component is currently not editable or changeable.
• If an input value must be readable.

  Don’t Use:

• If a component can never become editable. Use alternatives instead (such as text, or display only).

Hidden

Hidden components are not visible, not focusable, and not editable. The component doesn’t take up any space.

  Use:

• If a component can never be used (for example, because the role or group assigned to the user doesn’t include the necessary authorization).
• If hiding the component is a meaningful form of responsive behavior. Example: A column of a table isn’t needed on phones.
• If the component isn’t available for the current context.
• If parts of the UI are changed based on a setting.

  Don’t Use:

• If a component can’t currently be used, but can be enabled by user actions.

Related Links