Input rows
Input rows arrange related input fields side by side.
Published: Last updated:
Overview
An input row is a layout pattern that positions two or more related input fields side by side, creating a visually connected group that is easy to scan and complete. Each input remains independent, retaining its own label, helper text, and validation, while the pattern ensures consistent spacing, alignment, and responsiveness. This pattern provides a reusable solution for grouping related inputs inline without creating a custom component for each use case.
When to use
- When inputs are closely related and often completed together, e.g., credit card expiry date, and security code.
- To reduce vertical scrolling and improve visual grouping of related fields.
- For short or moderate-length inputs where inline placement enhances usability.
When not to use
- For unrelated inputs that should remain separate or stacked vertically.
- For long or complex inputs that require significant helper text, validation, or wide interaction areas.
- When side-by-side placement would impair readability on smaller screens, default to stacked inputs instead.
- Use the pattern sparingly. Too many inline inputs can create scanning difficulty in forms.
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
- 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.
Responsiveness
Input rows are designed to display fields inline on larger viewports but adapt gracefully for smaller screens. When space becomes constrained, inputs automatically stack vertically, ensuring they remain usable and readable on mobile devices.
This behavior is controlled through Bootstrap’s grid system, which uses breakpoint classes to determine when columns collapse to a new line. For example:
.colcreates flexible, equal-width inputs that adapt across breakpoints..col-*classes (e.g.,.col-8,.col-4) define fixed proportions within the 12-column grid.- Responsive classes like
.col-md-*or.col-lg-*let you specify when inputs should display inline or stack, based on device width.
By leveraging these breakpoint classes, input rows remain accessible and scannable across all devices, avoiding cramped layouts and unnecessary horizontal scrolling.
Validation
Although input rows group fields together visually, each input remains an independent field with its own label, helper text, and validation rules. This means that error states are applied individually rather than to the row as a whole. For example, in a credit card input row, the expiry date and security code are validated separately, with each field showing its own inline error message if the input is invalid.
Treating inputs independently ensures that users receive clear, contextual feedback and can correct mistakes without confusion, while still benefiting from the streamlined layout of the input row pattern.