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 favouriteSportCricketTable TennisBadmintonCroquetSquashBaseball

Hobby *

Hobby *

Grocery List *

Grocery List *

Country Code of Nationality *

Country Code of Nationality *

Agree To Terms & Conditions

Select Color *BlackBlueGreenOrangePinkPurpleRedSilverWhiteYellow

Select Countries *IndiaAustraliaBangladeshIrelandSouth AfricaBrazilUnited Arab Emirates

Gender *

MaleFemaleOthers

Country *

IndiaAustraliaBangladeshIrelandSouth 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 *

​

Cannot select future dates

Time *

Time *

Date Time *

​

Bg Color *

HEX

RGB

HSV

Feedback *

Rich Text Editor

UndoRedo

Paragraph

Text alignment

Block quoteBoldItalicUnderlineStrikethrough

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:

booltrue

colors:

NULL

countries:

NULL

hobby:

string""

groceryList:[]

0 items

gender:

NULL

country:

string""

phoneNumber:

string"+91 9876598765"

darkTheme:

boolfalse

age:

int25

weight:

int60

rating:

NULL

dob:

NULL

time:

NULL

dateTime:

NULL

bgColor:

string"#007ABA"

feedback:

string""

disableAllFields:

boolfalse

resume:

undefined

countryCode:

undefined

}

errors:{}

0 items