# Input

حقل نص من سطر واحد. حجمان وثلاث تعبئات وبادئة ولاحقة، وكل الحالات: التمرير والتركيز والتعبئة والقراءة فقط والتعطيل والخطأ.

<Preview name="input-states" title="حالات حقل الإدخال" />

## التثبيت

<ComponentInstall name="input" />

ويثبّت [Field](/ar/docs/components/field) أيضًا.

## الاستخدام

```tsx title="page.tsx"
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";

export function NameField() {
  return (
    <Field name="name">
      <FieldLabel required>الاسم الكامل</FieldLabel>
      <Input required autoComplete="name" />
      <FieldDescription>كما يظهر في بطاقة الهوية.</FieldDescription>
    </Field>
  );
}
```

استخدم Input للإجابات القصيرة من سطر واحد: الأسماء والهويات وعناوين البريد وأرقام الهاتف. اضبط `type` و`inputMode` للوحة مفاتيح مناسبة، و`autoComplete` ليتمكن المتصفح من التعبئة. وللأرقام التي تزيد وتنقص استخدم [Number Input](/ar/docs/components/number-input)، وللنص متعدد الأسطر استخدم [Textarea](/ar/docs/components/textarea).

## البنية

- **الإطار** (`<div>`): الحد والتعبئة والظل والخط السفلي.
- **عنصر البداية** (اختياري): أيقونة أو بادئة قصيرة مثل `+966`.
- **Input** (`<input>`): النص.
- **عنصر النهاية** (اختياري): أيقونة أو لاحقة أو زر.

## أمثلة

### الأحجام

`lg` بارتفاع 40px (الافتراضي)، و`md` بارتفاع 32px.

<Preview compact name="input-sizes" title="الأحجام" />

### التعبئات

قيمة `appearance` إما `default` أو `lighter` أو `darker`. وكما في DGA لا حدّ للتعبئتين الأفتح والأغمق في حالة السكون، ويظهر الحد عند التمرير والتركيز والضغط. وتعرضها الحالات أدناه كلها.

<Preview name="input-states" title="التعبئات" />

### البادئة واللاحقة

يقبل `startAdornment` و`endAdornment` أيقونة أو نصًا، ويقعان في جهتي البداية والنهاية المنطقيتين. وتبقى أرقام الهاتف والبريد من اليسار إلى اليمين بـ `dir="ltr"`.

<Preview compact name="input-adornments" title="البادئة واللاحقة" />

## RTL

يبدأ النص والنص التلميحي والعناصر الجانبية من اليمين. ويُحاذى النص العربي المكتوب إلى اليمين، ويُحاذى النص اللاتيني (كالبريد) بحسب `dir="ltr"` عند ضبطه.

<DirectionCompare name="input-adornments" title="حقل الإدخال" />

## إمكانية الوصول

| المفتاح | الإجراء |
| --- | --- |
| <kbd>Tab</kbd> | ينقل التركيز إلى الحقل. |
| <kbd>Shift</kbd> + <kbd>Tab</kbd> | يعيد التركيز إلى الخلف. |

- عنصر `<input>` أصلي: سمّه دائمًا بـ [Field](/ar/docs/components/field)؛ فالنص التلميحي ليس تسمية.
- لا يوجد حد خارجي للتركيز. التمرير يُغمّق الحد. والضغط (بالفأرة أو اللمس) يعرض تعبئة الضغط وخطًا سفليًا بسمك 2px بنصف العرض ينمو من الوسط. والتركيز (بالفأرة أو لوحة المفاتيح) يعرض لون حد الضغط والخط السفلي بعرضه الكامل و`shadow-md` (بلا ظل في الوضع الداكن). وينمو الخط السفلي من الوسط إلى الجهتين في LTR وRTL معًا، وبنسبة 3:1 على الأقل على كل تعبئة.
- الحد الافتراضي بنسبة 3:1 أو أفضل مقابل الصفحة، فاتحًا وداكنًا (WCAG 1.4.11). وانظر الاختلافات للحالتين اللتين لا تبلغانها.
- يضبط الخطأ `aria-invalid` ويعرض أيقونة مع الرسالة. تبقى الحقول للقراءة فقط قابلة للتركيز، والمعطّلة لا.
- أيقونات العناصر الجانبية زخرفية (`aria-hidden`). وزر اللاحقة يحتاج `aria-label` خاصًا به.

## مرجع API

<ApiReference component="input" />

## الاختلافات عن DGA

- الحد الافتراضي هو neutral-500 لا neutral-400 (2.6:1 على الأبيض)، ليمكن العثور على الحقل في حالة السكون.
- النص التلميحي neutral-500 كما في DGA؛ ولا يستخدم neutral-600 إلا على تعبئتي الضغط والأغمق (4.34:1).
- حد الخطأ هو error-600 (كما في CSS الحي لـ DGA) لا error-700 في Figma.
- يعرض الحقل للقراءة فقط الخط السفلي عند التركيز، لأنه ما زال ضمن ترتيب Tab.
- فجوات معروفة، تُركت كما ترسمها DGA: حد القراءة فقط (1.5:1) والتعبئتان الأفتح والأغمق في حالة السكون (من 1.0 إلى 1.1:1).

<ComponentDeviations component="input" />

## التباين

<ComponentContrast component="input" />


---

[فهرس كل الصفحات](https://dga.omqkhafi.dev/ar/llms.txt)