Skip to main content

Input Format

Defines a string expression that constrains user input to ensure data integrity by preventing user errors.

Installation​

Install

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

Import

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

Accessibility​

Accessibility Documentation(opens in new window)

Currency​

Currency No Decimals​

Percentage​

Credit Card​

Phone number​

BSB​

Time​

Postcode​

Date​

Date Reduced​

Disabled​

Valid​

Error​

Properties​

Name
Description
  • className
    string
  • decimalScale
    numbernumber of decimal places allowed
  • decimalSeparator
    stringShould you wish to change from the default "."
  • disabled
    booleanSet the input to disabled
  • error
    booleanIndicates whether the input is in error
  • format
    stringthe pattern (using #) to use for formatting eg. a credit card is "#### #### #### ####"
  • id
    stringHTML id attribute for the component
  • isNumericString
    booleanIf value is passed as string representation of numbers (unformatted) then this should be passed as true
  • placeholder
    stringplacholder text to display in the input
  • mask
    string[]If mask defined, component will show non entered placed with masked value
  • maxLength
    numberSet the maximum characters allowed in the input
  • onChange*
    (event: ChangeEvent<HTMLInputElement>, value: string) => voidCallback function for the onChange event
  • prefix
    stringcharacters to display before the input text
  • suffix
    stringcharacters to display after the input text
  • thousandSeparator
    booleanShould the string display a thousands separator comma
  • valid
    booleanIndicates whether the input is valid
  • value
    string | numberThe current value of the input