twenty/packages/twenty-docs/l/ar/twenty-ui/input/text.mdx

---
title: نص
image: /images/user-guide/notes/notes_header.png
---

<Frame>
  <img src="/images/user-guide/notes/notes_header.png" alt="Header" />
</Frame>

## إدخال نص

يسمح للمستخدمين بإدخال وتحرير النص.

<Tabs>

<Tab title="Usage">

```jsx
import { RecoilRoot } from "recoil";
import { TextInput } from "@/ui/input/components/TextInput";

export const MyComponent = () => {
  const handleChange = (text) => {
    console.log("Input changed:", text);
  };

  const handleKeyDown = (event) => {
    console.log("Key pressed:", event.key);
  };

  return (
    <RecoilRoot>
      <TextInput
        className
        label="Username"
        onChange={handleChange}
        fullWidth={false}
        disableHotkeys={false}
        error="Invalid username"
        onKeyDown={handleKeyDown}
        RightIcon={null}
      />
    </RecoilRoot>
  );
};

```

</Tab>

<Tab title="Props">

| المحددات         | النوع       | الوصف                                                                                                                    |
| ---------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------ |
| className        | string      | اسم اختياري لتنسيقات إضافية                                                                                              |
| التسمية          | string      | يمثل التسمية للإدخال.                                                                                    |
| عند التغيير      | function    | الدالة التي تُستدعى عند تغيير قيمة الإدخال.                                                              |
| عرض كامل         | قيمة منطقية | يشير إلى ما إذا كان الإدخال يجب أن يشغل 100% من العرض.                                                   |
| تعطيل الإختصارات | قيمة منطقية | يشير إلى ما إذا كانت الاختصارات ممكنة للإدخال.                                                           |
| خطأ              | string      | يمثل رسالة الخطأ التي سيتم عرضها. عند توفرها، تضيف رمز خطأ على الجانب الأيمن من الإدخال. |
| onKeyDown        | function    | يتم الاستدعاء عندما يتم الضغط على مفتاح عند التركيز على حقل الإدخال. يتلقى `React.KeyboardEvent` كمعلمة  |
| أيقونة يمين      | مكون رمز    | مكون أيقونة اختياري معروض على الجانب الأيمن من الإدخال.                                                  |

يقبل المكون أيضًا دعم خصائص HTML أخرى لعناصر الإدخال.

</Tab>

</Tabs>

## إدخال نص بالحجم التلقائي

مكون إدخال نصي يعدل ارتفاعه تلقائيًا بناءً على المحتوى.

<Tabs>

<Tab title="Usage">

```jsx
import { RecoilRoot } from "recoil";
import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";

export const MyComponent = () => {
  return (
    <RecoilRoot>
      <AutosizeTextInput
        onValidate={() => console.log("onValidate function fired")}
        minRows={1}
        placeholder="Write a comment"
        onFocus={() => console.log("onFocus function fired")}
        variant="icon"
        buttonTitle
        value="Task: "
      />
    </RecoilRoot>
  );
};
```

</Tab>

<Tab title="Props">

| المحددات           | النوع    | الوصف                                                                                                      |
| ------------------ | -------- | ---------------------------------------------------------------------------------------------------------- |
| onValidate         | function | الدالة التي ترغب في تفعيلها عند تصديق المستخدم الإدخال.                                    |
| الحد الأدنى للأسطر | رقم      | عدد الأسطر الأدنى للمساحة النصية.                                                          |
| نص توضيحي          | string   | النص التوضيحي الذي ترغب في عرضه عند كون المساحة النصية فارغة.                              |
| onFocus            | function | الدالة التي ترغب في تفعيلها عند تركيز المساحة النصية.                                      |
| التنوع             | string   | البديل للإدخال. تشمل الخيارات: `افتراضي`، `أيقونة`، و`زر`. |
| عنوان الزر         | string   | العنوان للزر (فقط للبديل الزر).                                         |
| القيمة             | string   | القيمة الأولية للمساحة النصية.                                                             |

</Tab>

</Tabs>

## مساحة نصية

تتيح لك إنشاء إدخالات نصية متعددة الأسطر.

<Tabs>
<Tab title="Usage">

```jsx
import { TextArea } from "@/ui/input/components/TextArea";

export const MyComponent = () => {
  return (
    <TextArea
    disabled={false}
    minRows={4}
    onChange={()=>console.log('On change function fired')}
    placeholder="Enter text here"
    value=""
    />
  );
};
```

</Tab>

<Tab title="Props">

| المحددات           | النوع       | الوصف                                                       |
| ------------------ | ----------- | ----------------------------------------------------------- |
| معطل               | قيمة منطقية | يشير إلى ما إذا كانت المساحة النصية معطلة.  |
| الحد الأدنى للأسطر | رقم         | العدد الأدنى للأسطر الظاهرة للمساحة النصية. |
| عند التغيير        | function    | دالة الاستدعاء تُشغّل عند تغيّر محتوى منطقة النص            |
| نص توضيحي          | string      | النص المُوضّح عندما تكون منطقة النص فارغة                   |
| القيمة             | string      | القيمة الحالية لمنطقة النص                                  |

</Tab>
</Tabs>