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"
}
};