States - Overview

Foundations / Interaction / States - Overview

Intro

Using the correct state or combination of states for a UI element helps users to recognize possible options and see where they need to take action.

Component State

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.

For details, see Component State.

Focus State

Focus states determine which component receives the user’s input when the input doesn’t supply positioning information. The focus state is most important for keyboard users. The following focus states are available: focused and unfocused.

For details, see Focus State.

Interaction State

Interaction states are handled by the corresponding component directly. A component can have only one interaction state at any given time. The following interaction states are available: regular, hover, and down.

For details, see Interaction State.

Selection State

The selection state is applied after the user has selected the element. The selected element should be clearly distinguishable from the other elements. The following selection states variants are available: selected, unselected, and indeterminate.

For details, see Selection State.

Value State

Value states show the semantic meaning of a UI element in a specific use case and context. A UI element can have only one value state at any given time. The following value states are available: none, positive, negative, critical, information, and custom.

For details, see Value State.