Input

Usage

Text

import {Input} from '@/ui'
				
<Input
	label='Name'
	name='name'
	autocomplete='name'
/>

Checkbox

import {Input} from '@/ui'
				
<Input
	label='I agree to the Terms and Conditions'
	name='terms'
	type='checkbox'
	value='terms'
/>

Radios

import {Input} from '@/ui'
				
<Input
	label='17 years or younger'
	name='age'
	type='radio'
	value='child'
/>
<Input
	label='18 - 64 years'
	name='age'
	type='radio'
	value='adult'
	checked={true}
/>
<Input
	label='65 years or older'
	name='age'
	type='radio'
	value='senior'
/>

Password

import {Input} from '@/ui'
				
<Input
	label='Password'
	name='password'
	autocomplete='current-password'
	type='password'
	pattern='(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,}'
/>

Color

import {Input} from '@/ui'

const [color, setColor] = useState('#FFFFFF')

const onColorChange = (event: any) => {
	setColor(event.target.value)
}
				
<Input
	name='favourite'
	type='color'
	value={color}
	onchange={onColorChange}
/>

Date

import {Input} from '@/ui'

const [today, setToday] = useState('2023-08-03')
		
<Input
	label='Check-in'
	name='checkin'
	type='date'
	value={today}
	min={today}
/>

Email

import {Input} from '@/ui'
		
<Input
	label='Email'
	type='email'
	name='email'
	autocomplete='email'
/>

File

Upload Image

import {Input} from '@/ui'

const [image, SetImage] = useState({
	src: '',
	title: '',
})

const onFileChange = (e: any) => {
	const file = e.target.files[0]
	let image = {
		src: URL.createObjectURL(file),
		title: file.name,
	}
	SetImage(image)
}
		
<Input
	label='Upload Image'
	type='file'
	name='file'
	accept='image/*'
	className='hidden'
	onchange={onFileChange}
/>
<img
	src={image.src}
	alt={image.title}
/>

Number

import {Input} from '@/ui'
		
<Input
	label='Maximum of 9'
	labelStyles='items-center'
	name='pax'
	type='number'
	value={1}
	min={1}
	max={9}
/>

URL

import {Input} from '@/ui'
		
<Input
	label='Blog'
	name='blog'
	placeholder='HTTPS://'
	type='url'
/>