Input

Текстове поле з лейблом, підказкою та станом помилки.

Поле бере класи з uiFieldStyles — спільного контракту, на якому тримаються всі поля бібліотеки. Завдяки цьому UiInput, UiTextarea і UiSelect лишаються однаковими без копіювання довгих рядків класів.

Приклад

Робоча пошта

Стани

Псевдонім

Від 3 до 20 символів.

Пошта

Схоже, це не адреса пошти.

Тариф

Очищення та пароль

clearable додає хрестик, коли поле не порожнє; passwordToggle — око для type="password". Обидві кнопки живуть усередині поля, тож відступ тексту рахується автоматично і не наїжджає на них.

Пошук

Пароль

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`. Без нього браузер не підставить збережені дані.
`id`	`string`	—	Стабільний DOM id. `name` використовується лише для форми.
`name`	`string`	—	—
`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 зумувати сторінку при фокусі.

Портування

Разом із компонентом копіюйте uiFieldStyles.ts — без нього поле лишиться без стилів.