Panoramica
FormFieldRow dispone un’etichetta di campo, un’icona decorativa facoltativa, il contenuto del campo e i controlli finali. Usalo per i campi del compositore o altri gruppi di campi allineati. L’applicazione gestisce i valori dei campi, la convalida, le autorizzazioni e la persistenza.
Utilizzo
Layout ed etichette
labelWidth è impostato per impostazione predefinita su 80 pixel e accetta una larghezza CSS. Utilizza lo stesso valore nelle righe affiancate per allinearne le etichette. La colonna dell’etichetta è limitata al 40% della riga e il contenuto può andare a capo nei layout stretti. startIcon è decorativo; il chiamante ne fornisce le dimensioni. Imposta hasDivider={false} su una riga finale quando la superficie circostante fornisce il relativo bordo.
La radice è un gruppo denominato da label. Fornisci aria-label o aria-labelledby quando l’etichetta visibile è omessa ed etichetta separatamente ogni input annidato. La riga non sposta lo stato attivo né disabilita i controlli annidati. Tali controlli mantengono il proprio comportamento da tastiera e lo stile dello stato attivo.
Eventi e personalizzazione
Gli attributi nativi, i gestori di eventi,className, style, ref e render si applicano alla radice del gruppo. Inoltra le props e il ref forniti quando sostituisci la radice tramite render. Un gestore onClick mostra un cursore a forma di puntatore. Il chiamante gestisce il comportamento di messa a fuoco al clic e, se necessario, protegge gli eventi dai controlli annidati o dai portali. isHoverable abilita in modo indipendente uno sfondo neutro al passaggio del mouse.
trailingProps applica attributi nativi, gestori e ref al wrapper finale esistente. Il relativo className viene unito alla classe di layout condivisa. Utilizza il relativo gestore onClick per impedire che un’azione finale attivi un gestore di clic della riga. Il wrapper esiste solo quando trailing contiene contenuto renderizzabile.
Props
ReactNode
obbligatorio
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
predefinito:"true"
Shows a decorative bottom divider. Set false on the final row when the surrounding surface supplies its own border.
boolean
predefinito:"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>
predefinito:"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.