Text Input - Keep React

Input Component is a fundamental user interface element used to collect user input or data in various forms, such as text, numbers, dates, or selections. It provides a space where users can type or select information, allowing them to interact with the application and provide necessary inputs.

Table of Contents#

Default Text Input#

The Default Text Input is a standard user interface element used for capturing text input from users.

Input Field With Level#

The Input Field With Level component enhances the standard text input by introducing hierarchical levels. This feature is particularly useful when capturing text input within a structured context.

Input Field With Helper text#

The Input Field With Helper Text component includes a standard text input enhanced with informative helper text.

Info that helps a user with this field.

Input With Icon#

The Input Field With Icon component combines a standard text input with an accompanying icon.Icons can provide context, suggest input type, or offer additional information to users.

Info that helps a user with this field.

Input With Addon#

The Input Field With Addon component pairs a standard text input with a functional addon element. This addon can be positioned on either the left or right side of the input field.

Input With Addon And Icon#

The Input With Addon and Icon component offers a comprehensive input experience by combining an icon and a functional addon element.

Invalid Input Field URL#

The Input Field with URL component combines various elements to facilitate URL input. It includes a label to provide context, a text input field for entering the URL.


Input Field Color Variant#

The Input Field with Color Variant component offers a customizable input experience by incorporating color variations.Available color variants for the input field are : gray info success error and warning

Input Without Border#

The Border less Input Field component offers a minimalist approach to text input by removing the standard border. To do that, you need to add a props called border={false}.

API Reference#

Explore the available props for the text input component

sizingSets the size of the input text component.
withBgApplies a background style to the input text component.booleanfalse
borderDisplays a border around the input text component.booleanfalse
shadowApplies a shadow effect to the input text component.booleanfalse
disabledDisables interactions with the input text component.booleanfalse
helperTextAdditional helper text or information related to the input text.ReactNodetext
addonAdditional content or icons added as an input text addon.ReactNode<Lock/>
addonPositionSpecifies the position of the input text addon.
iconIcon displayed within the input text component.ReactNode<EyeSlash/>
iconPositionSpecifies the position of the input text icon.
colorSpecifies the color variant of the input text component.
valueValue of the input text field.stringNone
addonStyleCustom class for style addonstringNone
iconStyleCustom class for style iconstringNone
handleOnChangeCallback function when the input text value changes.(e: ChangeEvent) => voidFunction