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
, которые вы можете использовать,
чтобы находить необходимые части компонента:
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
.
Свойства и методы
Свойство | Описание |
---|---|
disabled | boolean Блокировка взаимодействия с компонентом. По умолчанию: - |
getRootRef | Ref<HTMLDivElement> По умолчанию: - |
mode | "horizontal" | "vertical" Направление отображения элементов формы. По умолчанию: vertical |
onRemove | ((e: MouseEvent<Element, MouseEvent>, rootEl?: HTMLElement | null) => void) | undefined Обработчик, срабатывающий при нажатии на контрол удаления. По умолчанию: - |
removable | boolean | "indent" Только для режима horizontal. Дает возможность удалить всю группу Режим По умолчанию: - |
removeButtonTestId | string Передает атрибут По умолчанию: - |
removePlaceholder | ReactNode Текст кнопки удаления ячейки. Визуально скрыт везде, кроме iOS. На iOS появляется в выезжающей кнопке для удаления ячейки. По умолчанию: Удалить |
segmented | boolean Дает возможность склеить несколько По умолчанию: - |
toggleButtonTestId | string Передает атрибут По умолчанию: - |