Quick nav

Input

Input enable the user to interact with and used for freeform data entry.

Version 2.3.2

Installation

To install @igloo-ui/input in your project, you will need to run the following command using npm:

npm install @igloo-ui/input

If you prefer Yarn, use the following command instead:

yarn add @igloo-ui/input

Then to use the component in your code just import it!

import Input from '@igloo-ui/input';

<Input type="text" placeholder="input type text" />;

Prop	Type	Default	Description
`className`	string	-	Add class names to the surrounding DOM container.
`error`	boolean	-	Form.ValidatedField state. True if has error.
`type`	InputType		Specifies the type to display
`isCompact`	boolean	-	True for a compact appearance.
`value`	string \| number	-	Specifies the value inside the input.
`autoFocus`	boolean	-	True if you need the input to be focus on page load.
`disabled`	boolean	-	True if you need the input to be readonly.
`onChange`	(e: ChangeEvent<HTMLInputElement>) => void	-	Function called when the value changes.
`dataTest`	string	-	Add a data-test tag for automated tests
`prefixIcon`	ReactNode	-	Use a prefix for add an icon before the input text
`suffixIcon`	ReactNode	-	Use a suffix for add an icon after the input text
`maxLength`	number	-	The maximum number of characters allowed. Required if "showCharactersIndicator" is enabled. Should not be used for type 'number' inputs
`showCharactersIndicator`	boolean	-	True to display the number of remaining allowed characters on the right of the input. Requires a valid value in the "maxLength" prop.