FormLayoutGroup

Компонент, помогающий сгруппировать несколько полей формы (FormItem), расположив их по вертикали или по горизонтали.

Загружается...

Задаётся свойством mode.

  • "vertical" — поля располагаются вертикально друг под другом (по умолчанию);
  • "horizontal" — поля располагаются горизонтально по линии.

Обратите внимание, что при недостатке места (например, на мобильных устройствах) поля формы сжимаются пропорционально, поэтому не рекомендуется в mode="horizontal" располагать более трёх FormItem.

Загружается...

Добавить возможность удалять сгруппированные поля можно с помощью свойства removable, которое добавит кнопку удаления, стилизованную под используемую платформу. Помимо значений true/false, также принимает значение "indent", которое бывает полезно, когда не все группы полей можно удалить, но есть необходимость поддерживать выравнивание, добавляя визуальный отступ.

При removable={true} можно использовать следующие свойства:

  • removePlaceholder — текст, который будет зачитан скринридером или показан на платформе iOS при взаимодействии с кнопкой удаления (по умолчанию “Удалить”);
  • onRemove — функция-обработчик, которая будет вызвана при нажатии на кнопку удаления.
Загружается...

Свойство segmented позволяет визуально склеить несколько FormItem, объединенные в одну FormLayoutGroup. Работает для mode="vertical" и mode="horizontal". Используйте данное свойство, когда хотите показать, что элементы формы логически связаны между собой. Особое внимание уделите a11y для FormItem, которые не определяют свойства htmlFor или top.

Загружается...

Для возможности тестирования доступны свойства с постфиксом *TestId, которые вы можете использовать, чтобы находить необходимые части компонента:

  • removeButtonTestIdid кнопки удаления при removable={true};
  • toggleButtonTestIdid кнопки подтверждения удаления (только для iOS).
  • в компоненте используется тэг fieldset, что позволяет скринридеру автоматически определить роль group ↗;
  • рекомендуется предавать в компонент атрибуты aria-labelledby, aria-label и aria-describedby для предоставления дополнительной информации об элементе;
  • если по дизайну требуется использовать сегментированный режим segmented={true}, без возможности задать свойства htmlFor и top у FormItem, то стоит добавить скрытый текст, используя сервисный компонент VisuallyHidden, и связать его с полем формы через id и htmlFor, дублируя текст, заданный в placeholder.
СвойствоОписание
disabledboolean

Блокировка взаимодействия с компонентом.

По умолчанию: -
getRootRefRef<HTMLDivElement>
По умолчанию: -
mode"horizontal" | "vertical"

Направление отображения элементов формы.

По умолчанию: vertical
onRemove((e: MouseEvent<Element, MouseEvent>, rootEl?: HTMLElement | null) => void) | undefined

Обработчик, срабатывающий при нажатии на контрол удаления.

По умолчанию: -
removableboolean | "indent"

Только для режима horizontal. Дает возможность удалить всю группу FormItem.

Режим indent предназначен для визуального отступа.

По умолчанию: -
removeButtonTestIdstring

Передает атрибут data-testid для кнопки удаления.

По умолчанию: -
removePlaceholderReactNode

Текст кнопки удаления ячейки. Визуально скрыт везде, кроме iOS. На iOS появляется в выезжающей кнопке для удаления ячейки.

По умолчанию: Удалить
segmentedboolean

Дает возможность склеить несколько FormItem.

По умолчанию: -
toggleButtonTestIdstring

Передает атрибут data-testid для кнопки, которая активирует кнопку удаления (iOS only).

По умолчанию: -