FormItem

Структура компонента

FormItem состоит из трёх основных частей:

• top — заголовок элемента формы;
• children — основной контент (поле ввода);
• bottom — подсказка или сообщение о статусе валидации.

Подкомпоненты

Иногда шапка у поля может быть составной, то есть содержать несколько отдельных компонентов для сегментирования представленной информации. В таком случае воспользуйтесь подкомпонентами, которые позволят вам собрать необходимый заголовок самостоятельно и более гибко управлять передаваемыми в компоненты свойствами (например, для a11y).

• <FormItem.Top> служит оберткой для составной шапки поля, отвечая за выравнивание контента и расстановку отступов;
• <FormItem.TopLabel> отвечает за отрисовку заголовка поля. По умолчанию компонент представлен тегом label, если передано свойство htmlFor. Можно переопределить через свойство Component;
• <FormItem.TopAside> отвечает за отрисовку дополнительного контента справа от заголовка поля.

Состояния

disabled

Свойство disabled блокирует взаимодействие с компонентом и добавляет визуальную индикацию недоступности.

Валидация

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

• "default" - обычное состояние компонента (по умолчанию);
• "error" - состояние ошибки, используйте данное значение, чтобы сообщить пользователю о некорректно введённых данных;
• "valid" - состояние успешной валидации, используйте для индикации прошедшей проверки или при исправлении ошибки.

Если вы используете значения "error" (реже "valid"), старайтесь сопровождать состояние поясняющим сообщением, например, используя свойство bottom.

Обязательность поля

Свойство required позволяет пометить поле как обязательное для заполнения.

<FormItem top="Email" required>
  <Input type="email" name="email" required />
</FormItem>

Удаление поля

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

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

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

Отступы

По умолчанию компонент расставляет внешние отступы, чтобы автоматически выравниваться в соответствии с требованиями дизайн-системы (при использовании в Group, например). Отключить эти отступы можно с помощью свойства noPadding.

Тестирование (e2e)

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

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

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

Для корректной работы ассистивных технологий необходимо вручную передавать некоторые параметры:

• при передаче в FormItem компонента, отвечающего за пользовательский ввод (например, <input type="text" />), рекомендуется передавать свойства top и htmlFor. В компонент пользовательского ввода должно быть передано свойство id, которое соответствует значению htmlFor в FormItem;
• при использовании свойства bottom рекомендуется также передавать в компонент пользовательского ввода (например, <input type="text" />) свойство aria-describedby, а в сам FormItem передать bottomId, который соответствует значению aria-describedby.

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