Labels

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

testing 1 - using InputGroup - not FormGroup

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

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

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