Prezentare generală
FormFieldRow aranjează o etichetă de câmp, o pictogramă decorativă opțională, conținutul câmpului și controalele de final. Utilizează-l pentru câmpuri de compunere sau alte grupuri de câmpuri aliniate. Aplicația dvs. gestionează valorile câmpurilor, validarea, permisiunile și persistența.
Utilizare
Aspect și etichete
labelWidth are implicit 80 de pixeli și acceptă o lățime CSS. Utilizați aceeași valoare pe rândurile înrudite pentru a le alinia etichetele. Coloana etichetelor este limitată la 40% din rând, iar conținutul se poate încadra pe mai multe rânduri în aspecte înguste. startIcon este decorativ; apelantul îi furnizează dimensiunile. Setați hasDivider={false} pe un rând final atunci când suprafața înconjurătoare îi oferă chenarul.
Rădăcina este un grup denumit prin label. Furnizați aria-label sau aria-labelledby atunci când eticheta vizibilă este omisă și etichetați separat fiecare intrare imbricată. Rândul nu mută focalizarea și nu dezactivează controalele imbricate. Aceste controale își păstrează propriul comportament de la tastatură și propriul stil de focalizare.
Evenimente și personalizare
Atributele native, gestionarii de evenimente,className, style, ref și render se aplică rădăcinii grupului. Transmiteți mai departe props și ref furnizate atunci când înlocuiți rădăcina prin render. Un gestionar onClick afișează un cursor indicator. Apelantul gestionează comportamentul de focalizare la clic și, când este necesar, protejează evenimentele provenite de la controale imbricate sau portaluri. isHoverable activează independent un fundal neutru la trecerea cursorului.
trailingProps aplică atribute native, gestionari și ref containerului final existent. className al acestuia este îmbinat cu clasa de aspect partajată. Utilizați gestionarul său onClick pentru a împiedica o acțiune finală să declanșeze un gestionar de clic al rândului. Containerul există numai atunci când trailing are conținut care poate fi redat.
Proprietăți
ReactNode
obligatoriu
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
implicit:"true"
Shows a decorative bottom divider. Set false on the final row when the surrounding surface supplies its own border.
boolean
implicit:"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>
implicit:"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.