1

I want to make Flowbite-react textInput field label floating but by changing flowbite-react theme I'm unable to make it. I want to know how can I change textInput field label into floating label. Here is the example for my code: Example:

flowbit TextInput and Label using in formik.
------------------------------------------------
<TextInput
  name="projectName"
  type="text"
  required={true}
  id="projectName"
  onChange={formikHelpers.handleChange}
  onBlur={formikHelpers.handleBlur}
  value={formikHelpers.values.projectName}
/>
<Label
  value="Project Name"
  htmlFor="projectName">
</Label>

Custom flowbite theme:
-----------------------
import { CustomFlowbiteTheme } from "flowbite-react/lib/esm/components/Flowbite/FlowbiteTheme";

export const flowbiteTheme: CustomFlowbiteTheme = {
  textInput: {
    base: "flex peer",
    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"
      },
      input: {
        base: "block w-full border disabled:cursor-not-allowed disabled:opacity-50"
      }
    }
  },
  label: {
    base: "text-sm font-medium duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white dark:bg-gray-800 px-2 peer-focus:px-2 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-5 peer-placeholder-shown:top-8 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 left-1",
    colors: {
      default: "text-gray-900 dark:text-gray-300",
      info: "text-blue-500 dark:text-blue-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"
    },
    disabled: "opacity-50"
  }
};

0 Answers0