Component Library
Browse and explore components
Input
An Input is a UI component that allows users to enter text or data into a form field.
Input With Label
Component Code
Copy Code
import { Field, Input, Label } from '@headlessui/react'
const InputWithLblCode = () => {
return (
<div>
<div>
<Field className='w-full mb-3'>
<Label className='mb-2 block text-ld'>Name</Label>
<Input
type='text'
className='ui-form-control rounded-md py-2.5 px-3 w-full'
name='full_name'
/>
</Field>
<Field className='w-full mb-3'>
<Label className='mb-2 block text-ld'>Email</Label>
<Input
type='email'
className='ui-form-control rounded-md py-2.5 px-3 w-full'
name='full_name'
/>
</Field>
<Field className='w-full '>
<Label className='mb-2 block text-ld'>Password</Label>
<Input
type='password'
className='ui-form-control rounded-md py-2.5 px-3 w-full'
name='full_name'
/>
</Field>
</div>
</div>
)
}
export default InputWithLblCode
Square Input With Label
Component Code
Copy Code
import { Field, Input, Label } from '@headlessui/react'
const SquareWithLblCode = () => {
return (
<div>
<div>
<Field className='w-full mb-3'>
<Label className='mb-2 block text-ld'>Name</Label>
<Input
type='text'
className='ui-form-control rounded-md py-2.5 px-3 w-full'
name='full_name'
/>
</Field>
<Field className='w-full mb-3'>
<Label className='mb-2 block text-ld'>Email</Label>
<Input
type='email'
className='ui-form-control rounded-md py-2.5 px-3 w-full'
name='full_name'
/>
</Field>
<Field className='w-full '>
<Label className='mb-2 block text-ld'>Password</Label>
<Input
type='password'
className='ui-form-control rounded-md py-2.5 px-3 w-full'
name='full_name'
/>
</Field>
</div>
</div>
)
}
export default SquareWithLblCode
Input With Description
Use your real name so people will recognize you.
Use your real Email so people will recognize you.
Use your real Password so people will recognize you.
Component Code
Copy Code
import { Description, Field, Input, Label } from '@headlessui/react'
const InputWithDescriptionCode = () => {
return (
<div>
<div>
<Field className='w-full mb-3'>
<Label className='mb-1 block text-ld'>Name</Label>
<Description className='text-xs'>
Use your real name so people will recognize you.
</Description>
<Input
type='text'
className='ui-form-control rounded-md py-2.5 px-3 w-full mt-2'
name='full_name'
/>
</Field>
<Field className='w-full mb-3'>
<Label className='mb-1 block text-ld'>Email</Label>
<Description className='text-xs'>
Use your real Email so people will recognize you.
</Description>
<Input
type='email'
className='ui-form-control rounded-md py-2.5 px-3 w-full mt-2'
name='full_name'
/>
</Field>
<Field className='w-full '>
<Label className='mb-1 block text-ld'>Password</Label>
<Description className='text-xs'>
Use your real Password so people will recognize you.
</Description>
<Input
type='password'
className='ui-form-control rounded-md py-2.5 px-3 w-full mt-2'
name='full_name'
/>
</Field>
</div>
</div>
)
}
export default InputWithDescriptionCode
Disabled Input With Description
Use your real name so people will recognize you.
Use your real Email so people will recognize you.
Use your real Password so people will recognize you.
Component Code
Copy Code
import { Description, Field, Input, Label } from '@headlessui/react'
const DisableInputCode = () => {
return (
<>
<Field className='w-full mb-3' disabled>
<Label className='mb-1 block text-ld data-[disabled]:opacity-50'>
Name
</Label>
<Description className='text-xs data-[disabled]:opacity-50'>
Use your real name so people will recognize you.
</Description>
<Input
type='text'
className='ui-form-control rounded-md py-2.5 px-3 w-full mt-2 data-[disabled]:opacity-50'
name='full_name'
/>
</Field>
<Field className='w-full mb-3' disabled>
<Label className='mb-1 block text-ld data-[disabled]:opacity-50'>
Email
</Label>
<Description className='text-xs data-[disabled]:opacity-50'>
Use your real Email so people will recognize you.
</Description>
<Input
type='email'
className='ui-form-control rounded-md py-2.5 px-3 w-full mt-2 data-[disabled]:opacity-50'
name='full_name'
/>
</Field>
<Field className='w-full ' disabled>
<Label className='mb-1 block text-ld data-[disabled]:opacity-50'>
Password
</Label>
<Description className='text-xs data-[disabled]:opacity-50'>
Use your real Password so people will recognize you.
</Description>
<Input
type='password'
className='ui-form-control rounded-md py-2.5 px-3 w-full mt-2 data-[disabled]:opacity-50'
name='full_name'
/>
</Field>
</>
)
}
export default DisableInputCode