Skip to main content

Input

A form control that only allows single line data entry.

Installation​

Install

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

Import

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

Accessibility​

Accessibility Documentation(opens in new window)

Default​

Disabled​

Error​

Valid​

Loading​

Loading & Disabled​

Sizes​

Set form fields to a predefined width.

Properties​

Name
Description
  • className
    stringAdditional CSS classes to be applied
  • disabled
    booleanIndicates whether the input is disabled
  • doNotTrack
    booleanIndicates whether tracking is disabled for analytics
  • error
    booleanIndicates whether there is an error state
  • id
    stringThe unique identifier for the input element
  • loading
    booleanIndicates whether the input is in a loading state
  • value
    stringThe current value of the input
  • valid
    booleanIndicates whether the input is valid
  • name
    stringThe name of the input
  • placeholder
    stringThe placeholder text for the input
  • onChange*
    (event: ChangeEvent<HTMLInputElement>) => voidEvent handler for the input value change
  • onBlur
    (event?: FocusEvent<HTMLInputElement, Element>) => voidEvent handler for the input blur event
  • onFocus
    (event?: FocusEvent<HTMLInputElement, Element>) => voidEvent handler for the input focus event
  • autoComplete
    "off" | "on"
  • autoCapitalize
    "off" | "on"
  • autoCorrect
    "off" | "on"
  • type
    stringThe type of the input (e.g., text, password, etc.)
  • size
    SizeThe size of the input (1, 2, 3, or 4)

CSS Variables​