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

# Riga del campo modulo

> Allinea un'etichetta di campo, il contenuto e i controlli finali in una riga condivisa.

## Panoramica

`FormFieldRow` dispone un'etichetta di campo, un'icona decorativa facoltativa, il contenuto del campo e i controlli finali. Usalo per i campi del compositore o altri gruppi di campi allineati. L'applicazione gestisce i valori dei campi, la convalida, le autorizzazioni e la persistenza.

**Light**

[Riga del campo del modulo (light)](https://storybook.twenty.com/iframe.html?id=ui-input-formfieldrow--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Riga del campo del modulo (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)

## Utilizzo

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

## Layout ed etichette

`labelWidth` è impostato per impostazione predefinita su 80 pixel e accetta una larghezza CSS. Utilizza lo stesso valore nelle righe affiancate per allinearne le etichette. La colonna dell'etichetta è limitata al 40% della riga e il contenuto può andare a capo nei layout stretti. `startIcon` è decorativo; il chiamante ne fornisce le dimensioni. Imposta `hasDivider={false}` su una riga finale quando la superficie circostante fornisce il relativo bordo.

La radice è un gruppo denominato da `label`. Fornisci `aria-label` o `aria-labelledby` quando l'etichetta visibile è omessa ed etichetta separatamente ogni input annidato. La riga non sposta lo stato attivo né disabilita i controlli annidati. Tali controlli mantengono il proprio comportamento da tastiera e lo stile dello stato attivo.

## Eventi e personalizzazione

Gli attributi nativi, i gestori di eventi, `className`, `style`, `ref` e `render` si applicano alla radice del gruppo. Inoltra le props e il ref forniti quando sostituisci la radice tramite `render`. Un gestore `onClick` mostra un cursore a forma di puntatore. Il chiamante gestisce il comportamento di messa a fuoco al clic e, se necessario, protegge gli eventi dai controlli annidati o dai portali. `isHoverable` abilita in modo indipendente uno sfondo neutro al passaggio del mouse.

`trailingProps` applica attributi nativi, gestori e ref al wrapper finale esistente. Il relativo `className` viene unito alla classe di layout condivisa. Utilizza il relativo gestore `onClick` per impedire che un'azione finale attivi un gestore di clic della riga. Il wrapper esiste solo quando `trailing` contiene contenuto renderizzabile.

## Props

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