> ## 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 campo de formulario

> Alinea una etiqueta de campo, contenido y controles finales en una fila compartida.

## Resumen

`FormFieldRow` organiza una etiqueta de campo, un icono decorativo opcional, el contenido del campo y los controles finales. Úsalo para campos del compositor u otros grupos de campos alineados. Su aplicación es responsable de los valores de los campos, la validación, los permisos y la persistencia.

**Light**

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

**Dark**

[Fila de campo de formulario (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)

## "Uso"

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

## Diseño y etiquetas

`labelWidth` tiene un valor predeterminado de 80 píxeles y acepta un ancho de CSS. Use el mismo valor en las filas del mismo nivel para alinear sus etiquetas. La columna de etiquetas está limitada al 40 % de la fila y el contenido puede ajustarse en diseños estrechos. `startIcon` es decorativo; quien realiza la llamada proporciona sus dimensiones. Establezca `hasDivider={false}` en una fila final cuando la superficie circundante proporcione su borde.

La raíz es un grupo denominado por `label`. Proporcione `aria-label` o `aria-labelledby` cuando se omita la etiqueta visible y etiquete cada entrada anidada por separado. La fila no mueve el foco ni deshabilita los controles anidados. Esos controles conservan su propio comportamiento de teclado y estilo de foco.

## Eventos y personalización

Los atributos nativos, los controladores de eventos, `className`, `style`, `ref` y `render` se aplican a la raíz del grupo. Reenvíe las props proporcionadas y ref al reemplazar la raíz mediante `render`. Un controlador `onClick` muestra un cursor de puntero. Quien realiza la llamada controla el comportamiento de hacer clic para enfocar y, cuando es necesario, protege los eventos de los controles anidados o portales. `isHoverable` habilita de forma independiente un fondo neutro al pasar el cursor.

`trailingProps` aplica atributos nativos, controladores y ref al contenedor final existente. Su `className` se combina con la clase de diseño compartida. Use su controlador `onClick` para impedir que una acción final active un controlador de clic de fila. El contenedor existe solo cuando `trailing` tiene contenido renderizable.

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