Input row
The input row groups related input fields side by side in a single row.
Published: Last updated:
Overview
The input row is used to display multiple input fields inline within a single row. It is intended for related inputs that are often completed together, such as credit card details or paired text and select fields. By grouping inputs horizontally, the pattern reduces vertical space, strengthens visual association between fields, and improves efficiency for tasks that require entering connected information.
Even though input fields are grouped together, each remains an independent field, with its own label, helper text, and validation applied individually.
When to use
- When inputs are closely related and typically completed together, such as credit card expiry date, and security code.
- To reduce vertical space and keep connected fields grouped for easier scanning.
- For short, simple inputs where inline placement improves efficiency without sacrificing clarity.
When not to use
- When fields are unrelated or have no logical connection, they should remain separate and stacked vertically.
- For complex or long inputs that require helper text, validation messages, or larger interaction areas.
- When inputs need to adapt differently on smaller screens; if side-by-side placement harms readability, use standard stacked inputs instead.
Spacing
A spacing of 8px / 0.5 rem between input fields is recommended to provide clear visual separation while keeping related fields visually grouped.
Input labels
Each input field should have its own label to clearly differentiate it from adjacent fields.
Clear labels help users understand what information to enter in a text input. Every text field should have a label. In rare cases where the input’s context is unmistakable, a visible label may be omitted—but consult an accessibility specialist before doing so.
- Label best practices
- Use sentence case, except for product names and proper nouns
- Keep labels short and clear
- Do not include colons after label text
Default values
Where appropriate, provide programmatic assistance by detecting and pre-filling input values to minimise user effort and reduce the risk of errors. When values can’t be determined automatically, offer type-ahead suggestions. Use sentence case for all default, detected, and auto-complete text.
Assistive / Helper text
Optional assistive and helper text provides users with relevant information to support accurate field completion. These supporting texts help clarify data entry requirements and improve usability, particularly for more complex inputs.
Assistive text sits directly below the input label and provides brief, contextual support that complements the label, such as offering a short explanation of what’s being asked. It helps set expectations before the user interacts with the input.
Helper text appears persistently beneath the input field and offers additional guidance, such as formatting instructions, example values, or further explanation. It is the preferred method for assisting users because it remains visible without requiring extra interaction.
If the input enters an error or warning state, the helper text is replaced by the validation message to avoid confusion.
- Best practices
- Use sentence-style capitalisation.
- Write text as full sentences with appropriate punctuation.
- Keep both types of text brief and relevant to the user’s task.
- Avoid duplicating label content, each element should serve a distinct purpose.
Placeholder text
Optional placeholder text appears within an input field in lower contrast than user-entered text. It provides a hint or example of what to input, but disappears as soon as the user begins typing. Because of its transient nature, placeholder text must not be used as a substitute for a visible, persistent label, and it should never contain essential or instructional information.
In some cases, using a simple example, such as a sample email address or postcode, can be helpful to clarify expected formatting or content. However, this should only be done when it adds value and does not create dependency or confusion.
- Best practices for placeholder text
- Use sentence-style capitalisation, and in most cases, write the text as a direct statement without punctuation.
- Do not include critical or instructional content, only hints or examples.
- Avoid using placeholder text unless necessary; it can hinder usability, especially for users with cognitive impairments or when reviewing completed forms.
- Placeholder text is not shown by default and should be added intentionally, with careful consideration of its value.