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 required>First Name</Label>
9                <Input placeholder="Enter first name" />
10            </div>
11            <div className="w-full space-y-1.5">
12                <Label required>Last Name</Label>
13                <Input placeholder="Enter last name" />
14            </div>
15        </div>
16    )
17}
18

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 required>Email Address</Label>
9                <Input placeholder="Enter your email" />
10            </div>
11            <div className="w-full space-y-1.5">
12                <Label required>
13                    Phone Number
14                    <HelperText>(+91)</HelperText>
15                </Label>
16                <Input placeholder="Enter your number" />
17            </div>
18        </div>
19    )
20}
21