ورودی
inputکامپوننتورودی متن با برچسب، پیشوند/پسوند و پیام خطا. فیلد موبایل خودش چپچین میشود.
+98
کد تأیید به این شماره پیامک میشود
تومان
حداقل مبلغ ۲ میلیون تومان است
نصب
با CLI
اگر هنوز init نکردهاید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور قطعه و وابستگیهایش را مینویسد.
$ npx vibefarsi add inputنصب دستی
محتوای تب «کد» را در
components/ui/input.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { Input, Field } from "@/components/ui/input"23<Field label="نام و نام خانوادگی" htmlFor="name">4 <Input id="name" placeholder="مثلاً: سارا محمدی" />5</Field>67<Field label="شمارهی موبایل" htmlFor="phone" hint="کد تأیید به این شماره پیامک میشود">8 <Input id="phone" dir="ltr" inputMode="tel" startAddon="+98" placeholder="912 345 6789" />9</Field>پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| startAddon | ReactNode | - | محتوای ابتدای فیلد (سمت راست در RTL)، مثل پیششماره. |
| endAddon | ReactNode | - | محتوای انتهای فیلد، مثل واحد یا آیکون. |
| error | string | - | پیام خطا زیر فیلد؛ aria-invalid را هم میگذارد. |
| dir | "rtl" | "ltr" | ارثبری | برای موبایل، ایمیل و کد از ltr استفاده کنید. |
نکتههای راستچین
- برچسب همیشه بالا و با htmlFor وصل باشد؛ placeholder جای برچسب نیست.
- برای شمارهی موبایل dir="ltr" و inputMode="tel" بگذارید تا کیبورد عددی و ترتیب رقمها درست باشد.