FormLayoutGroup

Вариант группировки

Задаётся свойством 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, которые вы можете использовать, чтобы находить необходимые части компонента:

• removeButtonTestId — id кнопки удаления при removable={true};
• toggleButtonTestId — id кнопки подтверждения удаления (только для iOS).

Доступность (a11y)

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

Свойства и методы