Input Group - Overview

Purpose

The Input Group allows for a Text Input field to sit directly next to a Button. It is used for a single input and submit action, such as a Postcode Finder or Newsletter Sign up.

For Search Bar functionality (including a clear icon) please use the Search Bar component in our Figma Concept Library.

Anatomy

The Input Group can be broken down into the following elements -

1. Mandatory (optional)
The asterisk indicates whether filling in this field is optional or mandatory.

2. Label
The text label is used to describe the required input from the user.

3. Text Input (optional)
The text field within the container shows the user’s input once it has been filled in.

4. Submit button
Used to submit the entered value of the field.

4. In-line Messaging (optional)
An optional text field that can be used for further information, clarifying the required input.

5. Validation Message
An error message after the field has been validated.

Variants & States

There are several states available to visualise the user’s progress.