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

Table of Contents

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.

Edit on GitHub
  • 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.

Edit on GitHub
  • 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.

Edit on GitHub
  • 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.

Edit on GitHub
  • 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.

Edit on GitHub

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.

Edit on GitHub
  • 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.

Edit on GitHub
  • 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.

Edit on GitHub
  • 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.

Edit on GitHub
@
  • 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.

Edit on GitHub

Alright! Username available!

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.

Edit on GitHub
  • 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.

Edit on GitHub
  • 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.

Edit on GitHub
  • 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.

Edit on GitHub

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

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

Edit on GitHub
Choose your favorite country
  • 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.

Edit on GitHub

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.

Edit on GitHub
  • 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.

Edit on GitHub
  • 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>
  )
}

Theme

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

{
  "checkbox": {
    "root": {
      "base": "h-4 w-4 rounded border border-gray-300 bg-gray-100 focus:ring-2 focus:ring-cyan-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-cyan-600 text-cyan-600"
    }
  },
  "fileInput": {
    "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": {
    "root": {
      "base": "text-sm font-medium",
      "disabled": "opacity-50",
      "colors": {
        "default": "text-gray-900 dark:text-gray-300",
        "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": {
    "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"
    }
  },
  "rangeSlider": {
    "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"
        }
      }
    }
  },
  "textInput": {
    "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": {
    "base": "block w-full rounded-lg border disabled:cursor-not-allowed disabled:opacity-50",
    "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": ""
    }
  },
  "toggleSwitch": {
    "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 h-6 w-11 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"
        }
      }
    }
  }
}

References