Component States

Foundations / Interaction / States / Component States

Intro

The component state determines the interactivity and the visibility of the component. A component can have only one component state at any given time. The following component states are available: enabled, disabled, read-only, and 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.

Radio button, input, text area – enabled

2
do
false

Use the enabled state:

  • If a component can currently be used.
dont
false

Don’t use the enabled state:

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

Disabled

The component shows the focus state when it receives user input. If a keyboard is available, all interactive elements must provide a focus state.
Only one element can be focused at a time. If another element is focused, the previously focused element becomes unfocused.

Radio button, input, text area – disabled

2
do
false

Use the disabled state:

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

Don’t use the disabled state:

  • 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.

Radio button, input, text area – read-only

2
do
false

Use the read-only state:

  • 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.
dont
false

Don’t use the read-only state:

  • 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.

2
do
false

Use the hidden state:

  • 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.
dont
false

Don’t use the hidden state:

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

Guidelines

Specifications

Guidelines