Input Groups

Input groups function as containers to organize multiple input elements and their accompanying components cohesively. This helps developers create consistent and accessible forms.

Overview

Use this component for the following form fields: date-picker, input, multi-select, select, and text area.

Input groups come in two sizes: small and medium, with medium being the default. The ['medium'] size has a tablet/mobile breakpoint of 1024 px. On tablet and mobile screens, it will shrink to better fit the limited content area, while still retaining a large touch target area. Use ['small'] input groups only with specific components, such as data tables.

Medium

Small

Design and Layout

Anatomy

Element	Description
1. Input Group Container	The input group container holds all components
2. Label	Text for label element
3. Optional	Optional note can be added for non-required fields
4. Tooltip	Tooltips can be added to provide more context
5. Input	Inputs include date pickers, inputs, multi-selects, selects, and text areas
6. Help Text	Displays help text such as formatting requirements
7. Input Notification	Displays error messages

Using Input Groups with a Grid

Use input group in conjunction with the Grid to lay out fields horizontally. Apply grid columns directly to input groups, as in the following example. See Using the Grid with Forms for layout guidance.

Style Variations

Input groups have different colors, effects, and line weights depending on their state. These differences provide visual feedback to users and enhance usability.

STATE	EXAMPLE
Default
Focus
Error
Disabled

Dos and Don'ts

Do use input group containers with date pickers, inputs, multi-selects, selects, and text areas.

Don't

Don't use input group containers with search type inputs.

Do organize input groups into form fieldsets if there are more than three input groups on a page, or if the page contains other content.