Component Library
Browse and explore components
Input
An Input is a UI component used to collect text or data from the user.
Input sizing
Component Code
Copy Code
import { Label, TextInput } from 'flowbite-react'
const InputSizingCode = () => {
return (
<>
<div className='flex flex-col gap-4'>
<div>
<div className='mb-2 block'>
<Label htmlFor='small'>Small input</Label>
</div>
<TextInput
id='small'
type='text'
sizing='sm'
className='!form-control'
/>
</div>
<div>
<div className='mb-2 block'>
<Label htmlFor='base'>Base input</Label>
</div>
<TextInput
id='base'
type='text'
sizing='md'
className='!form-control'
/>
</div>
<div>
<div className='mb-2 block'>
<Label htmlFor='large'>Large input</Label>
</div>
<TextInput
id='large'
type='text'
sizing='lg'
className='!form-control'
/>
</div>
</div>
</>
)
}
export default InputSizingCode
Disabled inputs
Component Code
Copy Code
import { Label, TextInput } from 'flowbite-react'
const DisableInputsCode = () => {
return (
<>
<div className='flex flex-col gap-4'>
<Label htmlFor='disabledInput1'>API token</Label>
<TextInput
type='text'
id='disabledInput1'
placeholder='Disabled input'
className='!form-control'
disabled
/>
<Label htmlFor='disabledInput2'>Personal access token</Label>
<TextInput
type='text'
id='disabledInput2'
placeholder='Disabled readonly input'
disabled
className='!form-control'
readOnly
/>
</div>
</>
)
}
export default DisableInputsCode
Inputs With Shadow
Component Code
Copy Code
import Link from 'next/link'
import { Label, TextInput, Checkbox, Button } from 'flowbite-react'
const InputShadowCode = () => {
return (
<>
<form className='flex flex-col gap-4'>
<div>
<div className='mb-2 block'>
<Label htmlFor='email2'>Your email</Label>
</div>
<TextInput
id='email2'
type='email'
placeholder='name@niceadmin.com'
className='!form-control'
required
shadow
/>
</div>
<div>
<div className='mb-2 block'>
<Label htmlFor='password2'>Your password</Label>
</div>
<TextInput
id='password2'
type='password'
className='!form-control'
required
shadow
/>
</div>
<div>
<div className='mb-2 block'>
<Label htmlFor='repeat-password'>Repeat password</Label>
</div>
<TextInput
id='repeat-password'
type='password'
className='!form-control'
required
shadow
/>
</div>
<div className='flex items-center gap-2'>
<Checkbox id='agree' />
<Label htmlFor='agree' className='flex'>
I agree with the
<Link
href='#'
className='text-priamry hover:underline dark:text-primary'>
terms and conditions
</Link>
</Label>
</div>
<Button type='submit' color='primary' className='w-fit'>
Register new account
</Button>
</form>
</>
)
}
export default InputShadowCode
Input groups with icon
@
Component Code
Copy Code
import { Label, TextInput } from 'flowbite-react'
import { HiMail } from 'react-icons/hi'
const InputWithIconCode = () => {
return (
<>
<div>
<div className='pb-3'>
<div className='mb-2 block'>
<Label htmlFor='email4'>Your email</Label>
</div>
<TextInput
id='email4'
type='email'
icon={HiMail}
className='!form-control'
placeholder='name@niceadmin.com'
required
/>
</div>
<div className='pb-3'>
<div className='mb-2 block'>
<Label htmlFor='email4'>Your email</Label>
</div>
<TextInput
id='email4'
type='email'
rightIcon={HiMail}
className='!form-control'
placeholder='name@niceadmin.com'
required
/>
</div>
<div className='pb-3'>
<div className='mb-2 block'>
<Label htmlFor='email4'>Your email</Label>
</div>
<TextInput
id='email4'
type='email'
icon={HiMail}
rightIcon={HiMail}
className='!form-control'
placeholder='name@niceadmin.com'
required
/>
</div>
<div>
<div className='mb-2 block'>
<Label htmlFor='username3'>Username</Label>
</div>
<TextInput
id='username3'
placeholder='Bonnie Green'
addon='@'
className='!form-control'
required
/>
</div>
</div>
</>
)
}
export default InputWithIconCode
Form validation
Alright! Username available!
Oops! Username already taken!
Component Code
Copy Code
import { HelperText, Label, TextInput } from 'flowbite-react'
const FormValidationCode = () => {
return (
<>
<div className='flex flex-col gap-4'>
<div>
<div className='mb-2 block'>
<Label htmlFor='username3' color='success'>
Your name
</Label>
</div>
<TextInput
id='username'
placeholder='Bonnie Green'
required
color='success'
/>
<HelperText color='success'>
<span className='font-medium'>Alright!</span> Username available!
</HelperText>
</div>
<div>
<div className='mb-2 block'>
<Label htmlFor='username4' color='failure'>
Your name
</Label>
</div>
<TextInput
id='username4'
placeholder='Bonnie Green'
required
color='failure'
/>
<HelperText color='failure'>
<span className='font-medium'>Oops!</span> Username already taken!
</HelperText>
</div>
</div>
</>
)
}
export default FormValidationCode
Textarea element
Component Code
Copy Code
import { Label, Textarea } from 'flowbite-react'
const TextAreaCode = () => {
return (
<>
<div>
<div className='mb-2 block'>
<Label htmlFor='comment'>Your message</Label>
</div>
<Textarea
id='comment'
placeholder='Leave a comment...'
required
rows={8}
className=''
/>
</div>
</>
)
}
export default TextAreaCode
Select Input
Component Code
Copy Code
import { Label, Select } from 'flowbite-react'
const SelectInputCode = () => {
return (
<>
<div>
<div className='mb-2 block'>
<Label htmlFor='countries'>Select your country</Label>
</div>
<Select id='countries' required className='select-md'>
<option>United States</option>
<option>Canada</option>
<option>France</option>
<option>Germany</option>
</Select>
</div>
</>
)
}
export default SelectInputCode
File Upload
A profile picture is useful to confirm your are logged into your account
Component Code
Copy Code
import { Label, FileInput, HelperText } from 'flowbite-react'
const FileUploadEleCode = () => {
return (
<>
<div id='fileUpload'>
<div className='mb-2 block'>
<Label htmlFor='file'>Upload file</Label>
</div>
<FileInput id='file' />
<HelperText>
A profile picture is useful to confirm your are logged into your
account
</HelperText>
</div>
</>
)
}
export default FileUploadEleCode
File Upload Sizing
Component Code
Copy Code
import { Label, FileInput } from 'flowbite-react'
const FileUploadSizingsCode = () => {
return (
<>
<div className='flex flex-col gap-5'>
<div>
<div className='pb-2'>
<Label htmlFor='small-file-upload'>Small file input</Label>
</div>
<FileInput id='small-file-upload' sizing='sm' />
</div>
<div>
<div className='pb-2'>
<Label htmlFor='default-file-upload'>Default size file input</Label>
</div>
<FileInput id='default-file-upload' />
</div>
<div>
<div className='pb-2'>
<Label htmlFor='large-file-upload'>Large file input</Label>
</div>
<FileInput id='large-file-upload' sizing='lg' />
</div>
</div>
</>
)
}
export default FileUploadSizingsCode
DropZone
Component Code
Copy Code
import { Label, FileInput } from 'flowbite-react'
const DropZoneCode = () => {
return (
<>
<div className='flex w-full items-center justify-center'>
<Label
htmlFor='dropzone-file'
className='flex h-64 w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:border-gray-500 dark:hover:bg-gray-600'>
<div className='flex flex-col items-center justify-center pb-6 pt-5'>
<svg
className='mb-4 h-8 w-8 text-gray-500 dark:text-gray-400'
aria-hidden='true'
xmlns='http://www.w3.org/2000/svg'
fill='none'
viewBox='0 0 20 16'>
<path
stroke='currentColor'
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth='2'
d='M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2'
/>
</svg>
<p className='mb-2 text-sm text-gray-500 dark:text-gray-400'>
<span className='font-semibold'>Click to upload</span> or drag and
drop
</p>
<p className='text-xs text-gray-500 dark:text-gray-400'>
SVG, PNG, JPG or GIF (MAX. 800x400px)
</p>
</div>
<FileInput id='dropzone-file' className='hidden' />
</Label>
</div>
</>
)
}
export default DropZoneCode
Input Element Colors
Component Code
Copy Code
import { Label, TextInput } from 'flowbite-react'
const InputColorsCode = () => {
return (
<>
<div className='grid grid-cols-12 gap-8'>
<div className='md:col-span-6 col-span-12'>
<div className='mb-2 block'>
<Label htmlFor='input-gray' color='gray'>
Gray
</Label>
</div>
<TextInput
id='input-gray'
placeholder='Input Gray'
required
color='gray'
/>
</div>
<div className='md:col-span-6 col-span-12'>
<div className='mb-2 block'>
<Label htmlFor='input-info' color='info'>
Info
</Label>
</div>
<TextInput
id='input-info'
placeholder='Input Info'
required
color='info'
/>
</div>
<div className='md:col-span-6 col-span-12'>
<div className='mb-2 block'>
<Label htmlFor='input-success' color='success'>
Success
</Label>
</div>
<TextInput
id='input-success'
placeholder='Input Success'
required
color='success'
/>
</div>
<div className='md:col-span-6 col-span-12'>
<div className='mb-2 block'>
<Label htmlFor='input-failure' color='failure'>
Failure
</Label>
</div>
<TextInput
id='input-failure'
placeholder='Input Failure'
required
color='failure'
/>
</div>
<div className='md:col-span-6 col-span-12'>
<div className='mb-2 block'>
<Label htmlFor='input-warning' color='warning'>
Warning
</Label>
</div>
<TextInput
id='input-warning'
placeholder='Input Warning'
required
color='warning'
/>
</div>
</div>
</>
)
}
export default InputColorsCode