States

Estimated reading: 2 minutes 169 views

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

Principles

Distinct

States must have clear affordances distinguishing them from one other and the surrounding UI, emphasized according to their priority levels.

Additive

When multiple states occur at once, such as selection and hover, both state indicators should be displayed.

Consistent

States should be applied consistently across components in order to increase usability.

State Types

Default

The default state communicates an interactive 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.

The focus state requirements:

The Focus Indication Area should be at least as large as the area of a 4px bigger perimeter of the unfocused component. The area can include a shape, background color, stroke, or any symbol used to signify focus.

The outlines wrapped around the entire elements should be at least 2 pixels thick to be noticeable.

Active

A selected state communicates a user choice.

Dragged

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

Toggle state

A Toggled state communicates a toggle between two options.

Disabled

A disabled state communicates a noninteractive component or element.

Error

An error state communicates a user or system mistake.

DocuWare Design

States

Principles

State Types

Default

Hover

Focused

The focus state requirements:

Active

Dragged

Toggle state

Disabled

Error

CONTENTS

Loading Patterns

Alerts

Banners

Bias-Free Language

Text

Text Area

Time Input

Date Input

Slot Input

Masked Input

Number Input

Text Input