React Variety Form

Make a simple form for you need fast or you on injury time conditions

Text Box

Make your text box automatically works with validation number, email and show error as like you want to custom.

Basic

Text Box basic is text box without any custom like validation or style rounded. Basic is flat.

Full Name
{
    "fullName": ""
}
Required

Give a mandatory form on the text box. We can custom error mandatory or mandatory message.

Full Name*
{
    "fullName": ""
}
Email

Sometimes we need to give validation for email input before send as payload api.

Email*
{
    "email": ""
}
Number

Input validation for number necessary.

Phone Number*
{
    "phone": ""
}
Count Down

Want to know how many characters when you type on text box?

Short Status

0/50

{
    "status": ""
}
Disable & Selected

Deactivated text box to prevent user edit or give a marker what tex box dont allow to edit.

ID
{
    "id": "KA-898090"
}

Text Area

Give a wide text expression on text area and give validation required or disable.

Basic

Give count down inputed on right button component.

Address*

0/50

{
    "address": ""
}
Disable

Pevent user to edit and give disable style.

Address
{
    "address": "SCBD Kav. 50, Jakarta"
}

Select

Options are almost always there on any form. Now, you dont feel throuble again with element style for select.

Basic

Select basic is text box without any custom like validation or style rounded. Basic is flat.

Gender
{
    "gender": "male"
}
Required

Give a mandatory form on option. We can custom error mandatory or mandatory message.

Gender*
{
    "gender": ""
}
Disable & Selected

Props disable will prevent user to select anymore options.

Category
{
    "gender": "male"
}

Select Search

Search by keyword is helping you when fetching any data from server.

Basic

Select basic is tewxt box without any custom like validation or style rounded. Basic is flat.

Search*

Select Country

{
    "country": ""
}

Radio Button

You can add any options on radio button easy to make element on array.

Basic

For options you only create any element on an array. Then we will genarate optiosn as mush you create elements.

Last Education
{
    "education": ""
}

Check Box

Making agreement with checkbox inside declaration.

Basic

Checkbox is good option to create agreement. You only give declaration or term.

Agree*
{
    "agree": ""
}