Inputs

A React Hook Form example using RHFTextField, RHFPasswordInput, RHFNumberInput, RHFTagsInput and RHFFileUploader. Validation using registerOptions.

Disable all fields

Basic Input field with required validation and customOnChange

First Name *

Input with min & max length validation and renderError

Last Name

Enter min 4 and max 10 characters

Input with pattern validation & label above form-field with custom ids

Simple Password Field with hidden label

Password Field with custom icons & validate rule

Confirm Password

Number Input with integer value & Typography as a helper text

Age

Optional

Number Input with decimal place limit and integer stepAmount

Weight

Press Arrow Up/Down keys to update input value by 2; negative values are not allowed

Number Input with 2 decimal places and stepAmount

Balance *

Press Arrow Up/Down keys to update input value by 0.5

Tags Input with upto 4 visible tags, and custom onTagAdd, onTagDelete and onTagPaste events

Tags *

Enter min 3 characters; no 'sh' substring allowed

Tags Input with styled chips, custom delimiter and all tags visible

Keywords

hello

world

foo

bar

lorem ipsum

Use '|' to separate tags; max 8 tags allowed

Customized label and allow upload of at max 3 pdf files only; drag and drop disabled

Upload Documents

Upload multiple images showing, with renderFileItem function. customOnChange function prevents upload if total files exceed the specified file limit

Upload Pictures

If sum of sizes of files exceed 20 MB, further uploads will not be permitted

FileUploader with custom button and customized dropzone style

Upload Resume