Компоненты

Выбор

Выбор из списка, список с поиском, диапазоны дат и чисел, отметки, переключатель.

Выбор из списка (Dropdown)

Браузерный <select> не используется — свой Dropdown. Клавиатура: ↓ ↑ Home End, Enter выбирает, Esc закрывает. Открытый слой рисуется поверх таблицы и окна.

Правила

  • Длинный список (фирмы) — с search: сверху поле поиска.
  • Название фирмы никогда не вводится вручную — только выбор из списка.
  • Первый вариант в фильтрах — «Все».

Диапазон дат (DateRange)

Одно поле, два календаря: слева «С», справа «По». На телефоне календари друг под другом. Формат даты — 15.10.2026.

Правила

  • max — дни после него выключены: в периоде отчёта и статистики max = сегодня (будущее не выбрать).

Одна дата, время и число

Вместо браузерных полей даты, времени и числа: DayPicker — один календарь, TimeField — «16:00», NumberStepper — число с − / +.

Люди
Ночи
ноч.

Правила

  • Дата в виде «15.10.2026»; дни вне min / max недоступны; «Сегодня» и «Очистить» внизу.
  • Время — 24-часовое, двоеточие ставится само; ↑ / ↓ — 15 минут; неверное время красное, когда поле покинуто.
  • Число — ночи, места, люди: − / + и ↑ / ↓; за пределы не выходит, кнопка гаснет.

Месяц и список с группами

Для денежных страниц: MonthPicker — месяц зарплаты, KPI, закрытия месяца (вместо браузерного поля месяца); группы в Dropdown — статьи расходов под заголовками «Поездка» и «Офис».

Правила

  • Месяц показывается как «Октябрь 2026»; при открытии — год и 12 месяцев, текущий месяц в рамке, «Этот месяц» внизу.
  • Группа — поле group у варианта; варианты одной группы идут подряд, заголовок рисуется сам; сохраняется и при поиске.

Диапазон чисел (NumberRange)

«С» и «По» с кнопками − / +; текст: «≥ 2», «≤ 10», «7–14 дней». Для фильтров цены, дней, мест.

Отметка, радио, переключатель

Несколько вариантов — отметка (checkbox); один — радио или выбор карточкой; если вкл./выкл. срабатывает сразу — переключатель.

Отметка

Радио

Переключатель

Правила

  • Нажимается вся строка (внутри label), высота не меньше 44 px.
  • Переключатель — для настройки, которая сохраняется сразу; если в форме есть «Сохранить» — отметка.

Выбор карточкой

Пакет, тариф, тип номера — крупные варианты с ценой и описанием. На телефоне друг под другом, на web рядом.