Input group examples

Here are some examples of how you can use input groups to provide immediate affordance for the type of information the field requires.

Input group sizes

The input group add-ons come in the same sizes as input fields.

User experience

Input groups are a great addition to fields in forms and calculators, they give immediate affordance informing the user what is required of them. Use input groups 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 an input group add-on at either end of a field related to a question eg an amount or time frame. For example, a numerical value and a time value ($2200 / month), or a currency and numerical value (AUD / $2200).

Visual design

As with most components in the GUI Input groups are designed to be simple, unobtrusive and accessible. Input addon elements can be positioned at either end of input fields.

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).