Input
Определение
Input (Поле ввода) в дизайн-системе — это компонент, предназначенный для ввода данных пользователем. Он может быть представлен в различных формах (текстовые поля, числа, пароли и т. д.) и адаптирован под разные контексты использования.
Функциональность
Ввод и обработка данных
Текстовый ввод: поддержка разных типов данных (строки, числа, пароли).
Ограничения:
• Маски ввода: форматирование (например, номера телефонов, даты).
• Лимиты символов: минимальное и максимальное количество символов.
• Тип данных: фильтрация (например, только цифры или только буквы).
Валидация данных
- Реальная валидация (Real-time): проверка данных в процессе ввода.
- После ввода: проверка на корректность после выхода из поля.
- Сообщения о состоянии:
• Ошибки (e.g., “Поле обязательно”, “Введите корректный email”).
• Предупреждения (e.g., “Данные не сохранены”).
• Успех (e.g., “Все верно!”).
Взаимодействие с пользователем
- Placeholder: текст-пример до начала ввода.
- Автозаполнение: поддержка предложений (autocomplete), основанных на предыдущих данных или подсказках.
- Фокусировка: автоматическая активация поля при открытии формы.
- Очистка поля:
• Кнопка очистки (e.g., крестик в правой части поля).
• Удаление введенного текста через клавишу Esc. - Форматирование ввода:
• Разделители для чисел (e.g., “1 000 000”).
• Автоматическое добавление символов (e.g., скобки в номере телефона).
Типы и атрибуты ввода
Атрибуты HTML
Поддержка специальных возможностей (Accessibility)
Клавиатурная навигация:
- Tab для перехода между полями.
- Enter для подтверждения ввода.
Дизайн и Стиль
Размер и Форма
Поле ввода имеет три размера L, M (по умолчанию) и S
Поля могут быть составными из двух блоков и с добавлением кнопки с назначением
Компонент может быть комбинирован с дополнительной секцией, не меняйте размеры внутренних компонентов
Цвет и Контраст
Соблюдайте общие цветовые правила дизайн-системы. Палитра Plex и компонент Input в частности отвечает стандартам контрастности WCAG.
Состояния
Анатомия
