Label

1import { Checkbox } from '@/components/ui/checkbox'
2import { Label } from '@/components/ui/label'
3
4export function LabelDemo() {
5    return (
6        <Label className="gap-1.5">
7            <Checkbox />
8            Remember me
9        </Label>
10    )
11}
12

1import { Input } from '@/components/ui/input'
2import { Label } from '@/components/ui/label'
3
4export function LabelRequired() {
5    return (
6        <div className="flex w-80 flex-col gap-4">
7            <div className="w-full space-y-1.5">
8                <Label htmlFor="firstName" required>
9                    First Name
10                </Label>
11                <Input id="firstName" placeholder="Enter first name" />
12            </div>
13            <div className="w-full space-y-1.5">
14                <Label htmlFor="lastName" required>
15                    Last Name
16                </Label>
17                <Input id="lastName" placeholder="Enter last name" />
18            </div>
19        </div>
20    )
21}
22

1import { Input } from '@/components/ui/input'
2import { HelperText, Label } from '@/components/ui/label'
3
4export function LabelHelperText() {
5    return (
6        <div className="flex w-80 flex-col gap-4">
7            <div className="w-full space-y-1.5">
8                <Label htmlFor="email" required>
9                    Email Address
10                </Label>
11                <Input id="email" placeholder="Enter your email" />
12            </div>
13            <div className="w-full space-y-1.5">
14                <Label htmlFor="phone" required>
15                    Phone Number
16                    <HelperText>(+91)</HelperText>
17                </Label>
18                <Input id="phone" placeholder="Enter your number" />
19            </div>
20        </div>
21    )
22}
23