Input Group - Usage
Basic Guidelines
The Input Group component is designed specifically for scenarios where a form contains only one input field. Its primary purpose is to:
- Save space in the UI
- Maintain clarity by emphasising that only a single input is required
- Streamline user interaction by pairing the input field with a button
This component is ideal for simple, focused tasks where users are expected to enter one piece of information and immediately act on it.
Label tells the user the purpose of the field and therefore make the UI accessible.
In-line messaging is an optional text field that can be used for further information, clarifying the required input, for example intended formatting of promo codes (XXX-XXX-XXX).
Validation messages inform the users about the correctness of the input. Error messages need to be clear, precise and constructive.
Behaviour
As both the Input Field and the Button are interactive, hit areas have been designed so that there is no overlap between them.
Variants Usage
Error Variant
Form fields are validated on submit, which means the form is either sent without issues, or updated showing an error. If errors are rectified, the form needs to be submitted again to trigger another validation. If everything is ok, the form is submitted.
There are two ways an error can occur:
- The text input field is required but was left blank before submitting
- The input information did not reach validation.
The error message will be displayed directly beneath the input field.
Please fill in your email address
Please fill in your email address
Content Guidance
It is recommended to limit character lengths to avoid text being truncated. Labels should always be clear and to the point.
Icon Usage
In most cases, it is generally recommended to not include an icon within a Button, as it can often be very difficult to interpret them correctly and thus doesn’t always benefit the user.
An icon should only be used to provide additional and clear context to the copy within the CTA. It should not be added purely for aesthetics. Icons within Buttons need to be illustrative of the action that’s going to happen when the user uses the Button.
Please note: Only linear icons should be used, not solid icons.
Loading Spinner
In situations where the Button triggers a process that takes time to complete, you can use the Loading Spinner component. The spinner appears to the right of the Button text and provides a clear visual indication that an action is in progress. If the Button includes an icon, the spinner replaces it during the loading state. If no icon is present, the spinner simply appears alongside the button copy. This helps manage user expectations and improves perceived responsiveness.
Alignment
The Input Group component must align with the grid system set out in Foundations. It sits in-line with the rest of the text.
In a 12-column grid layout, the Input Group sits aligned within the six centre columns of the grid, in-line with the rest of the text. Their width should be based on the content they’re expected to receive, but is generally recommended to be set to four columns wide.
