Labels

Use the input group component to accessibly define the labels used with Inputs, and Text areas. All inputs require labels for usability and accessibility.

Add-ons

Add-on elements can be used either before or after an input, they can provide clear affordance that helps users understand the information they are required to enter.

Types & sizes

Usage examples

Error state

Supporting text

Supporting text sits below the field, it can be a character count, or validated feedback of the information that has been entered.

Types

Usage examples

Icons

Types

Usage examples

User experience

Add-ons

Add-ons are a great addition to fields in forms and calculators, they provide instant cues that inform users about what is expected of them. Use text add-ons when there’s an association between one attribute and another, as they add a clear affordance for what type of data is required to be entered in the field, e.g. $ or %.

You can also use a select add-on at either end of a field to combine two related questions e.g., an amount and a time frame ($2200 / month), or a currency type and a value (AUD / $2200).

Supporting text

The most common usage of Supporting text is to display a character count for a field entry, this can be very useful to help manage users expectations around how much space is available for their message. It provides visual clarity and for users who may have cognitive or visual impairments, a character count can serve as an accessibility aid, helping them understand the input constraints more easily.

Visual design

As with most components in the Design system Input groups are designed to be simple, unobtrusive and accessible.

Dos and don’ts

• Do use multiple add-ons if necessary.
• Avoid changing the styling of input add-on’s (border radius, colour, size etc).

Where is this available?