The input group component contains elements that can be used with form inputs to improve usability and streamline form completion. These include add-ons, icons and supporting 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
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).