When the disabled checkbox is clicked, the disabled prop is being passed individually for each component, which prevents any input, but still allows the form to be submitted with all the fields.

Email *

Age *

Password *

Favourite Foods *

Rajma Rice

Favourite Foods *

Type a dish and press Enter

Resume

Favourite Color *

Select Sport(s) *

Badminton

IPL Teams *

Favourite Sport *

Hobby *

Grocery List *

Country Code of Nationality *

Agree To Terms & Conditions

Select Color *BlackBlueGreenOrangePinkPurpleRedSilverWhiteYellow

Select Countries *IndiaAustraliaSpainIrelandSouth AfricaBrazilUnited Arab Emirates

Gender *

MaleFemaleOthers

Country *

IndiaAustraliaSpainIrelandSouth AfricaBrazilUnited Arab Emirates

Enable Dark Theme

Age *

min:10; max:100

Rating *1 Star2 Stars3 Stars4 Stars5 Stars6 Stars7 Stars8 Stars9 Stars10 StarsEmpty

Date of Birth *

DD MMMM YYYY

Cannot select future dates

Time *

hh:mm

Time *

Date Time *

MM/DD/YYYY hh:mm

Bg Color *

HEX

RGB

HSV

Phone Number *

Complete Form — React Hook Form + Joi

Every component in this package wired into a single React Hook Form, validated by a Joi schema via @hookform/resolvers, with a live values-and-errors readout.

Joi Form

Form State - Values & Errors