Input Meter

A metering element that monitors and responds to user input.

Introduction

An input meter gauges user input according to a set of pre-defined levels. For example, a password strength meter may indicate "weak", "medium", "strong", etc. Another type of input meter is a character count, which indicates how many characters have been used and/or are remaining.

Working Examples

Experience the pattern in action on our companion eBay MIND Patterns examples website.

Terminology

Input Meter: the pattern as a whole, consisting of the following parts.

Input: the interactive textbox element

Meter: the non-interactive meter element

Best Practices

The meter must not use colour alone to convey meaning.

Each threshold or boundary that is conveyed via colour must also have that same meaning conveyed in visible text (for example, green = "good", red = "not good").

Interaction Design

This section provides interaction design for keyboard, screen reader & pointing devices.

Keyboard

The meter itself is a non-interactive element, therefore should not gain keyboard focus.

The input should be focusable and adhere to usual textbox interaction design.

Screen Reader

The input should be reachable via screen reader and adhere to usual textbox interaction design.

The screen reader should convey any changes to the meter.

When the non-interactive meter element gains virtual cursor focus, the screen reader should it announce its role, value and any state(s).

Pointer

The input should be clickable and focusable like any regular textbox.

The meter itself is a non-interactive element, therefore should not be clickable or tappable.

Developer Guide

This section is not yet available.

Last updated