Input
Текстове поле з лейблом, підказкою та станом помилки.
Поле бере класи з uiFieldStyles — спільного контракту, на якому тримаються
всі поля бібліотеки. Завдяки цьому UiInput, UiTextarea і UiSelect
лишаються однаковими без копіювання довгих рядків класів.
Приклад
Стани
Від 3 до 20 символів.
Схоже, це не адреса пошти.
Очищення та пароль
clearable додає хрестик, коли поле не порожнє; passwordToggle — око
для type="password". Обидві кнопки живуть усередині поля, тож відступ
тексту рахується автоматично і не наїжджає на них.
Префікс, суфікс і лічильник
prefix і suffix — текст, приклеєний до поля ззовні: https://, +380,
грн. Саме ззовні, а не в слотах leading/trailing: слот резервує місце
під іконку, і довший текст наїжджав би на введене значення. Префікс і
суфікс входять у доступну назву поля — «Ціна, грн» пояснює, що вводити.
maxLength передається як нативний maxlength, а з showCount під полем
з'являється лічильник — так само, як в UiTextarea.
Видно в профілі
28 / 60
Атрибути
Усе, що не є props, іде на сам <input>: aria-label, inputmode,
maxlength, autofocus, enterkeyhint, data-*, слухачі на кшталт
@paste. class і style лишаються на обгортці разом із лейблом — вони
потрібні для відступів і місця в сітці форми. Раніше на обгортку йшло все,
і поле без видимого лейбла з aria-label лишалося без доступної назви.
API
Props
| Назва | Тип | Типово | Опис |
|---|---|---|---|
type | numbertextemailpasswordsearchtelurl | "text" | Тип нативного поля. Впливає і на екранну клавіатуру телефона, і на автозаповнення браузера. |
size | FieldSize | "md" | Висота поля. На мобільному кожен розмір вищий за десктопний. |
modelValue | string | number | — | Значення поля. Використовуйте через `v-model`. |
label | string | — | Видимий лейбл. Пов'язується з полем через `for`/`id` автоматично. |
placeholder | string | — | — |
error | string | — | Текст помилки. Сама його наявність вмикає стан помилки — окремого булевого прапорця немає навмисно, щоб не було стану «червоне поле без пояснення чому». |
hint | string | — | Підказка під полем. Ховається, коли показано помилку. |
autocomplete | string | — | Значення нативного `autocomplete`. Без нього браузер не підставить збережені дані. |
prefix | string | — | Текст, приклеєний до поля зліва: `https://`, `+380`. Живе ПОЗА полем, а не в слоті `leading`: слот резервує місце під іконку, і довший текст наїжджав би на введене значення. Входить у доступну назву. |
suffix | string | — | Текст, приклеєний до поля справа: `грн`, `.com.ua`, `кг`. Входить у доступну назву. |
maxLength | number | — | Максимальна кількість символів. Передається як нативний `maxlength`. |
id | string | — | Стабільний DOM id. `name` використовується лише для форми. |
name | string | — | — |
showCount | boolean | false | Показувати лічильник символів. Працює разом із `maxLength`. |
disabled | boolean | — | — |
readonly | boolean | — | — |
required | boolean | — | — |
clearable | boolean | — | Кнопка очищення праворуч, коли поле не порожнє. Не потрапляє в Tab — з клавіатури поле чистять Ctrl+A і Backspace, а зайва зупинка в кожному полі форми лише подовжує обхід. |
passwordToggle | boolean | — | Для `type="password"`: кнопка «показати пароль». На відміну від кнопки очищення, ДОСТУПНА з клавіатури — це самостійна дія, без якої користувач не може перевірити, що набрав. |
Події
| Назва | Payload | Опис |
|---|---|---|
update:modelValue | [value: string | number] | Зміна значення. Для `type="number"` порожнє поле віддає `null`, а не `NaN`. |
focus | [event: FocusEvent] | Поле отримало фокус. |
blur | [event: FocusEvent] | Поле втратило фокус. |
clear | [] | Натиснуто кнопку очищення (`clearable`). Значення вже скинуто через `update:modelValue`. |
Слоти
| Назва | Опис |
|---|---|
leading | Іконка або кнопка ліворуч усередині поля. |
trailing | Іконка або кнопка праворуч усередині поля. |
Доступно через ref
| Назва | Тип | Опис |
|---|---|---|
focus | () => void | Ставить фокус на поле. |
select | () => void | Виділяє весь текст. |
Коли використовувати
Для будь-якого однорядкового введення. Для багаторядкового — UiTextarea.
Коли НЕ використовувати
Не ставте поле без label. placeholder замість лейбла зникає при першому
ж символі, і користувач більше не бачить, що саме він заповнює.
Доступність
Окремого булевого прапорця помилки немає навмисно: стан вмикає сама
наявність тексту в error. Так неможливо отримати червоне поле без
пояснення чому.
aria-describedby вказує рівно на один активний опис. Якби туди потрапляли
і підказка, і помилка одночасно, скрінрідер зачитав би інструкцію, яку
користувач щойно порушив, раніше за причину відмови.
Мобільні розміри довші за десктопні (h-12 → md:h-9, 45px за кореня
15px): нижче 44px палець промахується, а текст 16px не дає iOS Safari
зумувати сторінку при фокусі. Саме 16px у пікселях (text-[16px]), а не
text-base: корінь документа 15px, і 1rem давав 15px — iOS зумував
кожне поле, хоча документація обіцяла протилежне.
Кнопки очищення й показу пароля — 26px на око, але мають невидиму зону
дотику 45×45 (спільний clearButtonClass з uiFieldStyles).
Портування
Разом із компонентом копіюйте uiFieldStyles.ts — без нього поле лишиться
без стилів.