RHF-Mui Components
Introduction
Inputs
Select
Autocomplete
Checkbox & RadioGroup
Switch, Slider & Rating
Date & Time Pickers
Miscellaneous Components
Customization
Complete Form
Complete Form with Joi
Complete Form with Joi
A complete form showcasing all components from this package, with validation handled by Joi.
Joi Form
Disable All Fields
Email
*
Age
*
Password
*
Favourite Foods
*
Rajma Rice
Favourite Foods
*
Resume
Favourite Color
*
Favourite Color
*
Select Sport(s)
*
Badminton
IPL Teams
*
IPL Teams
*
Favourite Sport
*
Select favouriteSport
Cricket
Table Tennis
Badminton
Croquet
Squash
Baseball
Hobby
*
Hobby
*
Grocery List
*
Grocery List
*
Country Code of Nationality
*
Country Code of Nationality
*
Agree To Terms & Conditions
Select Color
*
Black
Blue
Green
Orange
Pink
Purple
Red
Silver
White
Yellow
Select Countries
*
India
Australia
Bangladesh
Ireland
South Africa
Brazil
United Arab Emirates
Gender
*
Male
Female
Others
Country
*
India
Australia
Bangladesh
Ireland
South Africa
Brazil
United Arab Emirates
Enable Dark Theme
Age
*
min:10; max:100
Rating
*
1 Star
2 Stars
3 Stars
4 Stars
5 Stars
6 Stars
7 Stars
8 Stars
9 Stars
10 Stars
Empty
Date of Birth
*
Cannot select future dates
Time
*
Time
*
Date Time
*
Bg Color
*
HEX
RGB
HSV
Feedback
*
Rich Text Editor
Undo
Redo
Paragraph
Text alignment
Block quote
Bold
Italic
Underline
Strikethrough
Show more items
Phone Number
*
Submit
Form State - Values & Errors
formValues
:
{
27 items
email
:
string
"hello@example.com"
password
:
string
""
favouriteFoods
:
[
1 item
0
:
string
"Rajma Rice"
]
favouriteColor
:
string
""
sports
:
[
1 item
0
:
string
"Badminton"
]
iplTeams
:
[
]
0 items
favouriteSport
:
string
""
agreeTnC
:
bool
true
colors
:
NULL
countries
:
NULL
hobby
:
string
""
groceryList
:
[
]
0 items
gender
:
NULL
country
:
string
""
phoneNumber
:
string
"+91 9876598765"
darkTheme
:
bool
false
age
:
int
25
weight
:
int
60
rating
:
NULL
dob
:
NULL
time
:
NULL
dateTime
:
NULL
bgColor
:
string
"#007ABA"
feedback
:
string
""
disableAllFields
:
bool
false
resume
:
undefined
countryCode
:
undefined
}
errors
:
{
}
0 items
DOCUMENTATION 📖
RHFTextField
RHFNumberInput
RHFPasswordInput
RHFTagsInput
RHFFileUploader
RHFSelect
RHFNativeSelect
RHFAutocomplete
RHFMultiAutocomplete
RHFCountrySelect
RHFCheckbox
RHFCheckboxGroup
RHFSlider
RHFSwitch
RHFRating
RHFRadioGroup
RHFDatePicker
RHFTimePicker
RHFDateTimePicker
RHFColorPicker
RHFRichTextEditor
RHFPhoneInput
Joi
SOURCE CODE </>
Complete Form with Joi
CodeSandbox - Complete Form with Joi
Made with ❤️ by Nish!!!!