The input group component comprises elements used with form inputs. These elements include labels, add-ons, icons and supporting text, all aimed at enhancing accessibility, usability and streamlining form completion.
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).