React Forms - Flowbite

Use the forms elements from Flowbite React to start receiving user input data based on input elements, checkboxes, radio buttons, file uploads based on multiple sizes, colors, and styles

The form elements from Flowbite React can help you to collect input data from your website visitors by using input field elements, checkboxes, radios, file upload elements, and more based on React and Tailwind CSS.

These components can be used to create form submission pages, authentication features for your users and you can use the elements together with other components from Flowbite React such as with modals, cards, and more.

Check out the form elements from Flowbite React on this page and customize the value and options using the React props API and customize the styles using Tailwind CSS.

Make sure that you import the appropiate components from the flowbite-react library:

'use client';

// only import what you want to use
import {
  Button,
  Checkbox,
  FileInput,
  Label,
  Radio,
  RangeSlider,
  Select,
  Textarea,
  TextInput,
  ToggleSwitch,
} from 'flowbite-react';

Default form

Use this example of a form component with <TextInput>, <Checkbox>, <Label> and <Button> elements to create a basic user authentication form and access the value of the component by accessing the value attribute.

React TypeScript

'use client';

import { Button, Checkbox, Label, TextInput } from 'flowbite-react';

export default function DefaultForm() {
  return (
    <form className="flex max-w-md 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

Use the sizing prop on the <TextInput> form component from React to set the size of the input fields. You can hoose from the sm, md, and lg size options.

Small input

Base input

Large input

React TypeScript

'use client';

import { Label, TextInput } from 'flowbite-react';

export default function InputSizing() {
  return (
    <div className="flex max-w-md 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

Disable the input fields by passing the disabled and readOnly props to the <TextInput> React component.

API token

Personal access token

React TypeScript

'use client';

import { Label, TextInput } from 'flowbite-react';

export default function DisabledInputs() {
  return (
    <div className="flex max-w-md 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>
  )
}

Inputs with shadow

Pass the shadow prop to the form components from React to automatically add a shadow style.

React TypeScript

'use client';

import { Button, Checkbox, Label, TextInput } from 'flowbite-react';

export default function ShadowInputs() {
  return (
    <form className="flex max-w-md 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
          className="flex"
          htmlFor="agree"
        >
          <p>
            I agree with the 
          </p>
          <LinkComponent
            className="text-cyan-600 hover:underline dark:text-cyan-500"
            href="/forms"
          >
            <p>
              terms and conditions
            </p>
          </LinkComponent>
        </Label>
      </div>
      <Button type="submit">
        Register new account
      </Button>
    </form>
  )
}

Form helper text

Show a helper and descriptive text next to the input field to improve UI/UX when submitting forms by passing the helperText prop to the input component from React.

Your email

We’ll never share your details. Read ourPrivacy Policy.

React TypeScript

'use client';

import { Label, TextInput } from 'flowbite-react';

export default function HelperText() {
  return (
    <div className="max-w-md">
      <div className="mb-2 block">
        <Label
          htmlFor="email3"
          value="Your email"
        />
      </div>
      <TextInput
        helperText={<>We’ll never share your details. Read our<a className="ml-1 font-medium text-cyan-600 hover:underline dark:text-cyan-500" href="/forms">Privacy Policy</a>.</>}
        id="email3"
        placeholder="name@flowbite.com"
        required
        type="email"
      />
    </div>
  )
}

Input groups with icon

Use this example to show an icon inside the input component by passing the icon prop.

Your email

React TypeScript

'use client';

import { Label, TextInput } from 'flowbite-react';
import { HiMail } from 'react-icons/hi';

export default function InputElementWithIconOnTheLeftSide() {
  return (
    <div className="max-w-md">
      <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>
  )
}

Show the icon on the right side of the input element by passing the rightIcon property.

Your email

React TypeScript

'use client';

import { Label, TextInput } from 'flowbite-react';
import { HiMail } from 'react-icons/hi';

export default function InputElementWithIconOnTheRightSide() {
  return (
    <div className="max-w-md">
      <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>
  )
}

Show an icon both on the left and right side of the component by passing both the icon and rightIcon props to the input field component from React.

Your email

React TypeScript

'use client';

import { Label, TextInput } from 'flowbite-react';
import { HiMail } from 'react-icons/hi';

export default function InputElementWithIconOnBothSides() {
  return (
    <div className="max-w-md">
      <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>
  )
}

Use this example to show an input element with an alternatively style for showing icons.

Username

@

React TypeScript

'use client';

import { Label, TextInput } from 'flowbite-react';

export default function InputElementWithAddon() {
  return (
    <div className="max-w-md">
      <div className="mb-2 block">
        <Label
          htmlFor="username"
          value="Username"
        />
      </div>
      <TextInput
        addon="@"
        id="username3"
        placeholder="Bonnie Green"
        required
      />
    </div>
  )
}

Form validation

Show form validation for success and error messages by using the color prop on the input field element and label components.

Your name

Alright! Username available!

Your name

Oops! Username already taken!

React TypeScript

'use client';

import { Label, TextInput } from 'flowbite-react';

export default function SuccessAndErrorValidation() {
  return (
    <div className="flex max-w-md 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 element colors

Update the color of the form elements by passing the color props to the input field components from React.

Gray

Info

Success

Failure

Warning

React TypeScript

'use client';

import { Label, TextInput } from 'flowbite-react';

export default function InputColors() {
  return (
    <div className="flex max-w-md 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 element

Use this example to show a textarea component in React and receive longer text from your users.

Your message

React TypeScript

'use client';

import { Label, Textarea } from 'flowbite-react';

export default function TextareaElement() {
  return (
    <div
      className="max-w-md"
      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

This component can be used to allow users to select from multiple options based on the <Select> component.

Select your country

React TypeScript

'use client';

import { Label, Select } from 'flowbite-react';

export default function SelectInput() {
  return (
    <div
      className="max-w-md"
      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

Use this example to show a list of options to your users that they can choose from by using the <Checkbox> component.

I agree with the

terms and conditions

I want to get promotional offers

I am 18 years or older

Free shipping via Flowbite

For orders shipped from Flowbite from € 25 in books or € 29 on other categories

Eligible for international shipping (disabled)

React TypeScript

'use client';

import { Checkbox, Label } from 'flowbite-react';

export default function CheckboxElement() {
  return (
    <div
      className="flex max-w-md flex-col gap-4"
      id="checkbox"
    >
      <div className="flex items-center gap-2">
        <Checkbox
          defaultChecked
          id="accept"
        />
        <Label
          className="flex"
          htmlFor="agree"
        >
          <p>
            I agree with the 
          </p>
          <a
            className="text-cyan-600 hover:underline dark:text-cyan-500"
            href="/forms"
          >
            <p>
              terms and conditions
            </p>
          </a>
        </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">
              <p>
                For orders shipped from Flowbite from
                <span className="font-medium">
                  € 25
                </span>
                 in books or 
                
                <span>
                  € 29
                </span>
                on other categories
              </p>
            </span>
          </div>
        </div>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox
          disabled
          id="disabled"
        />
        <Label
          disabled
          htmlFor="disabled"
        >
          <p>
            Eligible for international shipping (disabled)
          </p>
        </Label>
      </div>
    </div>
  )
}

Radio button

Ask your users to choose only one value from multiple options based on the <Radio> component from React.

React TypeScript

'use client';

import { Label, Radio } from 'flowbite-react';

export default function RadioButton() {
  return (
    <fieldset
      className="flex max-w-md flex-col gap-4"
      id="radio"
    >
      <legend className="mb-4">
        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"
        >
          <p>
            China (disabled)
          </p>
        </Label>
      </div>
    </fieldset>
  )
}

File upload

Use the <FileInput> component to allow users to upload files from their browser.

Upload file

A profile picture is useful to confirm your are logged into your account

React TypeScript

'use client';

import { FileInput, Label } from 'flowbite-react';

export default function FileUpload() {
  return (
    <div
      className="max-w-md"
      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

Use the <ToggleSwitch> component to ask users to enable or disable an option such as newsletter settings.

React TypeScript

'use client';

import { ToggleSwitch } from 'flowbite-react';

export default function ToggleSwitchElement() {
  return (
    <div
      className="flex max-w-md flex-col gap-4"
      id="toggle"
    >
      <ToggleSwitch
        label="Toggle me"
        onChange={function () { [native code] }}
      />
      <ToggleSwitch
        checked
        label="Toggle me (checked)"
        onChange={function () { [native code] }}
      />
      <ToggleSwitch
        disabled
        label="Toggle me (disabled)"
        onChange={()=>undefined}
      />
    </div>
  )
}

Range slider

The <RangeSlider> component ca be used to allow users to select a number based on a minimum and maximum value.

Default

Disabled

Small

Medium

Large

React TypeScript

'use client';

import { Label, RangeSlider } from 'flowbite-react';

export default function RangeSliderElement() {
  return (
    <div className="flex max-w-md 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>
  )
}

References

Flowbite Forms

On this page