Обзор
FormFieldRow размещает метку поля, необязательный декоративный значок, содержимое поля и конечные элементы управления. Используйте его для полей редактора или других выровненных групп полей. Ваше приложение управляет значениями полей, валидацией, разрешениями и сохранением данных.
Использование
Макет и метки
labelWidth по умолчанию равно 80 пикселям и принимает ширину CSS. Используйте одинаковое значение в соседних строках, чтобы выровнять их метки. Ширина столбца меток ограничена 40 % строки, а содержимое может переноситься в узких макетах. startIcon является декоративным; вызывающая сторона задаёт его размеры. Установите hasDivider={false} для последней строки, если окружающая поверхность предоставляет свою границу.
Корневой элемент — это группа, имя которой задаётся label. Укажите aria-label или aria-labelledby, если видимая метка отсутствует, и назначьте отдельную метку каждому вложенному полю ввода. Строка не перемещает фокус и не отключает вложенные элементы управления. Эти элементы управления сохраняют собственное поведение клавиатуры и стилизацию фокуса.
События и настройка
Нативные атрибуты, обработчики событий,className, style, ref и render применяются к корневому элементу группы. Передавайте предоставленные props и ref при замене корневого элемента через render. Обработчик onClick отображает курсор-указатель. Вызывающая сторона отвечает за поведение при щелчке для установки фокуса и при необходимости защищает события от вложенных элементов управления или порталов. isHoverable независимо включает нейтральный фон при наведении.
trailingProps применяет нативные атрибуты, обработчики и ref к существующей завершающей обёртке. Его className объединяется с общим классом макета. Используйте его обработчик onClick, чтобы завершающее действие не запускало обработчик щелчка строки. Обёртка существует только тогда, когда trailing содержит отображаемое содержимое.
Свойства
ReactNode
обязательно
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
по умолчанию:"true"
Shows a decorative bottom divider. Set false on the final row when the surrounding surface supplies its own border.
boolean
по умолчанию:"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>
по умолчанию:"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.