Interaction State

Enabled

An enabled state communicates an interactive component or element.

Disabled

A disabled state communicates a inoperable component or element.

Hover

A hover state communicates when a user has placed a cursor above an interactive element.

Focused

A focused state communicates when a user has highlighted an element, using an input method such as a keyboard or voice.

Activated

An activated state communicates a highlighted destination, whether initiated by the user or by default.

Pressed

A pressed state communicates a user tap.

Dragged

A dragged state communicates when a user presses and moves an element.

Selected State

Unselected

dfa

Partially Selected

daf

Selected

dfa