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.
”Uso”
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
ReactNode
requerido
Field content, such as plain inputs, recipient chips, selectors or toggles. The caller owns input labels, state and click-to-focus behavior.
string
CSS class applied to the group root.
boolean
predeterminado:"true"
Shows a decorative bottom divider. Set false on the final row when the surrounding surface supplies its own border.
boolean
predeterminado:"false"
Enables a neutral hover background independently of click handlers. Keyboard focus remains on nested controls without changing the row background.
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.
Width<string | number>
predeterminado:"80"
Preferred label column width, capped at 40% of the row. Numbers use pixels; use the same width for aligned sibling rows.
MouseEventHandler<HTMLDivElement>
Native group click handler. Providing a handler shows a pointer cursor; the caller guards nested-control and portaled events as needed.
Ref<HTMLDivElement>
Ref forwarded to the group root div.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>
Customizes the group root. Forward its props and ref.
ReactNode
Optional decorative icon before the label. The caller controls icon dimensions.
CSSProperties
Inline styles applied to the group root.
ReactNode
Optional trailing content. Nested controls retain their own keyboard focus and event behavior.
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.