A text input whose label animates up into a reserved slot above the field instead of disappearing, with focus/invalid states, an optional hint line and a character counter.
"use client"; import { FloatingLabelInput } from "@/components/ui/floating-label"; export default function FloatingLabelDemo() { return ( <div className="flex justify-center"> <div className="w-full max-w-[320px]"> <FloatingLabelInput label="Account reference" hint="Printed on the statement header." maxLength={16} /> </div> </div> ); }
Part of interior.dev — browse the full library on 21st.dev.