Float label

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

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