Skip to content
Copyright © 2024 by Westpac Banking Corporation. All rights reserved.

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.

Hint text

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

Text add-ons

Text
Text
Text
Text
Text
Text
Text
Text

Select add-ons

Button add-ons

Usage examples

AUD
.00
$

Error state

Text add-ons with errors

Copyright © 2023 by Westpac Banking Corporation. All rights reserved.If there is an error, it can go here
Text
Text

Select add-ons with errors

Copyright © 2023 by Westpac Banking Corporation. All rights reserved.If there is an error, it can go here

Button add-ons with errors

Copyright © 2023 by Westpac Banking Corporation. All rights reserved.If there is an error, it can go here

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

I am supporting text

Usage examples

Supporting text used for character count

250 remaining

For a valid response use: 647453, all other numbers will show the invalid response

Icons

Types

Icon before

Copyright © 2023 by Westpac Banking Corporation. All rights reserved.

Icon after

Button icon after

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?

The GEL design System will always have the latest component versions and additions, however new components and changes to existing components may roll out to other platforms at different times.

PlatformStatus
GEL Design System
Copyright © 2023 by Westpac Banking Corporation. All rights reserved.Available
Mesh UI
Copyright © 2023 by Westpac Banking Corporation. All rights reserved.Older version available - Upgrade in backlog
Legacy WDP
Copyright © 2023 by Westpac Banking Corporation. All rights reserved.Older version available

ComponentsCopyright © 2023 by Westpac Banking Corporation. All rights reserved.