Igloo branding

Input

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

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

Usage

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

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

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

API

PropTypeDescription
classNamestringAdd class names to the surrounding DOM container.
errorbooleanForm.ValidatedField state. True if has error.
typeInputTypeSpecifies the type to display
isCompactbooleanTrue for a compact appearance.
valuestring | numberSpecifies the value inside the input.
autoFocusbooleanTrue if you need the input to be focus on page load.
disabledbooleanTrue if you need the input to be readonly.
onChange(e: ChangeEvent<HTMLInputElement>) => voidFunction called when the value changes.
dataTeststringAdd a data-test tag for automated tests
prefixIconReactNodeUse a prefix for add an icon before the input text
suffixIconReactNodeUse a suffix for add an icon after the input text
maxLengthnumberThe maximum number of characters allowed. Required if "showCharactersIndicator" is enabled. Should not be used for type 'number' inputs
showCharactersIndicatorbooleanTrue to display the number of remaining allowed characters on the right of the input. Requires a valid value in the "maxLength" prop.