برچسب (Label)

1import { Label } from "@/components/ui/label";
2
3export default function BasicExample() {
4  return (
5    <div className="space-y-2 max-w-sm">
6      <Label htmlFor="email">ایمیل</Label>
7      <input
8        type="email"
9        id="email"
10        className="flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
11        placeholder="your@email.com"
12      />
13    </div>
14  );
15}
16

1import { Label } from "@/components/ui/label";
2
3export default function ControlsExample() {
4  return (
5    <div className="space-y-6">
6      {/* Text Input */}
7      <div className="space-y-2 max-w-sm">
8        <Label htmlFor="name">نام</Label>
9        <input
10          type="text"
11          id="name"
12          className="flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
13          placeholder="نام خود را وارد کنید"
14        />
15      </div>
16
17      {/* Checkbox */}
18      <div className="flex items-center space-x-2 space-x-reverse">
19        <input
20          type="checkbox"
21          id="terms"
22          className="h-4 w-4 rounded border-border text-primary focus:ring-2 focus:ring-ring focus:ring-offset-2"
23        />
24        <Label htmlFor="terms" className="cursor-pointer">
25          شرایط و قوانین را می‌پذیرم
26        </Label>
27      </div>
28
29      {/* Radio */}
30      <div className="space-y-3">
31        <div className="flex items-center space-x-2 space-x-reverse">
32          <input
33            type="radio"
34            id="option1"
35            name="options"
36            className="h-4 w-4 border-border text-primary focus:ring-2 focus:ring-ring focus:ring-offset-2"
37          />
38          <Label htmlFor="option1" className="cursor-pointer">
39            گزینه اول
40          </Label>
41        </div>
42        <div className="flex items-center space-x-2 space-x-reverse">
43          <input
44            type="radio"
45            id="option2"
46            name="options"
47            className="h-4 w-4 border-border text-primary focus:ring-2 focus:ring-ring focus:ring-offset-2"
48          />
49          <Label htmlFor="option2" className="cursor-pointer">
50            گزینه دوم
51          </Label>
52        </div>
53      </div>
54
55      {/* Textarea */}
56      <div className="space-y-2 max-w-sm">
57        <Label htmlFor="message">پیام</Label>
58        <textarea
59          id="message"
60          rows={4}
61          className="flex min-h-[80px] w-full rounded-md border border-border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
62          placeholder="پیام خود را بنویسید..."
63        />
64      </div>
65
66      {/* Select */}
67      <div className="space-y-2 max-w-sm">
68        <Label htmlFor="country">کشور</Label>
69        <select
70          id="country"
71          className="flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
72        >
73          <option>ایران</option>
74          <option>آمریکا</option>
75          <option>کانادا</option>
76          <option>انگلستان</option>
77        </select>
78      </div>
79    </div>
80  );
81}
82

1import { Label } from "@/components/ui/label";
2
3export default function RequiredExample() {
4  return (
5    <div className="space-y-4 max-w-sm">
6      <div className="space-y-2">
7        <Label htmlFor="required-email">
8          ایمیل <span className="text-destructive">*</span>
9        </Label>
10        <input
11          type="email"
12          id="required-email"
13          required
14          className="flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
15          placeholder="your@email.com"
16        />
17      </div>
18      <div className="space-y-2">
19        <Label htmlFor="optional-phone">شماره تلفن (اختیاری)</Label>
20        <input
21          type="tel"
22          id="optional-phone"
23          className="flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
24          placeholder="09123456789"
25        />
26      </div>
27    </div>
28  );
29}
30

1import { Label } from "@/components/ui/label";
2
3export default function HelperTextExample() {
4  return (
5    <div className="space-y-2 max-w-sm">
6      <Label htmlFor="username">نام کاربری</Label>
7      <input
8        type="text"
9        id="username"
10        className="flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
11        placeholder="username"
12      />
13      <p className="text-sm text-muted-foreground">
14        نام کاربری شما باید حداقل ۳ کاراکتر باشد
15      </p>
16    </div>
17  );
18}
19

1import { Label } from "@/components/ui/label";
2
3export default function DisabledExample() {
4  return (
5    <div className="space-y-4 max-w-sm">
6      <div className="space-y-2">
7        <Label htmlFor="disabled-input">ورودی غیرفعال</Label>
8        <input
9          type="text"
10          id="disabled-input"
11          disabled
12          className="peer flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
13          placeholder="این فیلد غیرفعال است"
14        />
15      </div>
16      <div className="flex items-center space-x-2 space-x-reverse">
17        <input
18          type="checkbox"
19          id="disabled-checkbox"
20          disabled
21          className="peer h-4 w-4 rounded border-border text-primary focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
22        />
23        <Label
24          htmlFor="disabled-checkbox"
25          className="peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
26        >
27          چک‌باکس غیرفعال
28        </Label>
29      </div>
30    </div>
31  );
32}
33

1import { Label } from "@/components/ui/label";
2
3export default function LoginFormExample() {
4  return (
5    <div className="max-w-sm space-y-4">
6      <div className="space-y-2">
7        <Label htmlFor="login-email">ایمیل</Label>
8        <input
9          type="email"
10          id="login-email"
11          className="flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
12          placeholder="your@email.com"
13        />
14      </div>
15      <div className="space-y-2">
16        <Label htmlFor="login-password">رمز عبور</Label>
17        <input
18          type="password"
19          id="login-password"
20          className="flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
21        />
22      </div>
23      <div className="flex items-center space-x-2 space-x-reverse">
24        <input
25          type="checkbox"
26          id="remember"
27          className="h-4 w-4 rounded border-border text-primary focus:ring-2 focus:ring-ring focus:ring-offset-2"
28        />
29        <Label htmlFor="remember" className="cursor-pointer">
30          مرا به خاطر بسپار
31        </Label>
32      </div>
33    </div>
34  );
35}
36

1import { Label } from "@/components/ui/label";
2
3export default function RegistrationFormExample() {
4  return (
5    <div className="max-w-md space-y-4">
6      <div className="grid grid-cols-2 gap-4">
7        <div className="space-y-2">
8          <Label htmlFor="first-name">
9            نام <span className="text-destructive">*</span>
10          </Label>
11          <input
12            type="text"
13            id="first-name"
14            required
15            className="flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
16          />
17        </div>
18        <div className="space-y-2">
19          <Label htmlFor="last-name">
20            نام خانوادگی <span className="text-destructive">*</span>
21          </Label>
22          <input
23            type="text"
24            id="last-name"
25            required
26            className="flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
27          />
28        </div>
29      </div>
30      <div className="space-y-2">
31        <Label htmlFor="reg-email">
32          ایمیل <span className="text-destructive">*</span>
33        </Label>
34        <input
35          type="email"
36          id="reg-email"
37          required
38          className="flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
39          placeholder="your@email.com"
40        />
41      </div>
42      <div className="space-y-2">
43        <Label htmlFor="reg-password">
44          رمز عبور <span className="text-destructive">*</span>
45        </Label>
46        <input
47          type="password"
48          id="reg-password"
49          required
50          className="flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
51        />
52        <p className="text-sm text-muted-foreground">
53          حداقل ۸ کاراکتر
54        </p>
55      </div>
56    </div>
57  );
58}
59

1import { Label } from "@/components/ui/label";
2
3export default function SettingsFormExample() {
4  return (
5    <div className="max-w-md space-y-6">
6      <div>
7        <h4 className="font-semibold mb-3">اعلان‌ها</h4>
8        <div className="space-y-3">
9          <div className="flex items-center space-x-2 space-x-reverse">
10            <input
11              type="checkbox"
12              id="email-notifications"
13              defaultChecked
14              className="h-4 w-4 rounded border-border text-primary focus:ring-2 focus:ring-ring focus:ring-offset-2"
15            />
16            <Label
17              htmlFor="email-notifications"
18              className="cursor-pointer"
19            >
20              اعلان‌های ایمیل
21            </Label>
22          </div>
23          <div className="flex items-center space-x-2 space-x-reverse">
24            <input
25              type="checkbox"
26              id="push-notifications"
27              className="h-4 w-4 rounded border-border text-primary focus:ring-2 focus:ring-ring focus:ring-offset-2"
28            />
29            <Label
30              htmlFor="push-notifications"
31              className="cursor-pointer"
32            >
33              اعلان‌های Push
34            </Label>
35          </div>
36          <div className="flex items-center space-x-2 space-x-reverse">
37            <input
38              type="checkbox"
39              id="sms-notifications"
40              className="h-4 w-4 rounded border-border text-primary focus:ring-2 focus:ring-ring focus:ring-offset-2"
41            />
42            <Label
43              htmlFor="sms-notifications"
44              className="cursor-pointer"
45            >
46              اعلان‌های پیامکی
47            </Label>
48          </div>
49        </div>
50      </div>
51    </div>
52  );
53}
54