FormField

Режимы отображения

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

• "default" — стандартный режим отображения с фоном, обводкой и текстом-подсказкой;
• "plain" — упрощенный режим, который показывает только текст-подсказку без фона и обводки.

Контент в начале/в конце

В компоненте доступна возможность добавления дополнительного контента слева и/или справа от содержимого, задаётся свойством before и after соответственно. Наиболее частый вариант использования свойств before/after - иконки.

Придерживайтесь следующих рекомендаций:

• используйте иконки следующих размеров: 12px, 16px, 20px, 24px и 28px;
• для интерактивных иконок используйте компонент IconButton.

Выравнивание иконок

Для каждой иконки можно задать вертикальное выравнивание с помощью свойств:

• beforeAlign — выравнивание левой иконки;
• afterAlign — выравнивание правой иконки.

Доступные значения:

• "center" — по центру (значение по умолчанию);
• "start" — по верхнему краю;
• "end" — по нижнему краю.

Состояния

disabled

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

Валидация

Свойство status используется для визуализации валидации компонента - некорректности заполненного поля (значение "error") или успешной валидации (значение "valid").

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

FormField автоматически обрабатывает состояния фокуса и наведения, обеспечивая визуальную обратную связь для пользователей. Компонент поддерживает все стандартные HTML-атрибуты доступности.

При использовании FormField с полями ввода убедитесь, что:

• у поля есть описание (используйте свойство top у FormItem или оборачивайте FormField в HTML-тэг label);
• при наличии ошибок валидации или при необходимости подтверждения валидности, оставляйте пояснение (используйте свойство bottom у FormItem или воспользуйтесь aria-describedby).

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