> ## 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.

# صف حقل النموذج

> محاذاة تسمية حقل والمحتوى وعناصر التحكم الختامية في صف مشترك.

## نظرة عامة

`FormFieldRow` يرتب تسمية الحقل والأيقونة الزخرفية الاختيارية ومحتوى الحقل وعناصر التحكم الختامية. استخدمه لحقول المؤلف أو مجموعات الحقول الأخرى المحاذاة. يتحكم تطبيقك في قيم الحقول والتحقق من الصحة والأذونات والاستمرارية.

**Light**

[صف حقل النموذج (light)](https://storybook.twenty.com/iframe.html?id=ui-input-formfieldrow--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[صف حقل النموذج (dark)](https://storybook.twenty.com/iframe.html?id=ui-input-formfieldrow--display\&viewMode=story\&globals=colorScheme:dark)

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

## استخدام

```tsx theme={null}
import { useState } from 'react';
import { FormFieldRow, LightButton } from 'twenty-ui/components/input';
import { Input } from 'twenty-ui/primitives/input';

export const SubjectField = () => {
  const [subject, setSubject] = useState('Project update');

  return (
    <FormFieldRow
      label="Subject"
      hasDivider={false}
      trailing={
        <LightButton size="sm" onClick={() => setSubject('')}>
          Clear
        </LightButton>
      }
    >
      <Input
        variant="plain"
        aria-label="Subject"
        value={subject}
        onValueChange={setSubject}
      />
    </FormFieldRow>
  );
};
```

## التخطيط والتسميات

تكون القيمة الافتراضية لـ `labelWidth` هي 80 بكسل، ويقبل عرض CSS. استخدم القيمة نفسها في الصفوف الشقيقة لمحاذاة تسمياتها. يُحدَّد عمود التسمية بنسبة 40% من الصف، ويمكن أن يلتف المحتوى في التخطيطات الضيقة. `startIcon` للزينة؛ ويحدد المستدعي أبعاده. اضبط `hasDivider={false}` في الصف الأخير عندما يوفر السطح المحيط حدوده.

الجذر هو مجموعة تُسمّى بواسطة `label`. وفّر `aria-label` أو `aria-labelledby` عند حذف التسمية المرئية، وسمِّ كل إدخال متداخل بشكل منفصل. لا ينقل الصف التركيز ولا يعطّل عناصر التحكم المتداخلة. تحتفظ عناصر التحكم هذه بسلوك لوحة المفاتيح وأنماط التركيز الخاصة بها.

## الأحداث والتخصيص

تُطبَّق السمات الأصلية ومعالجات الأحداث و`className` و`style` و`ref` و`render` على جذر المجموعة. مرّر props وref الموفَّرين عند استبدال الجذر عبر `render`. يعرض معالج `onClick` مؤشرًا على شكل سهم. يتحكم المستدعي في سلوك النقر للتركيز، ويحمي الأحداث من عناصر التحكم المتداخلة أو البوابات عند الحاجة. يتيح `isHoverable` بشكل مستقل خلفية تمرير محايدة.

يطبّق `trailingProps` السمات الأصلية والمعالجات وref على الغلاف اللاحق الموجود. يُدمج `className` الخاص به مع فئة التخطيط المشتركة. استخدم معالج `onClick` الخاص به لمنع إجراء لاحق من تشغيل معالج النقر للصف. يوجد الغلاف فقط عندما يحتوي `trailing` على محتوى قابل للعرض.

## الإزاحة

**children** `ReactNode` *required*

Field content, such as plain inputs, recipient chips, selectors or toggles. The caller owns input labels, state and click-to-focus behavior.

**className** `string`

CSS class applied to the group root.

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

Shows a decorative bottom divider. Set false on the final row when the surrounding surface supplies its own border.

**isHoverable** `boolean` (default: false)

Enables a neutral hover background independently of click handlers. Keyboard focus remains on nested controls without changing the row background.

**label** `string`

Optional visible field label and default group name. Supply aria-label or aria-labelledby when the label is omitted. Label each nested input separately.

**labelWidth** `Width\<string | number\>` (default: 80)

Preferred label column width, capped at 40% of the row. Numbers use pixels; use the same width for aligned sibling rows.

**onClick** `MouseEventHandler\<HTMLDivElement\>`

Native group click handler. Providing a handler shows a pointer cursor; the caller guards nested-control and portaled events as needed.

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

Ref forwarded to the group root div.

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

Customizes the group root. Forward its props and ref.

**startIcon** `ReactNode`

Optional decorative icon before the label. The caller controls icon dimensions.

**style** `CSSProperties`

Inline styles applied to the group root.

**trailing** `ReactNode`

Optional trailing content. Nested controls retain their own keyboard focus and event behavior.

**trailingProps** `Omit\<DetailedHTMLProps\<HTMLAttributes\<HTMLDivElement\>, HTMLDivElement\>, "children"\>`

Native props, event handlers and ref applied to the trailing content wrapper. The wrapper is rendered only when trailing content is present; className is merged with the shared layout class.


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