Input Meter
A metering element that monitors and responds to user input.
Last updated
A metering element that monitors and responds to user input.
Last updated
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.
Input Meter: the pattern as a whole, consisting of the following parts.
Input: the interactive textbox element
Meter: the non-interactive meter element
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").
This section provides interaction design for keyboard, screen reader & pointing devices.
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.
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).
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.
This section is not yet available.
Experience the pattern in action on our companion .
