---
description: Компонент для отображения статуса формы или результата действия.
---

<Overview group="forms">

# FormStatus [tag:component]

Компонент для отображения статуса формы или результата действия.
Используется для информирования пользователя о текущем состоянии формы, успешном выполнении действия или возникшей ошибке.

</Overview>

{/* @example-description: Сообщение об ошибке формы с заголовком и поясняющим текстом. */}
<Playground>
  ```jsx
  <FormStatus title="Некорректный мобильный номер" mode="error">
    Необходимо корректно ввести номер в международном формате
  </FormStatus>
  ```
</Playground>

## Применение компонента

Используйте компонент для отображения важных информационных сообщений, успешных результатов действий пользователя или подсказок
по заполнению формы. Старайтесь делать сообщения краткими и понятными.

При отображении ошибок используйте свойство `mode="error"` для привлечения внимания пользователя.

В заголовке (свойство `title`) указывайте основную суть сообщения, а в дополнительном контенте (свойство `children`)
предоставляйте более подробную информацию или инструкции.

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

## Доступность (a11y) [#a11y]

Компонент автоматически устанавливает правильную роль (`role`) в зависимости от режима отображения:

- `role="status"` для режима `mode="default"` — используется для отображения статуса, который не требует
  немедленного внимания пользователя;
- `role="alert"` для режима `mode="error"` — используется для отображения важных сообщений об ошибках,
  которые требуют внимания пользователя.

При необходимости вы можете переопределить роль, передав своё значение через свойство `role`.

## Свойства и методы [#api]

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `getRootRef` | `Ref<HTMLDivElement>` | `-` |  |
| `mode` | `"default" \| "error"` | `-` | Режим отображения компонента. |
| `title` | `ReactNode` | `-` | Основной текст. |