> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# InputGroup

> أضف بادئات ولاحقات وإجراءات حول حقل إدخال نصي.

## نظرة عامة

يمنح `InputGroup` [الإدخال](https://docs.twenty.com/ar/ui/primitives/input/input.md) حدًا مشتركًا ومحتوى بادئًا أو لاحقًا اختياريًا. اضبط `size` على المجموعة لتحديد حجم الحاوية وتوفير قيمة افتراضية لإدخالها. يكون لحجم العنصر الفرعي المحدد صراحةً الأولوية على تلك القيمة الافتراضية؛ وتظل المجموعة تتحكم في ارتفاع التخطيط المشترك.

**Light**

[مثال InputGroup (light)](https://storybook.twenty.com/iframe.html?id=ui-input-inputgroup--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[مثال InputGroup (dark)](https://storybook.twenty.com/iframe.html?id=ui-input-inputgroup--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-input-inputgroup--display)

## استخدام

```tsx theme={null}
import { Field, Input, InputGroup } from 'twenty-ui/primitives/input';
import { Text } from 'twenty-ui/primitives/typography';

export const WebsiteField = () => (
  <Field.Root name="website">
    <Field.Label>Website</Field.Label>
    <InputGroup
      startElement={
        <Text render={<span />} aria-hidden>
          https://
        </Text>
      }
    >
      <Input placeholder="example.com" />
    </InputGroup>
    <Field.Description>Enter the domain without https://.</Field.Description>
  </Field.Root>
);
```

يقبل `startElement` و`endElement` عُقد React. البادئات واللاحقات هي محتوى مرئي؛ تحتوي القيمة المُرسلة لعنصر الإدخال على ما يُدخله المستخدم فقط.

## خيارات مرئية

قارن ملحقات البادئة واللاحقة والملحقات المدمجة في كلا حجمي الإدخال. تتشارك المجموعة حجمها مع الإدخال.

**Light**

[خيارات مرئية لمجموعة الإدخال (light)](https://storybook.twenty.com/iframe.html?id=ui-input-inputgroup--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[خيارات مرئية لمجموعة الإدخال (dark)](https://storybook.twenty.com/iframe.html?id=ui-input-inputgroup--catalog\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-input-inputgroup--catalog)

## البنية التشريحية

ضع حقل الإدخال داخل `InputGroup` وأبقِ تسميات الحقول والرسائل خارج الحدود المشتركة.

```text theme={null}
Field.Root
├── Field.Label
├── InputGroup
│   └── Input
└── Field.Description
```

| الجزء أو الموضع | المتطلبة | الغرض |
| - | - | - |
| `InputGroup` | مطلوب | يوفر الحدود المشتركة والتخطيط والحجم. |
| `Input` بوصفه `children` | مطلوب | يمتلك قيمة الإدخال والسمات الأصلية وسلوك التحرير. |
| `startElement` | خاصية اختيارية | يضيف بادئة أو أيقونة أو محتوى آخر قبل الإدخال. |
| `endElement` | خاصية اختيارية | يضيف لاحقة أو إجراءً بعد الإدخال. |
| `Field.Root`, `Label`, `Description`, `Error` | تركيب اختياري | يربط تسمية ونصًا مساعدًا وملاحظات التحقق بالإدخال. |

`startElement` و`endElement` هما خصائص عقد React، وليسا مكونات منفصلة. لا يوفر `InputGroup` تسمية ولا يدير التحقق. امنح الإدخال اسمًا يمكن الوصول إليه، إما عبر `Field.Label` أو عبر سمات التسمية الخاصة به.

## إجراء لاحق

```tsx theme={null}
import { useState } from 'react';
import { Button, Field, Input, InputGroup } from 'twenty-ui/primitives/input';

export const PasswordField = () => {
  const [visible, setVisible] = useState(false);

  return (
    <Field.Root name="password">
      <Field.Label>Password</Field.Label>
      <InputGroup
        endElement={
          <Button
            type="button"
            aria-label={visible ? 'Hide password' : 'Show password'}
            variant="ghost"
            size="sm"
            onClick={() => setVisible(!visible)}
          >
            {visible ? 'Hide' : 'Show'}
          </Button>
        }
      >
        <Input
          type={visible ? 'text' : 'password'}
          autoComplete="current-password"
        />
      </InputGroup>
    </Field.Root>
  );
};
```

ضع التسميات والتحقق ومعالجة القيمة على الحقل أو عنصر الإدخال. امنح أزرار الزخرفة أسماء يمكن الوصول إليها خاصة بها، واستخدم `type="button"` عندما لا ينبغي لها إرسال النموذج. تدعم المجموعة المقاسين `sm` و`md`، وتستخدم `md` افتراضيًا.

## تخصيص التخطيط

تستهدف الخصائص الأصلية و`className` و`style` و`render` و`ref` عنصر div الخاص بالتخطيط. يتلقى عنصر `render` مخصص خصائص التخطيط والعناصر الفرعية. أبقِ المرجع supplied على عنصر التخطيط هذا.

ضع `value` و`defaultValue` و`onValueChange` و`name` و`required` و`readOnly` و`disabled` ومرجع عنصر التحكم الأصلي على `Input`. لا تدير المجموعة حالة الإدخال ولا تستبدل ارتباط تسمية Field.

## الخصائص

يُنشأ المرجع من أنواع المكونات العامة. تُقبل أيضًا السمات الأصلية، بما في ذلك الأسماء التي يمكن الوصول إليها ومعالجات الأحداث، على الأجزاء التي تعرض عناصر.

**endElement** `ReactNode`

Content rendered after the input, such as a suffix or a button.

**hasFocusRing** `boolean` (default: true)

Set false to keep the group border unchanged on focus. Defaults to true. Error styling remains visible.

**ref** `Ref\<HTMLDivElement\>`

Ref to the layout element, a div by default.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, \{\}\>`

Customizes the layout element. Forward its props, children and ref. Native control props belong on the child input.

**size** `"md" | "sm"` (default: md)

Visual size of the layout and default size for inputs that omit size. Defaults to md.

**startElement** `ReactNode`

Content rendered before the input, such as a prefix or an icon.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.