Skip to main content Skip to navigation Skip to search

Input Group

An input-group combines closely related input controls into a single visual control.control.


Use an input group when the user needs to submit complex information comprised of separate components such as a location consisting of a prefix such as: ftp / http / https, a domain, and a suffix. An input group provides a way for the user to supply these connceted pieces of information while treating them as one.

Input groups may use any textual input controls including input, select, datalist, and date picker.


An input group can behave in all the ways a standard single input will. It may be configured to validate its contents while the use if supplying the input, on blur or eneter, or it may be used a part of a form and included in the forms validation and submission process.



Use when interactive and ready for input.


Use when selected by a user with an input method, such as mouse or keyboard.


Use when not interactive. For example, when a user does not have permissions to edit the input.

Unreachable domain


Use to communicate a user or system error. This validation can happen when the user moves away from the input or after attempting to submit a form. For example, invalid input or username already taken.

Domain ready


Use to provide real-time feedback immediately after a user’s input. For example, username available.


Input groups only provide a horizontal layout because their content has linear continuity. See more layout guidelines on the form page.


.com Helper message