{label}

); }); FloatingLabelInput.displayName = "FloatingLabelInput"; export { FloatingInput, FloatingLabel, FloatingLabelInput }; `,__src__:"src/registry/default/extension/floating-label-input.tsx","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",__rawString__:`import * as React from "react"; import { cn } from "@/lib/utils"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; export interface InputProps extends React.InputHTMLAttributes {} const FloatingInput = React.forwardRef( ({ className, ...props }, ref) => { return ( ); }, ); FloatingInput.displayName = "FloatingInput"; const FloatingLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => { return ( ); }); FloatingLabel.displayName = "FloatingLabel"; type FloatingLabelInputProps = InputProps & { label?: string }; const FloatingLabelInput = React.forwardRef< React.ElementRef, React.PropsWithoutRef >(({ id, label, ...props }, ref) => { return (

{label}

); }); FloatingLabelInput.displayName = "FloatingLabelInput"; export { FloatingInput, FloatingLabel, FloatingLabelInput }; `,__src__:"src/registry/default/extension/floating-label-input.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" *"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" as"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" React "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" { cn } "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:' "@/lib/utils"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" { Input } "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:' "@/components/ui/input"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" { Label } "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:' "@/components/ui/label"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" interface"}),(0,l.jsx)(n.span,{style:{color:"#F69D50"},children:" InputProps"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" extends"}),(0,l.jsx)(n.span,{style:{color:"#F69D50"},children:" React"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:"InputHTMLAttributes"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#F69D50"},children:"HTMLInputElement"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"> {}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" FloatingInput"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" React."}),(0,l.jsx)(n.span,{style:{color:"#DCBDFB"},children:"forwardRef"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#F69D50"},children:"HTMLInputElement"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#F69D50"},children:"InputProps"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:">("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" ({ "}),(0,l.jsx)(n.span,{style:{color:"#F69D50"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"..."}),(0,l.jsx)(n.span,{style:{color:"#F69D50"},children:"props"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" }, "}),(0,l.jsx)(n.span,{style:{color:"#F69D50"},children:"ref"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#8DDB8C"},children:"Input"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" placeholder"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:'" "'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#DCBDFB"},children:"cn"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:'"peer"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:", className)"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" ref"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"ref"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" {..."}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"props"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:");"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"FloatingInput.displayName "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:' "FloatingInput"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" FloatingLabel"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" React.forwardRef"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"<"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" React.ElementRef"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:""}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" React.ComponentPropsWithoutRef"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:""})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"(({ "}),(0,l.jsx)(n.span,{style:{color:"#F69D50"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"..."}),(0,l.jsx)(n.span,{style:{color:"#F69D50"},children:"props"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" }, "}),(0,l.jsx)(n.span,{style:{color:"#F69D50"},children:"ref"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#8DDB8C"},children:"Label"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#DCBDFB"},children:"cn"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:' "peer-focus:secondary peer-focus:dark:secondary absolute start-2 top-2 z-10 origin-[0] -translate-y-4 scale-75 transform bg-background px-2 text-sm text-gray-500 duration-300 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-focus:top-2 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 dark:bg-background rtl:peer-focus:left-auto rtl:peer-focus:translate-x-1/4 cursor-text"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" className,"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" )"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" ref"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"ref"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" {..."}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"props"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"});"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"FloatingLabel.displayName "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:' "FloatingLabel"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"type"}),(0,l.jsx)(n.span,{style:{color:"#F69D50"},children:" FloatingLabelInputProps"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#F69D50"},children:" InputProps"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" &"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" { "}),(0,l.jsx)(n.span,{style:{color:"#F69D50"},children:"label"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"?:"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" string"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" };"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" FloatingLabelInput"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" React.forwardRef"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"<"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" React.ElementRef"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:""}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" React.PropsWithoutRef"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"FloatingLabelInputProps"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"(({ "}),(0,l.jsx)(n.span,{style:{color:"#F69D50"},children:"id"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#F69D50"},children:"label"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"..."}),(0,l.jsx)(n.span,{style:{color:"#F69D50"},children:"props"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" }, "}),(0,l.jsx)(n.span,{style:{color:"#F69D50"},children:"ref"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#8DDB8C"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:'"relative"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#8DDB8C"},children:"FloatingInput"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" ref"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"ref"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" id"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"id"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" {..."}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"props"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#8DDB8C"},children:"FloatingLabel"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" htmlFor"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"id"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"label"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:""})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"});"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"FloatingLabelInput.displayName "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:' "FloatingLabelInput"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" { FloatingInput, FloatingLabel, FloatingLabelInput };"})]})]})})})}),(0,l.jsx)(r,{children:"Update the import paths to match your project setup."})]})}),(0,l.jsxs)(c,{value:"cli",children:[(0,l.jsx)(r,{children:"Run the following command "}),(0,l.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"bash","data-theme":"github-dark-dimmed",__rawString__:`npx @shadext/cli add floating-label-input `,__npmCommand__:`npx @shadext/cli add floating-label-input `,__yarnCommand__:`npx @shadext/cli add floating-label-input `,__pnpmCommand__:`pnpm dlx @shadext/cli add floating-label-input `,__bunCommand__:`bunx --bun @shadext/cli add floating-label-input `,children:(0,l.jsx)(n.code,{"data-language":"bash","data-theme":"github-dark-dimmed",style:{display:"grid"},children:(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F69D50"},children:"npx"}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:" @shadext/cli"}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:" add"}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:" floating-label-input"})]})})})})]})]}),` `,(0,l.jsx)(n.h2,{id:"example",children:"Example"}),` `,(0,l.jsx)(n.h3,{id:"customize",children:"Customize"}),` `,(0,l.jsxs)(n.p,{children:["You have fully control of the ",(0,l.jsx)(n.code,{children:"FloatingLabel"})," and the ",(0,l.jsx)(n.code,{children:"FloatingInput"})]}),` `,(0,l.jsx)(o,{name:"floating-label-customize",children:(0,l.jsx)(n.figure,{"data-language":"tsx","data-theme":"default",__rawString__:`import React from "react"; import { FloatingInput, FloatingLabel, } from "@/components/ui/extension/floating-label-input"; const FloatingLabelInputCustomize = () => { return (

Customize

); }; export FloatingLabelInputCustomize; `,__src__:"src/registry/default/example/extra-new/floating-label-input/usage/floating-label-customize.tsx","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",__rawString__:`import React from "react"; import { FloatingInput, FloatingLabel, } from "@/components/ui/extension/floating-label-input"; const FloatingLabelInputCustomize = () => { return (

Customize

); }; export FloatingLabelInputCustomize; `,__src__:"src/registry/default/example/extra-new/floating-label-input/usage/floating-label-customize.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" React "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" FloatingInput,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" FloatingLabel,"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"} "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:' "@/components/ui/extension/floating-label-input"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#DCBDFB"},children:" FloatingLabelInputCustomize"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" () "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#8DDB8C"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:'"relative"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#8DDB8C"},children:"FloatingInput"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" id"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:'"floating-customize"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#8DDB8C"},children:"FloatingLabel"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" htmlFor"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:'"floating-customize"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:">Customize"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"};"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" FloatingLabelInputCustomize;"})]})]})})})}),` `,(0,l.jsx)(n.h3,{id:"form",children:"Form"}),` `,(0,l.jsx)(o,{name:"floating-label-input-form",children:(0,l.jsx)(n.figure,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client"; import { zodResolver } from "@hookform/resolvers/zod"; import { useForm } from "react-hook-form"; import * as z from "zod"; import * as React from "react"; import { Form, FormField, FormItem, FormMessage } from "@/components/ui/form"; import { toast } from "@/hooks/use-toast"; import { LoadingButton } from "@/components/ui/extension/loading-button"; import { FloatingLabelInput } from "@/components/ui/extension/floating-label-input"; const FormSchema = z.object({ name: z.string().min(2, { message: "name must be at least 2 characters.", }), }); const FloatingLabelInputForm = () => { const form = useForm>({ defaultValues: { name: "" }, resolver: zodResolver(FormSchema), mode: "onTouched", }); const [loading, setLoading] = React.useState(false); function onSubmit(data: z.infer) { setLoading(true); setTimeout(() => { setLoading(false); toast({ title: "Your submitted data", description: (

            {JSON.stringify(data, null, 2)}

), }); }, 500); } return (

( )} /> Submit ); }; export FloatingLabelInputForm; `,__src__:"src/registry/default/example/extra-new/floating-label-input/usage/floating-label-input-form.tsx","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",__rawString__:`"use client"; import { zodResolver } from "@hookform/resolvers/zod"; import { useForm } from "react-hook-form"; import * as z from "zod"; import * as React from "react"; import { Form, FormField, FormItem, FormMessage } from "@/components/ui/form"; import { toast } from "@/hooks/use-toast"; import { LoadingButton } from "@/components/ui/extension/loading-button"; import { FloatingLabelInput } from "@/components/ui/extension/floating-label-input"; const FormSchema = z.object({ name: z.string().min(2, { message: "name must be at least 2 characters.", }), }); const FloatingLabelInputForm = () => { const form = useForm>({ defaultValues: { name: "" }, resolver: zodResolver(FormSchema), mode: "onTouched", }); const [loading, setLoading] = React.useState(false); function onSubmit(data: z.infer) { setLoading(true); setTimeout(() => { setLoading(false); toast({ title: "Your submitted data", description: (

            {JSON.stringify(data, null, 2)}

), }); }, 500); } return (

( )} /> Submit ); }; export FloatingLabelInputForm; `,__src__:"src/registry/default/example/extra-new/floating-label-input/usage/floating-label-input-form.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:'"use client"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" { zodResolver } "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:' "@hookform/resolvers/zod"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" { useForm } "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:' "react-hook-form"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" *"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" as"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" z "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:' "zod"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" *"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" as"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" React "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" { Form, FormField, FormItem, FormMessage } "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:' "@/components/ui/form"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" { toast } "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:' "@/hooks/use-toast"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" { LoadingButton } "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:' "@/components/ui/extension/loading-button"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" { FloatingLabelInput } "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:' "@/components/ui/extension/floating-label-input"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" FormSchema"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" z."}),(0,l.jsx)(n.span,{style:{color:"#DCBDFB"},children:"object"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"({"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" name: z."}),(0,l.jsx)(n.span,{style:{color:"#DCBDFB"},children:"string"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"()."}),(0,l.jsx)(n.span,{style:{color:"#DCBDFB"},children:"min"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:"2"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:", {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" message: "}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:'"name must be at least 2 characters."'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" }),"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"});"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#DCBDFB"},children:" FloatingLabelInputForm"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" () "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" form"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#DCBDFB"},children:" useForm"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#F69D50"},children:"z"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#F69D50"},children:"infer"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"typeof"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" FormSchema>>({"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" defaultValues: { name: "}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:'""'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" },"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" resolver: "}),(0,l.jsx)(n.span,{style:{color:"#DCBDFB"},children:"zodResolver"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"(FormSchema),"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" mode: "}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:'"onTouched"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" });"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:"loading"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:"setLoading"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"] "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" React."}),(0,l.jsx)(n.span,{style:{color:"#DCBDFB"},children:"useState"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:"false"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:");"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#DCBDFB"},children:" onSubmit"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#F69D50"},children:"data"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#F69D50"},children:" z"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#F69D50"},children:"infer"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"typeof"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" FormSchema>) {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DCBDFB"},children:" setLoading"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:"true"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:");"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DCBDFB"},children:" setTimeout"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"(() "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DCBDFB"},children:" setLoading"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:"false"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:");"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DCBDFB"},children:" toast"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"({"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" title: "}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:'"Your submitted data"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DCBDFB"},children:" description"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:": ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#8DDB8C"},children:"pre"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:'"mt-2 w-[340px] rounded-md bg-slate-950 p-4"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#8DDB8C"},children:"code"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:'"text-white"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:"JSON"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#DCBDFB"},children:"stringify"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"(data, "}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:"null"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:"2"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:")"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:""})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" ),"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" });"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" }, "}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:"500"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:");"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" }"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#8DDB8C"},children:"Form"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" {..."}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"form"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#8DDB8C"},children:"form"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" onSubmit"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"form."}),(0,l.jsx)(n.span,{style:{color:"#DCBDFB"},children:"handleSubmit"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"(onSubmit)"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:'"w-2/3 space-y-6"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#8DDB8C"},children:"FormField"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" control"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"form.control"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" name"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:'"name"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" render"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"({ "}),(0,l.jsx)(n.span,{style:{color:"#F69D50"},children:"field"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" }) "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#8DDB8C"},children:"FormItem"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#8DDB8C"},children:"FloatingLabelInput"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" {..."}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"field"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" id"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:'"name"'}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" label"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:'"name"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#8DDB8C"},children:"FormMessage"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" )"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#8DDB8C"},children:"LoadingButton"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" loading"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"loading"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" type"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:'"submit"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" Submit"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"};"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" FloatingLabelInputForm;"})]})]})})})})]})}function u(e={}){let{wrapper:n}=e.components||{};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(A,{...e})}):A(e)}function a(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return I(_);})(); ;return Component;

Floating Label Input

Installation

Run the following command

Example

Customize

Form

Table of Content

Github