ورودی متن (Input)

کامپوننت ورودی متن برای دریافت داده‌های متنی کاربر با پشتیبانی از RTL، اعتبارسنجی، محدودیت کاراکتر و اعتبارسنجی فایل.

نصب (Installation)

1npx @quark-lab/rad-ui add input

نمونه‌ها (Examples)

استفاده پایه (Basic Usage)

ساده‌ترین حالت استفاده از ورودی متن.

مشاهده کد
1import { Input } from "@/components/ui/input";
2
3export default function BasicExample() {
4  return <Input type="email" placeholder="ایمیل خود را وارد کنید..." />;
5}
6

با برچسب (With Label)

استفاده از ورودی همراه با برچسب و توضیحات.

این نام کاربری عمومی شما خواهد بود.

مشاهده کد
1import { Input } from "@/components/ui/input";
2import { Label } from "@/components/ui/label";
3
4export default function WithLabelExample() {
5  return (
6    <div className="space-y-2">
7      <Label htmlFor="input-username">نام کاربری</Label>
8      <Input id="input-username" placeholder="یک نام کاربری انتخاب کنید" />
9      <p className="text-sm text-muted-foreground">
10        این نام کاربری عمومی شما خواهد بود.
11      </p>
12    </div>
13  );
14}
15

درون‌خطی (Inline)

قرارگیری ورودی و دکمه در یک خط.

مشاهده کد
1import { Input } from "@/components/ui/input";
2import { Button } from "@/components/ui/button";
3
4export default function InlineExample() {
5  return (
6    <div className="flex w-full max-w-sm items-center gap-2">
7      <Input type="email" placeholder="ایمیل" />
8      <Button type="submit">جستجو</Button>
9    </div>
10  );
11}
12

شبکه‌ای (Grid)

چیدمان ورودی‌ها در یک شبکه.

مشاهده کد
1import { Input } from "@/components/ui/input";
2import { Label } from "@/components/ui/label";
3
4export default function GridExample() {
5  return (
6    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
7      <div className="space-y-2">
8        <Label htmlFor="grid-first-name">نام</Label>
9        <Input id="grid-first-name" placeholder="نام" />
10      </div>
11      <div className="space-y-2">
12        <Label htmlFor="grid-last-name">نام خانوادگی</Label>
13        <Input id="grid-last-name" placeholder="نام خانوادگی" />
14      </div>
15    </div>
16  );
17}
18

اجباری (Required)

نشان دادن فیلد اجباری.

مشاهده کد
1import { Input } from "@/components/ui/input";
2import { Label } from "@/components/ui/label";
3
4export default function RequiredExample() {
5  return (
6    <div className="space-y-2">
7      <Label htmlFor="required-input">
8        ورودی اجباری <span className="text-destructive">*</span>
9      </Label>
10      <Input
11        id="required-input"
12        required
13        placeholder="این ورودی باید پر شود."
14      />
15    </div>
16  );
17}
18

حالت غیرفعال (Disabled)

ورودی غیرفعال که کاربر نمی‌تواند آن را تغییر دهد.

مشاهده کد
1import { Input } from "@/components/ui/input";
2import { Label } from "@/components/ui/label";
3
4export default function DisabledExample() {
5  return (
6    <div className="space-y-2">
7      <Label htmlFor="disabled">ایمیل</Label>
8      <Input
9        disabled
10        type="email"
11        placeholder="ایمیل"
12        value="این فیلد در حال حاضر غیرفعال است"
13      />
14    </div>
15  );
16}
17

نامعتبر (Invalid)

نمایش حالت خطا به صورت دستی.

این فیلد حاوی خطای اعتبارسنجی است.

مشاهده کد
1import { Input } from "@/components/ui/input";
2import { Label } from "@/components/ui/label";
3
4export default function InvalidExample() {
5  return (
6    <div className="space-y-2">
7      <Label htmlFor="invalid" className="text-destructive">
8        ورودی نامعتبر
9      </Label>
10      <Input
11        id="invalid"
12        aria-invalid="true"
13        className="border-destructive focus-visible:ring-destructive"
14        placeholder="ایمیل خود را وارد کنید"
15        defaultValue="invalid-input"
16      />
17      <p className="text-sm text-destructive">
18        این فیلد حاوی خطای اعتبارسنجی است.
19      </p>
20    </div>
21  );
22}
23

با نشان (With Badge)

افزودن نشان به برچسب ورودی.

آزمایشی
مشاهده کد
1import { Input } from "@/components/ui/input";
2import { Label } from "@/components/ui/label";
3import { Badge } from "@/components/ui/badge";
4
5export default function WithBadgeExample() {
6  return (
7    <div className="space-y-2">
8      <div className="flex items-center gap-2">
9        <Label htmlFor="badge-input">آدرس وب‌هوک</Label>
10        <Badge variant="secondary" className="text-[10px] h-5 px-1.5">
11          آزمایشی
12        </Badge>
13      </div>
14      <Input id="badge-input" placeholder="https://example.com/webhook" />
15    </div>
16  );
17}
18

اندازه‌ها (Sizes)

ورودی‌ها در سه اندازه کوچک، متوسط و بزرگ موجود هستند.

مشاهده کد
1import { Input } from "@/components/ui/input";
2
3export default function SizesExample() {
4  return (
5    <div className="space-y-6">
6      <Input size="sm" placeholder="ورودی کوچک..." />
7      <Input size="md" placeholder="ورودی متوسط..." />
8      <Input size="lg" placeholder="ورودی بزرگ..." />
9    </div>
10  );
11}
12

ویژگی‌های پیشرفته (Advanced Features)

اعتبارسنجی (Validation)

اعتبارسنجی خودکار برای شماره تلفن، عدد، ایمیل و الگوی سفارشی.

مشاهده کد
1import { Input } from "@/components/ui/input";
2import { Label } from "@/components/ui/label";
3
4export default function ValidationExample() {
5  return (
6    <div className="space-y-6">
7      <div className="space-y-2">
8        <Label htmlFor="phone-validate">شماره تلفن</Label>
9        <Input
10          id="phone-validate"
11          type="tel"
12          validate
13          showError
14          placeholder="+98 912 345 6789"
15        />
16      </div>
17      <div className="space-y-2">
18        <Label htmlFor="number-validate">مبلغ</Label>
19        <Input
20          id="number-validate"
21          type="number"
22          validate
23          showError
24          placeholder="۱۰۰۰۰"
25        />
26      </div>
27      <div className="space-y-2">
28        <Label htmlFor="email-validate">ایمیل</Label>
29        <Input
30          id="email-validate"
31          type="email"
32          validate
33          showError
34          placeholder="user@example.com"
35        />
36      </div>
37      <div className="space-y-2">
38        <Label htmlFor="custom-pattern">کد پستی (۱۰ رقم)</Label>
39        <Input
40          id="custom-pattern"
41          validationPattern={/^\d{10}$/}
42          validationMessage="کد پستی باید ۱۰ رقم باشد."
43          showError
44          placeholder="۱۲۳۴۵۶۷۸۹۰"
45        />
46      </div>
47    </div>
48  );
49}
50

محدودیت کاراکتر (Character Restriction)

محدود کردن کاراکترهای ورودی به اعداد، حروف یا فارسی.

مشاهده کد
1import { Input } from "@/components/ui/input";
2import { Label } from "@/components/ui/label";
3
4export default function RestrictionsExample() {
5  return (
6    <div className="space-y-6">
7      <div className="space-y-2">
8        <Label htmlFor="digits-only">فقط اعداد</Label>
9        <Input
10          id="digits-only"
11          allowedCharacters="digits"
12          placeholder="فقط اعداد را تایپ کنید..."
13        />
14      </div>
15      <div className="space-y-2">
16        <Label htmlFor="alpha-only">فقط حروف</Label>
17        <Input
18          id="alpha-only"
19          allowedCharacters="alpha"
20          placeholder="فقط حروف فارسی و انگلیسی..."
21        />
22      </div>
23      <div className="space-y-2">
24        <Label htmlFor="persian-only">فقط فارسی</Label>
25        <Input
26          id="persian-only"
27          allowedCharacters="persian"
28          placeholder="فقط حروف فارسی و نشانه‌گذاری..."
29        />
30      </div>
31    </div>
32  );
33}
34

محدودیت طول (Max Length)

محدود کردن طول ورودی با نمایش شمارنده.

0/50
مشاهده کد
1import { Input } from "@/components/ui/input";
2import { Label } from "@/components/ui/label";
3
4export default function MaxLengthExample() {
5  return (
6    <div className="space-y-2">
7      <Label htmlFor="max-length">توضیحات کوتاه</Label>
8      <Input
9        id="max-length"
10        maxInputLength={50}
11        placeholder="حداکثر ۵۰ کاراکتر..."
12      />
13    </div>
14  );
15}
16

ورودی فایل (File Input)

آپلود فایل با قابلیت محدود کردن حجم و فرمت.

فایلی انتخاب نشده

یک تصویر برای آپلود انتخاب کنید.

فایلی انتخاب نشده

حداکثر حجم: 2.0 مگابایت · فرمت‌های مجاز: .png، .jpg، .jpeg، .webp

مشاهده کد
1import { Input } from "@/components/ui/input";
2import { Label } from "@/components/ui/label";
3
4export default function FileInputExample() {
5  return (
6    <div className="space-y-6">
7      <div className="space-y-2">
8        <Label htmlFor="picture">تصویر</Label>
9        <Input id="picture" type="file" />
10        <p className="text-sm text-muted-foreground">
11          یک تصویر برای آپلود انتخاب کنید.
12        </p>
13      </div>
14      
15      <div className="space-y-2">
16        <Label htmlFor="file-size">آپلود تصویر (حداکثر ۲ مگابایت)</Label>
17        <Input
18          id="file-size"
19          type="file"
20          maxFileSize={2 * 1024 * 1024}
21          acceptFormats={[".png", ".jpg", ".jpeg", ".webp"]}
22          showError
23        />
24      </div>
25    </div>
26  );
27}
28

مثال عملی (Practical Example)

فرم کامل (Form)

یک فرم کامل با استفاده از انواع ورودی‌ها و اعتبارسنجی.

مشاهده کد
1import { Input } from "@/components/ui/input";
2import { Label } from "@/components/ui/label";
3import { Button } from "@/components/ui/button";
4import { Search, Mail, User, Phone, MapPin } from "lucide-react";
5
6export default function FormExample() {
7  return (
8    <form className="space-y-6">
9      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
10        <div className="space-y-2">
11          <Label htmlFor="form-name">نام</Label>
12          <div className="relative">
13            <User className="absolute start-3 top-3 h-4 w-4 text-muted-foreground" />
14            <Input
15              id="form-name"
16              className="ps-9"
17              placeholder="نام کامل"
18            />
19          </div>
20        </div>
21        <div className="space-y-2">
22          <Label htmlFor="form-email">ایمیل</Label>
23          <div className="relative">
24            <Mail className="absolute start-3 top-3 h-4 w-4 text-muted-foreground" />
25            <Input
26              id="form-email"
27              className="ps-9"
28              type="email"
29              validate
30              showError
31              placeholder="user@example.com"
32            />
33          </div>
34        </div>
35      </div>
36
37      <div className="space-y-2">
38        <Label htmlFor="form-phone">شماره تماس</Label>
39        <div className="relative">
40          <Phone className="absolute start-3 top-3 h-4 w-4 text-muted-foreground" />
41          <Input
42            id="form-phone"
43            className="ps-9"
44            type="tel"
45            validate
46            showError
47            placeholder="0912..."
48          />
49        </div>
50      </div>
51
52      <div className="space-y-2">
53        <Label htmlFor="form-address">آدرس</Label>
54        <div className="relative">
55          <MapPin className="absolute start-3 top-3 h-4 w-4 text-muted-foreground" />
56          <Input
57            id="form-address"
58            className="ps-9"
59            placeholder="آدرس پستی"
60          />
61        </div>
62      </div>
63
64      <div className="flex justify-end gap-4">
65        <Button variant="outline" type="button">
66          لغو
67        </Button>
68        <Button type="submit">ثبت اطلاعات</Button>
69      </div>
70    </form>
71  );
72}
73

مرجع API (API Reference)

Input

پراپ‌های کامپوننت ورودی.

پراپ (Prop)نوع (Type)پیش‌فرض (Default)توضیحات (Description)
size"sm" | "md" | "lg""md"اندازه ورودی
typestring"text"نوع ورودی HTML (text, email, tel, number, file, ...)
validatebooleanfalseفعال‌سازی اعتبارسنجی خودکار بر اساس type
validationPatternRegExp-الگوی regex سفارشی برای اعتبارسنجی
validationMessagestring-پیام خطای سفارشی (جایگزین پیام فارسی پیش‌فرض)
onValidationChange(result) => void-callback هنگام تغییر وضعیت اعتبارسنجی
allowedCharactersRegExp | "digits" | "alpha" | "alphanumeric" | "persian"-محدود کردن کاراکترهای مجاز هنگام تایپ
maxInputLengthnumber-حداکثر طول ورودی با نمایش شمارنده کاراکتر
maxFileSizenumber-حداکثر حجم فایل به بایت (فقط برای type='file')
acceptFormatsstring[]-فرمت‌های مجاز فایل (فقط برای type='file')
showErrorbooleanfalseنمایش پیام خطا زیر ورودی
classNamestring-کلاس‌های CSS سفارشی

پشتیبانی RTL

کامپوننت Input به طور کامل از جهت‌گیری راست‌چین پشتیبانی می‌کند. متن‌ها، placeholder، padding‌ها و پیام‌های خطا به طور خودکار بر اساس جهت سند تنظیم می‌شوند. تمام پیام‌های اعتبارسنجی پیش‌فرض به زبان فارسی هستند.