Design Pattern Library 1.5

General Guidelines

Desktop/Web

Mobile (Tablet & Phone)

Visual Design Guidelines

Forms - Selection

Problem

In forms containing many controls, the user may become confused when trying to determine where they are.

Solution

Offer the user a clear means of quickly determining what control in the form is currently active, or has received focus.

Why

Complex forms can easily overwhelm the user. Any affordance that helps the user keep track of where they are in the process of completing a form is valuable. Causing the active form control to have a visual indication that it has received focus is a simple and effective means to help accomplish this goal.

Code

HTML code here
	
CSS code here
	

How

The form control that has received focus may have a specific style (CSS) applied, altering its background color, label, or border.

Examples