Skip to main content

Input Group

An input with the ability to add an optional symbol and button.

Installation​

Install

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

Import

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

Accessibility​

Accessibility Documentation(opens in new window)

Input Group with Prefix​

Can be displayed with a symbol to the left.

Input Group with Suffix​

Can be displayed with a symbol to the right.

Input Group with Button​

Can be displayed with a button to the right.

Input Group with Prefix and Button​

Error​

Disabled​

Properties​

Name
Description
  • button
    IInputButtonButton configuration for the input group
  • className
    stringAdditional CSS classes to be applied
  • disabled
    booleanIndicates whether the input is disabled
  • error
    booleanIndicates whether there is an error with the input
  • id
    stringHTML ID attribute of the input group
  • onChange*
    (event: ChangeEvent<HTMLInputElement>) => voidChange event handler for the input
  • optional
    booleanIndicates whether the input is optional
  • placeholder
    stringPlaceholder text for the input
  • prefix
    stringThe prefix value to display such as "$"
  • required
    booleanIndicates whether the input is required
  • suffix
    stringThe suffix value to display such as "%"
  • type
    stringThe input type, default value is "input"
  • value*
    stringThe current value of the input

CSS Variables​