FormStatus
Компонент для отображения статуса формы или результата действия. Используется для информирования пользователя о текущем состоянии формы, успешном выполнении действия или возникшей ошибке.
Применение компонента
Используйте компонент для отображения важных информационных сообщений, успешных результатов действий пользователя или подсказок по заполнению формы. Старайтесь делать сообщения краткими и понятными.
При отображении ошибок используйте свойство mode="error"
для привлечения внимания пользователя.
В заголовке (свойство title
) указывайте основную суть сообщения, а в дополнительном контенте (свойство children
)
предоставляйте более подробную информацию или инструкции.
Не используйте компонент для отображения обычного текста или контента, не связанного со статусом формы. Избегайте использования данного компонента для описания всех ошибок формы (используйте отображение ошибок рядом с конкретным полем формы).
Доступность (a11y)
Компонент автоматически устанавливает правильную роль (role
) в зависимости от режима отображения:
role="status"
для режимаmode="default"
— используется для отображения статуса, который не требует немедленного внимания пользователя;role="alert"
для режимаmode="error"
— используется для отображения важных сообщений об ошибках, которые требуют внимания пользователя.
При необходимости вы можете переопределить роль, передав своё значение через свойство role
.
Свойства и методы
Свойство | Описание |
---|---|
getRootRef | Ref<HTMLDivElement> По умолчанию: - |
mode | "default" | "error" Режим отображения компонента. По умолчанию: - |
title | ReactNode Основной текст. По умолчанию: - |