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.

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.

Label

Input Field With Helper text#

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

Label

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.

Label

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.

Password

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.

Enter URL

http://

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

Gray Color Input

Info Color Input

Error Color Input

Warning Color Input

Success Color Input

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}.

Gray Color Input

Info Color Input

Error Color Input

Warning Color Input

Success Color Input

API Reference#

Explore the available props for the text input component

Property	Description	Type	Default
sizing	Sets the size of the input text component.	sm md lg	md
withBg	Applies a background style to the input text component.	boolean	false
border	Displays a border around the input text component.	boolean	false
shadow	Applies a shadow effect to the input text component.	boolean	false
disabled	Disables interactions with the input text component.	boolean	false
helperText	Additional helper text or information related to the input text.	ReactNode	text
addon	Additional content or icons added as an input text addon.	ReactNode	<Lock/>
addonPosition	Specifies the position of the input text addon.	left right	left
icon	Icon displayed within the input text component.	ReactNode	<EyeSlash/>
iconPosition	Specifies the position of the input text icon.	left right	right
color	Specifies the color variant of the input text component.	gray info error warning success	gray
value	Value of the input text field.	string	None
handleOnChange	Callback function when the input text value changes.	(e: ChangeEvent) => void	Function