Skip to main content Skip to navigation Skip to search
Clarity Design System

Input Group

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

Usage

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.

Behavior

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.

States

Enabled

Use when interactive and ready for input.

Active

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

Disabled

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

Unreachable domain

Error

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

Success

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

Layout

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

Horizontal

.com Helper message