حقل الإدخال (Input)

يتيح لك مكوّن حقل الإدخال كتابة إجابة قصيرة في سطر واحد، مع تسمية ونص مساعد وأيقونات عند الحاجة. ويُظهر الحقل نتيجة التحقق من القيمة، بأربعة أحجام وشكلين للزوايا.

التثبيت

bash

npx @smicolon/fasla-ui@latest add input

قبل إضافة أي مكوّن، شغّل الأمر init مرة واحدة في مشروعك. التفاصيل في صفحة التثبيت.

معاينة

الاسم الكامل

كما يظهر في بطاقة الهوية.

الأنماط (variant)

الاسم الكامل

ابحث في الطلبات

الاسم الكامل

رمز الخصم

طُبِّق الخصم على طلبك.

البريد الإلكتروني

أدخل بريدًا إلكترونيًا صحيحًا، مثل name@example.com

رقم الحساب

تواصل مع الدعم لتغييره.

الأحجام

التسميات والأيقونات

الاسم الكامل

اختياري

كما يظهر في بطاقة الهوية.

10/40

كلمة المرور

8 أحرف على الأقل.

الخصائص (props)

الخاصية	النوع	الافتراضي	الوصف
`size`	`"xs" \| "sm" \| "md" \| "lg"`	`"md"`	ارتفاع الحقل: 28 أو 32 أو 36 أو 40px.
`radius`	`"standard" \| "rounded"`	`"standard"`	شكل الزوايا: بنصف قطر 8px، أو مستديرة بالكامل فيبدو الحقل كبسولة.
`status`	`"default" \| "success"`	`"default"`	اختر القيمة `success` لتمييز قيمة اجتازت التحقق.
`invalid`	`boolean`	`false`	يجعل الحقل غير صالح، وللسمة `aria-invalid` الأثر نفسه.
`disabled`	`boolean`	`false`	يعطّل الحقل ويُظهر المجموعة كلها باهتة.
`label`	`ReactNode`	لا يوجد	تسمية الحقل، ترتبط بحقل الإدخال تلقائيًا.
`labelEnd`	`ReactNode`	لا يوجد	ملاحظة قصيرة في نهاية سطر التسمية، مثل «اختياري».
`description`	`ReactNode`	لا يوجد	نص مساعد تحت الحقل، يقرؤه قارئ الشاشة مع الحقل.
`descriptionEnd`	`ReactNode`	لا يوجد	ملاحظة في نهاية سطر النص المساعد، مثل عدّاد الأحرف.
`error`	`ReactNode`	لا يوجد	رسالة تظهر مكان `description` ما دام الحقل غير صالح.
`startIcon`	`ReactNode`	لا يوجد	أيقونة في بداية الحقل.
`endIcon`	`ReactNode`	لا يوجد	أيقونة أو زر صغير في نهاية الحقل.
`placeholder`	`string`	لا يوجد	نص يظهر والحقل فارغ.
`type`	`string`	`"text"`	نوع الحقل، مثل `email`.
`value`	`string`	لا يوجد	قيمة الحقل، وتُستخدم مع `onChange`.
`onChange`	`(event) => void`	لا يوجد	تُستدعى عند تغيير النص.
`className`	`string`	لا يوجد	أصناف CSS إضافية لمجموعة الحقل.

الاستخدام

tsx

import { Mail } from "lucide-react"
import { Input } from "@/components/ui/input"

export function EmailField() {
  return (
    <Input
      name="email"
      type="email"
      label="البريد الإلكتروني"
      description="نرسل إليه إيصال الطلب."
      startIcon={<Mail />}
    />
  )
}