Skip to main content

Input Group

Component
Live

The Input Group component joins a single-line text input with a defined input context or available action.

FigmaCode

Usage​

The Input Group combines an input field with a symbol or button, providing context for the required input. It has 4 variants: prefix, suffix, button, and prefix with button.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { InputGroup } from "@iag/chroma-react-ui.components";

When to use​

Use Input Groups when the context of a users input would benefit from an attached symbol or button. For example, this could include a currency or percentage symbol to let the user know the input type and remove the need for the symbol to be typed by the user. The button variant assists in visually connecting the action required to the users input. For example, updating estimates or initiating a search.

When to avoid​

Avoid using Input Groups when a simple input field is sufficient and doesn’t require additional explanation or context. Consider the Input component instead.

Do

  • Do use clear and easily identifiable symbols.
  • Do provide help text for additional context or prompts.
  • Do use informative error messages for easier correction.
  • Do use placeholders to guide users on input format.

Don't

  • Don't modify the pre-defined styles beyond choosing a variant.

Additional Customisation​

Input Group symbol and button labels are customisable. The use of a prefix, suffix, or button can provide the user with valuable context for their input. Ensure you choose the variant that best suits the user's input needs and user flow.