Input group
Input groups combine several components, such as buttons and labels, to an input.
Published: Last updated:
Overview
Input groups pair an input with helpful adjacent elements, such as addons (prefixes/suffixes) or inline buttons to clarify context, reduce typing, and speed up data entry. Typical uses include currency symbols, units, or quick-fill actions like Today/Tomorrow.
When to use
- When an input’s value benefits from immediate context (for example, % for percentage, or miles for distance).
- When shortcut actions can help populate the field (for example, Today / Tomorrow).
- When you want to keep related affordances visually connected to the input rather than scattering controls across the form.
When not to use
- If the context can be handled by the field label or helper text alone, avoid redundant addons.
- If you need multiple complex controls around the input (menus, toggles, validation summaries): consider a dedicated composite pattern instead to avoid crowding.
|
Type
|
Purpose
|
|---|---|
| Start addon | Provides leading context, such as a prefix, to clarify the expected input. |
| End addon | Supplies trailing context, such as a unit (miles, %), to indicate how the input value will be used. |
| Action button | Offers quick, inline actions directly related to the field’s value, such as inserting today / tomorrow dates. |
Input types
Input groups support several field types to suit different data-entry needs. The most common is a text input, ideal for free-form entry. A number input is available when only numeric values are valid and increment controls are helpful. For predefined choices, use a select or dropdown, allowing users to pick from a structured list of options while still benefiting from the additional context or actions provided by the input group.
Size
The size of the input group follows the same sizing as any of the other input components and the response buttons.
Addon labels
Keep addons short and unambiguous, typically a symbol or one word. Prefer full words for units when space allows (for example, miles over mi) to avoid ambiguity.
Button labels
Button labels should be actionable and specific (Today, tomorrow) and sentence case, consistent with Buckholt response button guidance.
States
Input groups share the same interactive states as other input components and response buttons. Addons reflect the styling used for disabled and read-only states.