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

> Aliniază o etichetă de câmp, conținutul și controalele de final într-un rând comun.

## Prezentare generală

`FormFieldRow` aranjează o etichetă de câmp, o pictogramă decorativă opțională, conținutul câmpului și controalele de final. Utilizează-l pentru câmpuri de compunere sau alte grupuri de câmpuri aliniate. Aplicația dvs. gestionează valorile câmpurilor, validarea, permisiunile și persistența.

**Light**

[Rând de câmpuri de formular (light)](https://storybook.twenty.com/iframe.html?id=ui-input-formfieldrow--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Rând de câmpuri de formular (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)

## Utilizare

```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>
  );
};
```

## Aspect și etichete

`labelWidth` are implicit 80 de pixeli și acceptă o lățime CSS. Utilizați aceeași valoare pe rândurile înrudite pentru a le alinia etichetele. Coloana etichetelor este limitată la 40% din rând, iar conținutul se poate încadra pe mai multe rânduri în aspecte înguste. `startIcon` este decorativ; apelantul îi furnizează dimensiunile. Setați `hasDivider={false}` pe un rând final atunci când suprafața înconjurătoare îi oferă chenarul.

Rădăcina este un grup denumit prin `label`. Furnizați `aria-label` sau `aria-labelledby` atunci când eticheta vizibilă este omisă și etichetați separat fiecare intrare imbricată. Rândul nu mută focalizarea și nu dezactivează controalele imbricate. Aceste controale își păstrează propriul comportament de la tastatură și propriul stil de focalizare.

## Evenimente și personalizare

Atributele native, gestionarii de evenimente, `className`, `style`, `ref` și `render` se aplică rădăcinii grupului. Transmiteți mai departe props și ref furnizate atunci când înlocuiți rădăcina prin `render`. Un gestionar `onClick` afișează un cursor indicator. Apelantul gestionează comportamentul de focalizare la clic și, când este necesar, protejează evenimentele provenite de la controale imbricate sau portaluri. `isHoverable` activează independent un fundal neutru la trecerea cursorului.

`trailingProps` aplică atribute native, gestionari și ref containerului final existent. `className` al acestuia este îmbinat cu clasa de aspect partajată. Utilizați gestionarul său `onClick` pentru a împiedica o acțiune finală să declanșeze un gestionar de clic al rândului. Containerul există numai atunci când `trailing` are conținut care poate fi redat.

## Proprietăți

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