Form

Usage

import { Form, Input, Range, Autocomplete } from '@/ui'
				
<Form 
	legend='Input Types'
	btnLabel='Submit'
	name='inputexamples'
	btnStyles='mx-auto rounded'
	onSubmit={onsubmit}
	className='w-96 rounded bg-white p-4 text-center'
>
		<!-- Enter form content -->

		<p>
			What's your name?
		</p>

		<Input
			label='Name'
			name='name'
		/>
</Form>

Inputs

The following shows examples of input[type='text'], input[type='checkbox'], input[type='radio'], input[type='password'], input[type='color'], input[type='date'], input[type='email'], input[type='file'], input[type='number'], input[type='range'], input[type='text'] list, Radio Group

Input Types

What's your name?

Name

How do you take tea?

Milk Sugar

How old are you?

17 years or younger 18 - 64 years 65 years or older

Radio Group

🍏 🍌 🍇 🍋

Enter your password

Password Toggle password visibility

Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters

Choose your favourite colour

#FFFFFF

Select dates

Check-in Check-out

What's your e-mail address?

Email

What is your avatar?

Upload Image

How many passengers?

Maximum of 9

Using Counter component

Minus1 Add

Maximum of 9

Volume Control

Volume: 0.5

Social Links

Blog LinkedIn

Where are you from?

Country

Switch?

I agree to terms and conditionsI agree to terms and conditionsThin version

SubmitCancel

Examples

Login

import { Login } from '@/features'

const onsubmit = (event: any) => {
	// do something...
}

<Login
	method='post'
	btnStyles='rounded'
	onSubmit={onsubmit}
	className='w-80 rounded bg-white p-4 text-center'
/>

Register / Sign-up

import { Register } from '@/features'

const onsubmit = (event: any) => {
	// do something...
}

<Register
	btnStyles='rounded'
	onSubmit={onsubmit}
	className='w-80 rounded bg-white p-4 text-center'
/>

User

import { User } from '@/features'

const onsubmit = (event: any) => {
	// do something...
}

<Register
	btnStyles='rounded'
	onSubmit={onsubmit}
	className='w-80 rounded bg-white p-4 text-center'
/>

Card Details

import { CreditCard } from '@/features'

const onsubmit = (event: any) => {
	// do something...
}

<CreditCard
	btnStyles='rounded'
	onSubmit={onsubmit}
	className='w-80 rounded bg-white p-4 text-center'
/>

Newsletter

import { NewsLetter } from '@/features'

const onsubmit = (event: any) => {
	// do something...
}

<NewsLetter
	btnStyles='rounded'
	onSubmit={onsubmit}
	className='w-80 rounded bg-white p-4 text-center'
/>