FormFieldRow lays out a field label, optional decorative icon, field content and trailing controls. Use it for composer fields or other aligned field groups. Your application owns field values, validation, permissions and persistence.
Usage
Layout and labels
labelWidth defaults to 80 pixels and accepts a CSS width. Use the same value on sibling rows to align their labels. The label column is capped at 40% of the row, and content can wrap in narrow layouts. startIcon is decorative; the caller supplies its dimensions. Set hasDivider={false} on a final row when the surrounding surface provides its border.
The root is a group named by label. Supply aria-label or aria-labelledby when the visible label is omitted, and label each nested input separately. The row does not move focus or disable nested controls. Those controls retain their own keyboard behavior and focus styling.
Events and customization
Native attributes, event handlers,className, style, ref and render apply to the group root. Forward supplied props and ref when replacing the root through render. An onClick handler shows a pointer cursor. The caller owns click-to-focus behavior and guards events from nested controls or portals when needed. isHoverable independently enables a neutral hover background.
trailingProps applies native attributes, handlers and ref to the existing trailing wrapper. Its className is merged with the shared layout class. Use its onClick handler to stop a trailing action from triggering a row click handler. The wrapper exists only when trailing has renderable content.
Props
ReactNode
required
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
default:"true"
Shows a decorative bottom divider. Set false on the final row when the surrounding surface supplies its own border.
boolean
default:"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>
default:"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.