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

> Allinea le etichette dei dettagli con valori su più righe e azioni facoltative.

## Panoramica

`DetailsRow` associa un'etichetta a un valore in un elenco di descrizioni. Aggiungi un'icona decorativa, più elementi di valore o un'azione fornita dalla tua applicazione.

**Light**

[Esempio di riga dei dettagli (light)](https://storybook.twenty.com/iframe.html?id=ui-data-display-detailsrow--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Esempio di riga dei dettagli (dark)](https://storybook.twenty.com/iframe.html?id=ui-data-display-detailsrow--display\&viewMode=story\&globals=colorScheme:dark)

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

## Utilizzo

```tsx theme={null}
import { DetailsRow } from 'twenty-ui/components/data-display';
import { IconNotes, IconTag, IconUser } from 'twenty-ui/icon';
import { Chip, Tag } from 'twenty-ui/primitives/data-display';
import { Card } from 'twenty-ui/primitives/surfaces';

export const CollectionDetails = () => (
  <Card.Root>
    <Card.Content>
      <dl style={{ display: 'grid', gap: 8, margin: 0 }}>
        <DetailsRow label="Owner" startIcon={<IconUser size={16} />}>
          <Chip>Jordan Lee</Chip>
        </DetailsRow>
        <DetailsRow label="Categories" startIcon={<IconTag size={16} />}>
          <Tag color="blue">Research</Tag>
          <Tag color="purple">Design</Tag>
        </DetailsRow>
        <DetailsRow label="Description" startIcon={<IconNotes size={16} />}>
          A shared collection of customer research and design decisions.
        </DetailsRow>
      </dl>
    </Card.Content>
  </Card.Root>
);
```

Inserisci ogni riga direttamente all'interno di un `dl`. Passa l'etichetta tramite `label` e il relativo valore tramite `children`. L'applicazione gestisce le etichette, la localizzazione, i valori formattati e i segnaposto per i valori mancanti.

## Allineamento e disposizione su più righe

Le etichette e i valori vanno a capo anziché essere troncati. Più elementi di valore, come chip o tag, vanno a capo su righe aggiuntive. Le righe allineano il proprio contenuto in alto man mano che questo cresce.

Per impostazione predefinita, la colonna dell'etichetta è `7rem` ed è limitata al 40% della larghezza della riga per lasciare spazio al valore in contenitori stretti. Imposta lo stesso `labelWidth` nelle righe dello stesso livello per regolarne l'allineamento. I numeri usano i pixel; sono supportate anche lunghezze CSS come `'8rem'`.

```tsx theme={null}
import { DetailsRow } from 'twenty-ui/components/data-display';

export const PublicationDetails = () => (
  <dl style={{ display: 'grid', gap: 8, margin: 0, maxWidth: 360 }}>
    <DetailsRow label="Primary contributor" labelWidth={128}>
      Jordan Lee
    </DetailsRow>
    <DetailsRow label="Review notes" labelWidth={128}>
      Include findings from the customer interviews before publication.
    </DetailsRow>
  </dl>
);
```

## Azioni

Usa `action` per un controllo accanto al valore. La riga non aggiunge comportamenti di modifica, clic o tastiera. Fornisci un controllo con un nome accessibile e collega il relativo gestore al comportamento dell'applicazione.

```tsx theme={null}
import { DetailsRow } from 'twenty-ui/components/data-display';
import { LightIconButton } from 'twenty-ui/components/input';
import { IconCopy } from 'twenty-ui/icon';

export const ContactDetails = ({ onCopy }: { onCopy: () => void }) => (
  <dl style={{ margin: 0 }}>
    <DetailsRow
      label="Email"
      action={
        <LightIconButton aria-label="Copy email address" onClick={onCopy}>
          <IconCopy size={16} />
        </LightIconButton>
      }
    >
      jordan@example.com
    </DetailsRow>
  </dl>
);
```

## Composizione e accessibilità

Ogni riga esegue il rendering di un raggruppamento `div` con un'etichetta `dt` e un `dd` contenente il valore e l'azione facoltativa. Il chiamante fornisce il `dl` contenitore. Fornisci testo significativo nell'etichetta. Il `startIcon` facoltativo è nascosto alle tecnologie assistive e il chiamante ne controlla le dimensioni.

Gli attributi nativi, `className`, `style` e `ref` si applicano al `div` esterno. Quando usi `render` con un wrapper personalizzato, mantieni tale `div` direttamente all'interno del `dl` e inoltra tutte le props fornite e il ref. Mantieni le azioni nel relativo slot affinché il termine e la definizione rimangano i figli diretti della riga.

Usa [MetricRow](https://docs.twenty.com/it/ui/components/data-display/metric-row.md) per una metrica con avanzamento facoltativo. `DetailsRow` fornisce solo il layout di etichetta, valore e azione.

## Props

**action** `ReactNode`

Optional action content beside the value. The caller supplies controls, accessible names, and handlers.

**children** `ReactNode` *required*

Value content rendered in the description definition. Text and multiple items wrap within the available space.

**className** `string`

CSS class applied to the row root.

**label** `ReactNode` *required*

Visible label rendered as the description term.

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

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

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

Ref forwarded to the row root div.

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

Customizes the row root. Preserve a div directly inside a dl and forward its props and ref to retain valid description-list grouping.

**startIcon** `ReactNode`

Decorative node before the label. The caller controls icon dimensions.

**style** `CSSProperties`

Inline styles applied to the row root.


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