Next.js templates
Best Next.js templates
React templates
Best React templates
HTML5 templates
Best HTML5 templates
Tailwind CSS templates
Best Tailwind CSS templates
Vue.js templates
Best Vue.js templates
Nuxt templates
Best Nuxt templates
AngularJs templates
Best AngularJs templates
All templates
Premium templates
Components
Best Components
Blocks
Best Blocks
A wrapper that smoothly elevates labels above inputs when users interact or enter text.
1'use client' 2 3import * as React from 'react' 4 5import { FloatLabel } from '@/components/ui/float-label' 6import { Input } from '@/components/ui/input' 7 8export function FloatLabelDemo() { 9 const [username, setUsername] = React.useState('') 10 const [email, setEmail] = React.useState('') 11 const [password, setPassword] = React.useState('') 12 13 return ( 14 <div className="max-w-sm space-y-7"> 15 <FloatLabel> 16 <Input 17 id="username" 18 value={username} 19 onChange={(e) => setUsername(e.target.value)} 20 /> 21 <label htmlFor="username">Username</label> 22 </FloatLabel> 23 24 <FloatLabel> 25 <Input 26 id="email" 27 type="email" 28 value={email} 29 onChange={(e) => setEmail(e.target.value)} 30 /> 31 <label htmlFor="email">Email Address</label> 32 </FloatLabel> 33 34 <FloatLabel> 35 <Input 36 id="password" 37 type="password" 38 value={password} 39 onChange={(e) => setPassword(e.target.value)} 40 /> 41 <label htmlFor="password">Password</label> 42 </FloatLabel> 43 </div> 44 ) 45} 46
Install the following dependencies:
1'use client' 2 3import * as React from 'react' 4 5import { FloatLabel } from '@/components/ui/float-label' 6import { Textarea } from '@/components/ui/textarea' 7 8export function FloatLabelTextarea() { 9 const [address, setAddress] = React.useState('') 10 const [notes, setNotes] = React.useState('') 11 12 return ( 13 <div className="max-w-sm space-y-7"> 14 <FloatLabel className="w-[250px] md:w-xs lg:w-xs"> 15 <Textarea 16 id="address" 17 value={address} 18 onChange={(e) => setAddress(e.target.value)} 19 /> 20 <label htmlFor="address">Address</label> 21 </FloatLabel> 22 <FloatLabel className="w-[250px] md:w-xs lg:w-xs"> 23 <Textarea 24 id="notes" 25 value={notes} 26 onChange={(e) => setNotes(e.target.value)} 27 /> 28 <label htmlFor="notes">Additional Notes</label> 29 </FloatLabel> 30 </div> 31 ) 32} 33
React.ReactNode