کد پستی
postal-code-inputکامپوننتکد پستی ده‌رقمی با اعداد فارسی و گروه‌بندی ۵-۵ مثل روی قبض‌ها. با خط تیره یا بدونش پیست میشه و خطای طول بعد از خروج از فیلد نشون داده میشه.
ده رقم، بدون خط تیره هم قبول میشه
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگی‌هاش را می‌نویسه.
$ npx vibefarsi add postal-code-inputنصب دستی
محتوای تب «کد» را در
components/ui/postal-code-input.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { PostalCodeInput } from "@/components/ui/postal-code-input"23<PostalCodeInput name="postal" onChange={(digits, valid) => setPostal(valid ? digits : null)} />پراپ‌ها
| پراپ | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| value / defaultValue | string | - | رقم‌های لاتین. رشته بمونه تا صفر اول حذف نشه. |
| onChange | (digits, valid) => void | - | رقم‌های نرمال‌شده و نتیجه‌ی اعتبارسنجی. |
| invalid | boolean | - | بعد از ثبت فرم true بدید تا خالی یا ناقص بودن هم خطا بده. |
| name | string | - | ورودی مخفی با ده رقم، فقط وقتی معتبر باشه. |
نکته‌های راست‌چین
- پست ایران رقم کنترل منتشر نکرده، پس اینجا فقط ده رقم بودن و تکراری نبودن همه‌ی رقم‌ها بررسی میشه.
- autoComplete="postal-code" مرورگر را وادار می‌کنه کد ذخیره‌شده را پیشنهاد کنه.