Компоненты

Формы

Текстовые поля, подпись и подсказка, ошибка, пароль, телефон, файл.

Текстовое поле (maydon)

Подпись — над полем (класс yorliq), подсказка — под ним. Placeholder подпись не заменяет.

Правила

  • Подпись видна всегда; placeholder — только пример («90 123 45 67»).
  • Обязательное поле — required, необязательное — с пометкой «(необязательно)».
  • Ширина поля — во всю колонку (w-full).
  • В фокусе — изумрудная граница и мягкое кольцо.

Поле на четырёх языках (LangField)

Одни данные на четырёх языках: одно поле и вкладки UZ / RU / EN / AR. Название пакета, описание, сообщение — любой текст на нескольких языках вводится этим полем.

Название, которое видят клиенты
Показывается: Стандартная Умра

Правила

  • На вкладке заполненного языка зелёная точка, на обязательном языке красная звёздочка.
  • В поле, которое обязательно сегодня, обязателен узбекский (required), остальные языки необязательны.
  • Поле AR с dir="rtl", остальные с dir="ltr" — на каком бы языке ни была страница.
  • Подпись и подсказка у самого поля: его не кладут в Field, а ставят прямо в форму или FormDialog.
  • Форма отправляет все четыре языка: name.uz, name.ru, name.en, name.ar — langTextOf(form, name) собирает их в одно значение.
  • Если обязательный язык пуст, форма не отправляется: поле переходит на этот язык и говорит об этом под собой.
  • Порядок при показе: выбранный язык, затем uz, ru, en, ar (pickText).
  • Клавиатура: ← → между вкладками, Home и End; Tab попадает только на выбранную вкладку.

Состояние ошибки

Ошибка — под полем, красным, и говорит, что сделать. Если отказал сервер — текст внутри окна или формы, в блоке сообщения.

Правила

  • aria-invalid="true" — граница становится красной.
  • Ошибка появляется при выходе из поля, а не на каждую букву.
  • Текст: причина + выход — «Введите не меньше 3 букв».

Особые поля

Пароль с глазом, телефон с +998 и группами цифр, сумма с пробелами и валютой. В списке и карточке телефон под маской.

Телефон под маской (список, карточка)

+998 90 *** ** 67

Поле с готовым окончанием (email)

Вводится только имя до «@», домен не меняется. Когда ввод остановился, проверяется, занято ли имя; занятое не сохраняется.

@umra.local

Имя свободно.

Попробуйте: «admin» и «ravshancha» заняты.

Правила

  • Допустимые символы проверяются сразу, занятость — через 350 мс.
  • Подсказка под полем: почему нельзя сохранить, или «Имя свободно».
  • Кнопка «Сохранить» неактивна, если имя не изменено, с ошибкой или занято.

Поле суммы (MoneyField)

Платёж, возврат, расход — сумма разбита по тысячам, в конце валюта (USD / сум). Если дан курс — под полем сумма во второй валюте.

Правила

  • Сумма выровнена вправо, tnum; копейки/центы через точку или запятую, до 2 знаков.
  • Валюта — переключатель в конце поля; одна валюта — словом.
  • С курсом под полем «≈ 1 250 $» — для проверки расчёта.

Редактируемые строки (EditableRows)

Гостиницы пакета, программа, расходы, вещи с собой — строки пишутся на месте: × удаляет, «Добавить строку» добавляет новую. Сохраняет окружающая форма.

ГородГостиницаНочи

Правила

  • Названия колонок сверху; поля каждой строки — в своих колонках.
  • × — с красным при наведении; для обязательных строк (min) его нет.
  • «Добавить строку» — в конце списка, исчезает на max.

Загрузка файла

Паспорт, договор, чек — перетащить или выбрать. Тип и размер файла — в подсказке.

Раскладка формы

На телефоне — одна колонка, на планшете и web — две (grid md:grid-cols-2). Блоки разделяются заголовком, кнопки внизу справа.

Паломник

Правила

  • Связанные поля рядом: имя / фамилия, дата / время.
  • В длинной форме на телефоне кнопки прилипают внизу (Кнопки → Нижняя панель).
  • В dashboard форма открывается не на странице, а в окне (Окна → Форма в окне).