Компонент Input

Input Components

Device=Desk

State=Default

State=Focus

State=Filled

Device=Mob

State=Default

State=Focus

State=Filled

Input View

Default/Empty State

Имя

Фамилия

Отчество

Телефон

Filled State

Имя

Фамилия

Отчество

Телефон

Размеры

Small

Medium

Big

Темы

Light Theme

Dark Theme

Типы инпутов

Text

Email

Password

Phone (с маской)

Number

Search

Состояния

Default

Focused

Filled

Disabled

Error

Это поле обязательно для заполнения

With Hint

Минимум 3 символа

Интерактивное демо

Размер:

Тема:

Тип:

Иконка слева:

Иконка справа:

Значение: Пусто

События: Нет

Использование в коде

Базовый инпут

<Input 
  v-model="value" 
  placeholder="Введите текст" 
/>

С маской телефона

<Input 
  v-model="phone" 
  type="tel"
  placeholder="+7 (999) 999-99-99"
  :mask="true"
/>

С иконками и ошибкой

<Input 
  v-model="email"
  type="email"
  placeholder="Email"
  iconLeft="mail"
  iconRight="search"
  error="Неверный формат email"
/>

Темная тема

<Input 
  v-model="name"
  placeholder="Имя"
  theme="dark"
  size="big"
/>

Спецификации

Props

modelValue - текущее значение
label - подпись поля
placeholder - плейсхолдер
type - тип инпута
size - размер (small, medium, big)
theme - тема (light, dark)
mask - маска для телефона
iconLeft/iconRight - иконки
error - сообщение об ошибке
hint - подсказка

Размеры

small - 32px высота, 12px шрифт
medium - 40px высота, 14px шрифт
big - 48px высота, 16px шрифт

Состояния

default - обычное состояние
focus - фокус с подчеркиванием
filled - заполненное состояние
disabled - отключенное состояние
error - состояние с ошибкой

События

update:modelValue - изменение значения
focus - получение фокуса
blur - потеря фокуса
input - ввод текста
change - изменение значения