Multi-field input
Multi-field inputs combine two or more fields under one label for easier, faster data entry.
Published: Last updated:
Overview
Multi-field inputs allow two or more input fields to be grouped together as one logical unit. This pattern is used when a single piece of information is best captured through multiple related fields, such as a credit card number split into segments, a first name and last name pair, or a combination of text and select fields.
In a multi-field input, the fields share a single label, helper/assistive text, and validation. Each individual field (text input, select, etc.) may have its own placeholder, but the group as a whole is treated as one logical input.
When to use
- Use when related information is more understandable when divided into smaller fields.
- Use when breaking input into multiple parts reduces errors.
- Use when a label or context applies to a group of fields rather than to each field individually.
When not to use
- Avoid when a single input field is sufficient to capture the information clearly.
- Do not use when grouping fields makes scanning harder or increases form complexity unnecessarily.
- Avoid when the grouped inputs serve unrelated purposes, use separate fields 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.
States
Multi-field inputs inherit the same visual and functional states as individual input fields (resting, focus, disabled, read-only, error, etc.). For detailed behaviour, accessibility, and styling guidance, refer to the general Input field guidelines.
Validation
When a multi-field input is validated, the error icon should appear in one consistent location without duplication. Since different field types handle errors differently, care must be taken in mixed configurations. For example, if two text inputs are grouped, the error icon should appear only in the first text field. If the group begins with a select field, the icon is instead displayed alongside the error message. At no point should more than one error icon be shown within a multi-field input.