States

Components States

States are visual representations used to communicate the status of a component or interactive element to the user.

Each state should be visually similar and not drastically alter a component, but must have clear affordances that distinguish it from other states and the surrounding layout.

Basic Component States

Enabled

An enabled state communicates an interactive component or element.

Hover

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

Focused

A focused state communicates when a user has highlighted an element, using a keyboard or other accessibility tool.

Pressed (Active)

A pressed state indicates that the user is actively pressing the component.

Disabled

A disabled state communicates a non-interactive component or element.

Selected

A selected state communicates a choice made by the user.

Validation

Form validation changes the appearance of the affected form fields if their input doesn’t match the validation requirements. The state of the form field being validated changes into danger, and can be accompanied by additional label explaining the nature of the validation error.

Validation Component States

Danger

An error state that communicates a user or system mistake.

Focused

An error state that communicates a user or system mistake that has been highlighted using a keyboard or other accessibility tool.