React Forms - Flowbite

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:

// 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.

'use client';

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

function Component() {
  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" type="email" placeholder="name@flowbite.com" required />
      </div>
      <div>
        <div className="mb-2 block">
          <Label htmlFor="password1" value="Your password" />
        </div>
        <TextInput id="password1" type="password" required />
      </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 choose from the sm, md, and lg size options.

'use client';

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

function Component() {
  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" type="text" sizing="sm" />
      </div>
      <div>
        <div className="mb-2 block">
          <Label htmlFor="base" value="Base input" />
        </div>
        <TextInput id="base" type="text" sizing="md" />
      </div>
      <div>
        <div className="mb-2 block">
          <Label htmlFor="large" value="Large input" />
        </div>
        <TextInput id="large" type="text" sizing="lg" />
      </div>
    </div>
  );
}

Disabled inputs#

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

'use client';

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

function Component() {
  return (
    <div className="flex max-w-md flex-col gap-4">
      <Label htmlFor="disabledInput1">API token</Label>
      <TextInput type="text" id="disabledInput1" placeholder="Disabled input" disabled />
      <Label htmlFor="disabledInput2">Personal access token</Label>
      <TextInput type="text" id="disabledInput2" placeholder="Disabled readonly input" disabled readOnly />
    </div>
  );
}

Inputs with shadow#

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

'use client';

import { Button, Checkbox, Label, TextInput } from 'flowbite-react';
import Link from 'next/link';

function Component() {
  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" type="email" placeholder="name@flowbite.com" required shadow />
      </div>
      <div>
        <div className="mb-2 block">
          <Label htmlFor="password2" value="Your password" />
        </div>
        <TextInput id="password2" type="password" required shadow />
      </div>
      <div>
        <div className="mb-2 block">
          <Label htmlFor="repeat-password" value="Repeat password" />
        </div>
        <TextInput id="repeat-password" type="password" required shadow />
      </div>
      <div className="flex items-center gap-2">
        <Checkbox id="agree" />
        <Label htmlFor="agree" className="flex">
          I agree with the&nbsp;
          <Link href="#" className="text-cyan-600 hover:underline dark:text-cyan-500">
            terms and conditions
          </Link>
        </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.

'use client';

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

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

Input groups with icon#

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

'use client';

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

function Component() {
  return (
    <div className="max-w-md">
      <div className="mb-2 block">
        <Label htmlFor="email4" value="Your email" />
      </div>
      <TextInput id="email4" type="email" icon={HiMail} placeholder="name@flowbite.com" required />
    </div>
  );
}

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

'use client';

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

function Component() {
  return (
    <div className="max-w-md">
      <div className="mb-2 block">
        <Label htmlFor="email4" value="Your email" />
      </div>
      <TextInput id="email4" type="email" rightIcon={HiMail} placeholder="name@flowbite.com" required />
    </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.

'use client';

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

function Component() {
  return (
    <div className="max-w-md">
      <div className="mb-2 block">
        <Label htmlFor="email4" value="Your email" />
      </div>
      <TextInput id="email4" type="email" icon={HiMail} rightIcon={HiMail} placeholder="name@flowbite.com" required />
    </div>
  );
}

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

'use client';

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

function Component() {
  return (
    <div className="max-w-md">
      <div className="mb-2 block">
        <Label htmlFor="username3" value="Username" />
      </div>
      <TextInput id="username3" placeholder="Bonnie Green" addon="@" 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.

'use client';

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

function Component() {
  return (
    <div className="flex max-w-md flex-col gap-4">
      <div>
        <div className="mb-2 block">
          <Label htmlFor="username3" color="success" value="Your name" />
        </div>
        <TextInput
          id="username"
          placeholder="Bonnie Green"
          required
          color="success"
          helperText={
            <>
              <span className="font-medium">Alright!</span> Username available!
            </>
          }
        />
      </div>
      <div>
        <div className="mb-2 block">
          <Label htmlFor="username4" color="failure" value="Your name" />
        </div>
        <TextInput
          id="username4"
          placeholder="Bonnie Green"
          required
          color="failure"
          helperText={
            <>
              <span className="font-medium">Oops!</span> Username already taken!
            </>
          }
        />
      </div>
    </div>
  );
}

Input element colors#

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

'use client';

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

function Component() {
  return (
    <div className="flex max-w-md flex-col gap-4">
      <div>
        <div className="mb-2 block">
          <Label htmlFor="input-gray" color="gray" value="Gray" />
        </div>
        <TextInput id="input-gray" placeholder="Input Gray" required color="gray" />
      </div>
      <div>
        <div className="mb-2 block">
          <Label htmlFor="input-info" color="info" value="Info" />
        </div>
        <TextInput id="input-info" placeholder="Input Info" required color="info" />
      </div>
      <div>
        <div className="mb-2 block">
          <Label htmlFor="input-success" color="success" value="Success" />
        </div>
        <TextInput id="input-success" placeholder="Input Success" required color="success" />
      </div>
      <div>
        <div className="mb-2 block">
          <Label htmlFor="input-failure" color="failure" value="Failure" />
        </div>
        <TextInput id="input-failure" placeholder="Input Failure" required color="failure" />
      </div>
      <div>
        <div className="mb-2 block">
          <Label htmlFor="input-warning" color="warning" value="Warning" />
        </div>
        <TextInput id="input-warning" placeholder="Input Warning" required color="warning" />
      </div>
    </div>
  );
}

Textarea element#

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

'use client';

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

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

'use client';

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

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

'use client';

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

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

Radio button#

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

'use client';

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

function Component() {
  return (
    <fieldset className="flex max-w-md flex-col gap-4">
      <legend className="mb-4">Choose your favorite country</legend>
      <div className="flex items-center gap-2">
        <Radio id="united-state" name="countries" value="USA" defaultChecked />
        <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 id="china" name="countries" value="China" disabled />
        <Label htmlFor="china" disabled>
          China (disabled)
        </Label>
      </div>
    </fieldset>
  );
}

File upload#

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

'use client';

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

function Component() {
  return (
    <div id="fileUpload" className="max-w-md">
      <div className="mb-2 block">
        <Label htmlFor="file" value="Upload file" />
      </div>
      <FileInput id="file" helperText="A profile picture is useful to confirm your are logged into your account" />
    </div>
  );
}

Toggle switch#

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

'use client';

import { ToggleSwitch } from 'flowbite-react';
import { useState } from 'react';

function Component() {
  const [switch1, setSwitch1] = useState(false);
  const [switch2, setSwitch2] = useState(true);
  const [switch3, setSwitch3] = useState(true);

  return (
    <div className="flex max-w-md flex-col gap-4">
      <ToggleSwitch checked={switch1} label="Toggle me" onChange={setSwitch1} />
      <ToggleSwitch checked={switch2} label="Toggle me (checked)" onChange={setSwitch2} />
      <ToggleSwitch checked={false} disabled label="Toggle me (disabled)" onChange={() => undefined} />
      <ToggleSwitch checked={true} disabled label="Toggle me (disabled)" onChange={() => undefined} />
      <ToggleSwitch checked={switch3} onChange={setSwitch3} />
    </div>
  );
}

Range slider#

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

'use client';

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

function Component() {
  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 id="disabled-range" disabled />
      </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>
  );
}

Theme#

To learn more about how to customize the appearance of components, please see the Theme docs.

File input theme#

{
  "root": {
    "base": "flex"
  },
  "field": {
    "base": "relative w-full",
    "input": {
      "base": "rounded-lg overflow-hidden block w-full border disabled:cursor-not-allowed disabled:opacity-50",
      "sizes": {
        "sm": "sm:text-xs",
        "md": "text-sm",
        "lg": "sm:text-md"
      },
      "colors": {
        "gray": "bg-gray-50 border-gray-300 text-gray-900 focus:border-cyan-500 focus:ring-cyan-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-cyan-500 dark:focus:ring-cyan-500",
        "info": "border-cyan-500 bg-cyan-50 text-cyan-900 placeholder-cyan-700 focus:border-cyan-500 focus:ring-cyan-500 dark:border-cyan-400 dark:bg-cyan-100 dark:focus:border-cyan-500 dark:focus:ring-cyan-500",
        "failure": "border-red-500 bg-red-50 text-red-900 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-100 dark:focus:border-red-500 dark:focus:ring-red-500",
        "warning": "border-yellow-500 bg-yellow-50 text-yellow-900 placeholder-yellow-700 focus:border-yellow-500 focus:ring-yellow-500 dark:border-yellow-400 dark:bg-yellow-100 dark:focus:border-yellow-500 dark:focus:ring-yellow-500",
        "success": "border-green-500 bg-green-50 text-green-900 placeholder-green-700 focus:border-green-500 focus:ring-green-500 dark:border-green-400 dark:bg-green-100 dark:focus:border-green-500 dark:focus:ring-green-500"
      }
    }
  }
}

Label theme#

{
  "root": {
    "base": "text-sm font-medium",
    "disabled": "opacity-50",
    "colors": {
      "default": "text-gray-900 dark:text-white",
      "info": "text-cyan-500 dark:text-cyan-600",
      "failure": "text-red-700 dark:text-red-500",
      "warning": "text-yellow-500 dark:text-yellow-600",
      "success": "text-green-700 dark:text-green-500"
    }
  }
}

Radio button theme#

{
  "root": {
    "base": "h-4 w-4 border border-gray-300 focus:ring-2 focus:ring-cyan-500 dark:border-gray-600 dark:bg-gray-700 dark:focus:bg-cyan-600 dark:focus:ring-cyan-600 text-cyan-600 disabled:cursor-not-allowed"
  }
}

Range slider theme#

{
  "root": {
    "base": "flex"
  },
  "field": {
    "base": "relative w-full",
    "input": {
      "base": "w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700",
      "sizes": {
        "sm": "h-1 range-sm",
        "md": "h-2",
        "lg": "h-3 range-lg"
      }
    }
  }
}

Text input theme#

{
  "base": "flex",
  "addon": "inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-200 px-3 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400",
  "field": {
    "base": "relative w-full",
    "icon": {
      "base": "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3",
      "svg": "h-5 w-5 text-gray-500 dark:text-gray-400"
    },
    "rightIcon": {
      "base": "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3",
      "svg": "h-5 w-5 text-gray-500 dark:text-gray-400"
    },
    "input": {
      "base": "block w-full border disabled:cursor-not-allowed disabled:opacity-50",
      "sizes": {
        "sm": "p-2 sm:text-xs",
        "md": "p-2.5 text-sm",
        "lg": "sm:text-md p-4"
      },
      "colors": {
        "gray": "bg-gray-50 border-gray-300 text-gray-900 focus:border-cyan-500 focus:ring-cyan-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-cyan-500 dark:focus:ring-cyan-500",
        "info": "border-cyan-500 bg-cyan-50 text-cyan-900 placeholder-cyan-700 focus:border-cyan-500 focus:ring-cyan-500 dark:border-cyan-400 dark:bg-cyan-100 dark:focus:border-cyan-500 dark:focus:ring-cyan-500",
        "failure": "border-red-500 bg-red-50 text-red-900 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-100 dark:focus:border-red-500 dark:focus:ring-red-500",
        "warning": "border-yellow-500 bg-yellow-50 text-yellow-900 placeholder-yellow-700 focus:border-yellow-500 focus:ring-yellow-500 dark:border-yellow-400 dark:bg-yellow-100 dark:focus:border-yellow-500 dark:focus:ring-yellow-500",
        "success": "border-green-500 bg-green-50 text-green-900 placeholder-green-700 focus:border-green-500 focus:ring-green-500 dark:border-green-400 dark:bg-green-100 dark:focus:border-green-500 dark:focus:ring-green-500"
      },
      "withRightIcon": {
        "on": "pr-10",
        "off": ""
      },
      "withIcon": {
        "on": "pl-10",
        "off": ""
      },
      "withAddon": {
        "on": "rounded-r-lg",
        "off": "rounded-lg"
      },
      "withShadow": {
        "on": "shadow-sm dark:shadow-sm-light",
        "off": ""
      }
    }
  }
}

Textarea theme#

{
  "base": "block w-full rounded-lg border disabled:cursor-not-allowed disabled:opacity-50 text-sm",
  "colors": {
    "gray": "bg-gray-50 border-gray-300 text-gray-900 focus:border-cyan-500 focus:ring-cyan-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-cyan-500 dark:focus:ring-cyan-500",
    "info": "border-cyan-500 bg-cyan-50 text-cyan-900 placeholder-cyan-700 focus:border-cyan-500 focus:ring-cyan-500 dark:border-cyan-400 dark:bg-cyan-100 dark:focus:border-cyan-500 dark:focus:ring-cyan-500",
    "failure": "border-red-500 bg-red-50 text-red-900 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-100 dark:focus:border-red-500 dark:focus:ring-red-500",
    "warning": "border-yellow-500 bg-yellow-50 text-yellow-900 placeholder-yellow-700 focus:border-yellow-500 focus:ring-yellow-500 dark:border-yellow-400 dark:bg-yellow-100 dark:focus:border-yellow-500 dark:focus:ring-yellow-500",
    "success": "border-green-500 bg-green-50 text-green-900 placeholder-green-700 focus:border-green-500 focus:ring-green-500 dark:border-green-400 dark:bg-green-100 dark:focus:border-green-500 dark:focus:ring-green-500"
  },
  "withShadow": {
    "on": "shadow-sm dark:shadow-sm-light",
    "off": ""
  }
}

Toggle switch theme#

{
  "root": {
    "base": "group relative flex items-center rounded-lg focus:outline-none",
    "active": {
      "on": "cursor-pointer",
      "off": "cursor-not-allowed opacity-50"
    },
    "label": "ml-3 text-sm font-medium text-gray-900 dark:text-gray-300"
  },
  "toggle": {
    "base": "toggle-bg rounded-full border group-focus:ring-4 group-focus:ring-cyan-500/25",
    "checked": {
      "on": "after:translate-x-full after:border-white",
      "off": "border-gray-200 bg-gray-200 dark:border-gray-600 dark:bg-gray-700",
      "color": {
        "blue": " bg-cyan-700 border-cyan-700",
        "dark": "bg-dark-700 border-dark-900",
        "failure": "bg-red-700 border-red-900",
        "gray": "bg-gray-500 border-gray-600",
        "green": "bg-green-600 border-green-700",
        "light": "bg-light-700 border-light-900",
        "red": "bg-red-700 border-red-900",
        "purple": "bg-purple-700 border-purple-900",
        "success": "bg-green-500 border-green-500",
        "yellow": "bg-yellow-400 border-yellow-400",
        "warning": "bg-yellow-600 border-yellow-600",
        "cyan": "bg-cyan-500 border-cyan-500",
        "lime": "bg-lime-400 border-lime-400",
        "indigo": "bg-indigo-400 border-indigo-400",
        "teal": "bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-br focus:ring-4",
        "info": "bg-cyan-600 border-cyan-600",
        "pink": "bg-pink-600 border-pink-600"
      }
    },
    "sizes": {
      "sm": "w-9 h-5 after:absolute after:top-[2px] after:left-[2px] after:h-4 after:w-4",
      "md": "w-11 h-6 after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5",
      "lg": "w-14 h-7 after:absolute after:top-0.5 after:left-[4px] after:h-6 after:w-6"
    }
  }
}

Checkbox theme#

{
  "root": {
    "base": "h-4 w-4 rounded focus:ring-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 bg-gray-100 disabled:cursor-not-allowed",
    "color": {
      "default": "focus:ring-cyan-600 dark:ring-offset-gray-800 dark:focus:ring-cyan-600 text-cyan-600",
      "dark": "focus:ring-gray-800 dark:ring-offset-gray-800 dark:focus:ring-gray-800 text-gray-800",
      "failure": "focus:ring-red-900 dark:ring-offset-red-900 dark:focus:ring-red-900 text-red-900",
      "gray": "focus:ring-gray-900 dark:ring-offset-gray-900 dark:focus:ring-gray-900 text-gray-900",
      "info": "focus:ring-cyan-800 dark:ring-offset-gray-800 dark:focus:ring-cyan-800 text-cyan-800",
      "light": "focus:ring-gray-900 dark:ring-offset-gray-900 dark:focus:ring-gray-900 text-gray-900",
      "purple": "focus:ring-purple-600 dark:ring-offset-purple-600 dark:focus:ring-purple-600 text-purple-600",
      "success": "focus:ring-green-800 dark:ring-offset-green-800 dark:focus:ring-green-800 text-green-800",
      "warning": "focus:ring-yellow-400 dark:ring-offset-yellow-400 dark:focus:ring-yellow-400 text-yellow-400",
      "blue": "focus:ring-blue-600 dark:ring-offset-blue-700 dark:focus:ring-blue-700 text-blue-700",
      "cyan": "focus:ring-cyan-600 dark:ring-offset-cyan-600 dark:focus:ring-cyan-600 text-cyan-600",
      "green": "focus:ring-green-600 dark:ring-offset-green-600 dark:focus:ring-green-600 text-green-600",
      "indigo": "focus:ring-indigo-700 dark:ring-offset-indigo-700 dark:focus:ring-indigo-700 text-indigo-700",
      "lime": "focus:ring-lime-700 dark:ring-offset-lime-700 dark:focus:ring-lime-700 text-lime-700",
      "pink": "focus:ring-pink-600 dark:ring-offset-pink-600 dark:focus:ring-pink-600 text-pink-600",
      "red": "focus:ring-red-600 dark:ring-offset-red-600 dark:focus:ring-red-600 text-red-600",
      "teal": "focus:ring-teal-600 dark:ring-offset-teal-600 dark:focus:ring-teal-600 text-teal-600",
      "yellow": "focus:ring-yellow-400 dark:ring-offset-yellow-400 dark:focus:ring-yellow-400 text-yellow-400"
    }
  }
}

References#

• Flowbite Forms