Inputs

Form utilizing RHFTextField, RHFPasswordInput, RHFNumberInput, RHFTagsInput and RHFFileUploader with validation managed via react-hook-form's register options.

Inputs

Basic Input field with required validation

First Name *

Input with min & max length validation

Last Name

Input with pattern validation & label above form-field

Simple Password Field

Password *

Password Field with custom icons & validate rule

Confirm Password

Number Input with Typography as a helper text & return value as a number

Age

Optional

Tags Input with upto 4 visible tags when not focussed and custom limit text

Tags *

Tags Input with styled chips and all tags visible

Keywords

hello

world

foo

bar

lorem ipsum

Customized label and allow upload of at max 2 pdf files only

Upload Documents

Upload multiple images showing and show files uploaded

Upload Pictures

FileUploader with custom button

Upload Resume

Form State - Values & Errors

formValues:{11 items
firstName:string""
lastName:string"Jr."
email:string""
password:string""
confirmPassword:string""
keywords:[5 items
0:
string"hello"
1:
string"world"
2:
string"foo"
3:
string"bar"
4:
string"lorem ipsum"
]
age:undefined
tags:undefined
documents:undefined
pictures:undefined
resume:undefined
}

errors:{}0 items

DOCUMENTATION 📖

RHFTextField RHFNumberInput RHFPasswordInput RHFTagsInput RHFFileUploader

SOURCE CODE </>

Inputs with Register Options CodeSandbox - Inputs with Register Options