React Forms - Flowbite
Use the Tailwind CSS form and input elements such as checkboxes, radios, textarea, text inputs to collect information from users with Flowbite
Default form
<form className="flex flex-col gap-4">
<div>
<div className="mb-2 block">
<Label
htmlFor="email1"
value="Your email"
/>
</div>
<TextInput
id="email1"
placeholder="name@flowbite.com"
required
type="email"
/>
</div>
<div>
<div className="mb-2 block">
<Label
htmlFor="password1"
value="Your password"
/>
</div>
<TextInput
id="password1"
required
type="password"
/>
</div>
<div className="flex items-center gap-2">
<Checkbox id="remember" />
<Label htmlFor="remember">
Remember me
</Label>
</div>
<Button type="submit">
Submit
</Button>
</form>Input sizing
<div className="flex flex-col gap-4">
<div>
<div className="mb-2 block">
<Label
htmlFor="small"
value="Small input"
/>
</div>
<TextInput
id="small"
sizing="sm"
type="text"
/>
</div>
<div>
<div className="mb-2 block">
<Label
htmlFor="base"
value="Base input"
/>
</div>
<TextInput
id="base"
sizing="md"
type="text"
/>
</div>
<div>
<div className="mb-2 block">
<Label
htmlFor="large"
value="Large input"
/>
</div>
<TextInput
id="large"
sizing="lg"
type="text"
/>
</div>
</div>Disabled inputs
<div className="flex flex-col gap-4">
<Label htmlFor="disabledInput1">
API token
</Label>
<TextInput
disabled
id="disabledInput1"
placeholder="Disabled input"
type="text"
/>
<Label htmlFor="disabledInput2">
Personal access token
</Label>
<TextInput
disabled
id="disabledInput2"
placeholder="Disabled readonly input"
readOnly
type="text"
/>
</div>Shadow inputs
<form className="flex flex-col gap-4">
<div>
<div className="mb-2 block">
<Label
htmlFor="email2"
value="Your email"
/>
</div>
<TextInput
id="email2"
placeholder="name@flowbite.com"
required
shadow
type="email"
/>
</div>
<div>
<div className="mb-2 block">
<Label
htmlFor="password2"
value="Your password"
/>
</div>
<TextInput
id="password2"
required
shadow
type="password"
/>
</div>
<div>
<div className="mb-2 block">
<Label
htmlFor="repeat-password"
value="Repeat password"
/>
</div>
<TextInput
id="repeat-password"
required
shadow
type="password"
/>
</div>
<div className="flex items-center gap-2">
<Checkbox id="agree" />
<Label htmlFor="agree">
I agree with the
<LinkComponent
className="text-cyan-600 hover:underline dark:text-cyan-500"
href="/forms"
>
terms and conditions
</LinkComponent>
</Label>
</div>
<Button type="submit">
Register new account
</Button>
</form>Helper text
We’ll never share your details. Read ourPrivacy Policy.
<div>
<div className="mb-2 block">
<Label
htmlFor="email3"
value="Your email"
/>
</div>
<TextInput
helperText={<>We’ll never share your details. Read our<LinkComponent className="font-medium text-cyan-600 hover:underline dark:text-cyan-500" href="/forms">Privacy Policy</LinkComponent>.</>}
id="email3"
placeholder="name@flowbite.com"
required
type="email"
/>
</div>Input element with icon on the left side
<div>
<div className="mb-2 block">
<Label
htmlFor="email4"
value="Your email"
/>
</div>
<TextInput
icon={HiMail}
id="email4"
placeholder="name@flowbite.com"
required
type="email"
/>
</div>Input element with icon on the right side
<div>
<div className="mb-2 block">
<Label
htmlFor="email4"
value="Your email"
/>
</div>
<TextInput
id="email4"
placeholder="name@flowbite.com"
required
rightIcon={HiMail}
type="email"
/>
</div>Input element with icon on both sides
<div>
<div className="mb-2 block">
<Label
htmlFor="email4"
value="Your email"
/>
</div>
<TextInput
icon={HiMail}
id="email4"
placeholder="name@flowbite.com"
required
rightIcon={HiMail}
type="email"
/>
</div>Input element with addon
@
<div>
<div className="mb-2 block">
<Label
htmlFor="username"
value="Username"
/>
</div>
<TextInput
addon="@"
id="username3"
placeholder="Bonnie Green"
required
/>
</div>Success and error validation
Alright! Username available!
Oops! Username already taken!
<div className="flex flex-col gap-4">
<div>
<div className="mb-2 block">
<Label
color="success"
htmlFor="username3"
value="Your name"
/>
</div>
<TextInput
color="success"
helperText={<><span className="font-medium">Alright!</span>Username available!</>}
id="username"
placeholder="Bonnie Green"
required
/>
</div>
<div>
<div className="mb-2 block">
<Label
color="failure"
htmlFor="username4"
value="Your name"
/>
</div>
<TextInput
color="failure"
helperText={<><span className="font-medium">Oops!</span>Username already taken!</>}
id="username4"
placeholder="Bonnie Green"
required
/>
</div>
</div>Input colors
<div className="flex flex-col gap-4">
<div>
<div className="mb-2 block">
<Label
color="gray"
htmlFor="input-gray"
value="Gray"
/>
</div>
<TextInput
color="gray"
id="input-gray"
placeholder="Input Gray"
required
/>
</div>
<div>
<div className="mb-2 block">
<Label
color="info"
htmlFor="input-info"
value="Info"
/>
</div>
<TextInput
color="info"
id="input-info"
placeholder="Input Info"
required
/>
</div>
<div>
<div className="mb-2 block">
<Label
color="success"
htmlFor="input-success"
value="Success"
/>
</div>
<TextInput
color="success"
id="input-success"
placeholder="Input Success"
required
/>
</div>
<div>
<div className="mb-2 block">
<Label
color="failure"
htmlFor="input-failure"
value="Failure"
/>
</div>
<TextInput
color="failure"
id="input-failure"
placeholder="Input Failure"
required
/>
</div>
<div>
<div className="mb-2 block">
<Label
color="warning"
htmlFor="input-warning"
value="Warning"
/>
</div>
<TextInput
color="warning"
id="input-warning"
placeholder="Input Warning"
required
/>
</div>
</div>Textarea
<div id="textarea">
<div className="mb-2 block">
<Label
htmlFor="comment"
value="Your message"
/>
</div>
<Textarea
id="comment"
placeholder="Leave a comment..."
required
rows={4}
/>
</div>Select input
<div id="select">
<div className="mb-2 block">
<Label
htmlFor="countries"
value="Select your country"
/>
</div>
<Select
id="countries"
required
>
<option>
United States
</option>
<option>
Canada
</option>
<option>
France
</option>
<option>
Germany
</option>
</Select>
</div>Checkbox
For orders shipped from Flowbite from € 25 in books or € 29 on other categories
<div
className="flex flex-col gap-4"
id="checkbox"
>
<div className="flex items-center gap-2">
<Checkbox
defaultChecked
id="accept"
/>
<Label htmlFor="accept">
I agree to the
<LinkComponent
className="text-cyan-600 hover:underline dark:text-cyan-500"
href="/forms"
>
terms and conditions
</LinkComponent>
</Label>
</div>
<div className="flex items-center gap-2">
<Checkbox id="promotion" />
<Label htmlFor="promotion">
I want to get promotional offers
</Label>
</div>
<div className="flex items-center gap-2">
<Checkbox id="age" />
<Label htmlFor="age">
I am 18 years or older
</Label>
</div>
<div className="flex gap-2">
<div className="flex h-5 items-center">
<Checkbox id="shipping" />
</div>
<div className="flex flex-col">
<Label htmlFor="shipping">
Free shipping via Flowbite
</Label>
<div className="text-gray-500 dark:text-gray-300">
<span className="text-xs font-normal">
For orders shipped from Flowbite from
<span className="font-medium">
€ 25
</span>
in books or
<span>
€ 29
</span>
on other categories
</span>
</div>
</div>
</div>
<div className="flex items-center gap-2">
<Checkbox
disabled
id="disabled"
/>
<Label
disabled
htmlFor="disabled"
>
Eligible for international shipping (disabled)
</Label>
</div>
</div>Radio
<fieldset
className="flex flex-col gap-4"
id="radio"
>
<legend>
Choose your favorite country
</legend>
<div className="flex items-center gap-2">
<Radio
defaultChecked
id="united-state"
name="countries"
value="USA"
/>
<Label htmlFor="united-state">
United States
</Label>
</div>
<div className="flex items-center gap-2">
<Radio
id="germany"
name="countries"
value="Germany"
/>
<Label htmlFor="germany">
Germany
</Label>
</div>
<div className="flex items-center gap-2">
<Radio
id="spain"
name="countries"
value="Spain"
/>
<Label htmlFor="spain">
Spain
</Label>
</div>
<div className="flex items-center gap-2">
<Radio
id="uk"
name="countries"
value="United Kingdom"
/>
<Label htmlFor="uk">
United Kingdom
</Label>
</div>
<div className="flex items-center gap-2">
<Radio
disabled
id="china"
name="countries"
value="China"
/>
<Label
disabled
htmlFor="china"
>
China (disabled)
</Label>
</div>
</fieldset>File upload
A profile picture is useful to confirm your are logged into your account
<div id="fileUpload">
<div className="mb-2 block">
<Label
htmlFor="file"
value="Upload file"
/>
</div>
<FileInput
helperText="A profile picture is useful to confirm your are logged into your account"
id="file"
/>
</div>Toggle switch
<div
className="flex flex-col gap-4"
id="toggle"
>
<ToggleSwitch
label="Toggle me"
onChange={bound me}
/>
<ToggleSwitch
checked
label="Toggle me (checked)"
onChange={bound me}
/>
<ToggleSwitch
disabled
label="Toggle me (disabled)"
onChange={onChange}
/>
</div>Range slider
<div className="flex flex-col gap-4">
<div>
<div className="mb-1 block">
<Label
htmlFor="default-range"
value="Default"
/>
</div>
<RangeSlider id="default-range" />
</div>
<div>
<div className="mb-1 block">
<Label
htmlFor="disbaled-range"
value="Disabled"
/>
</div>
<RangeSlider
disabled
id="disabled-range"
/>
</div>
<div>
<div className="mb-1 block">
<Label
htmlFor="sm-range"
value="Small"
/>
</div>
<RangeSlider
id="sm-range"
sizing="sm"
/>
</div>
<div>
<div className="mb-1 block">
<Label
htmlFor="md-range"
value="Medium"
/>
</div>
<RangeSlider
id="md-range"
sizing="md"
/>
</div>
<div>
<div className="mb-1 block">
<Label
htmlFor="lg-range"
value="Large"
/>
</div>
<RangeSlider
id="lg-range"
sizing="lg"
/>
</div>
</div>