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

# Fila de detalles

> Alinee las etiquetas de detalles con valores que se ajustan a varias líneas y acciones opcionales.

## Resumen

`DetailsRow` combina una etiqueta con un valor en una lista de descripciones. Agregue un icono decorativo, varios elementos de valor o una acción proporcionada por su aplicación.

**Light**

[Ejemplo de fila de detalles (light)](https://storybook.twenty.com/iframe.html?id=ui-data-display-detailsrow--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Ejemplo de fila de detalles (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)

## "Uso"

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

Coloque cada fila directamente dentro de un `dl`. Pase la etiqueta mediante `label` y su valor mediante `children`. La aplicación gestiona las etiquetas, la localización, los valores con formato y los marcadores de posición para valores faltantes.

## Alineación y ajuste de línea

Las etiquetas y los valores se ajustan a varias líneas en lugar de truncarse. Varios elementos de valor, como chips o etiquetas, se ajustan a líneas adicionales. Las filas alinean su contenido en la parte superior a medida que este crece.

La columna de etiquetas usa `7rem` de forma predeterminada y está limitada al 40 % del ancho de la fila para dejar espacio para el valor en contenedores estrechos. Establezca el mismo `labelWidth` en las filas adyacentes para ajustar su alineación. Los números usan píxeles; también se admiten longitudes CSS como `'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>
);
```

## Acciones

Use `action` para un control junto al valor. La fila no agrega comportamiento de edición, clic ni teclado. Proporcione un control con un nombre accesible y conecte su controlador al comportamiento de la aplicación.

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

## Composición y accesibilidad

Cada fila representa una agrupación `div` con una etiqueta `dt` y un `dd` que contiene el valor y la acción opcional. Quien realiza la llamada proporciona el `dl` contenedor. Proporcione texto significativo en la etiqueta. El `startIcon` opcional está oculto para la tecnología de asistencia, y quien realiza la llamada controla sus dimensiones.

Los atributos nativos, `className`, `style` y `ref` se aplican al `div` exterior. Al usar `render` con un contenedor personalizado, conserve ese `div` directamente dentro del `dl` y reenvíe todas las props proporcionadas y la ref. Mantenga las acciones dentro de su espacio para que el término y la definición sigan siendo los elementos secundarios directos de la fila.

Use [Fila de métricas](https://docs.twenty.com/es/ui/components/data-display/metric-row.md) para una métrica con progreso opcional. `DetailsRow` proporciona únicamente el diseño de etiqueta, valor y acción.

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