Text Input

Basic

Let's say you want to create a simple textinput. So let's take an example how you do it, check it out below.

create a file at app/user/page.tsx

app/user/page.tsx

<AFormInput
  name={'username'}
  type={'text'}
  onChange={(value) => onInputChange(value)}
  onBlur={() => setcheckBox([])}
  defaultValue={'2'}
  disabled={false}
  readonly={false}
  placeholder={'Username'}
  validation={'required'}
/>

The above code will render TextInput like this.

Props

Name	Type	Required	Description
name	string	Yes	name of a input.
type	'text' , 'number' , 'email' , 'password' , 'url'	Yes	This chapter describes the different types for the HTML <input> tag element.
readonly	boolean	No	it specifies that an input field is read-only. A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it).
disabled	boolean	No	A disabled input element is unusable and un-clickable.
placeholder	boolean	No	The placeholder attribute specifies a short hint that describes the expected value of an input field.
maxlength	number	No	The maxlength attribute defines the maximum number of characters.
defaultValue	string	No	The default value is the value specified in the HTML value attribute.
autocomplete	boolean	No	The autocomplete attribute specifies whether or not an input field should have autocomplete enabled.
icon	string	Yes	Icon inside the input element tag are used widely to add icons on the webpages.
iconPosition	"prefix" , "postfix"	No	You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document.

Events

Name	Type	Required	Description
onChange	(value: string) => void	No	The onchange event occurs when the value of an HTML element is changed.
onBlur	() => void	No	The onblur event occurs when an HTML element loses focus. The onblur event is often used on input fields. The onblur event is often used with form validation (when the user leaves a form field).