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