Input

Текстове поле з підписом, слотами для іконок і підтримкою розміщення.

Живе демо

Вертикально (за замовчуванням)

Ім'я

Email

Пароль

З іконками

Email

Пароль

Горизонтально

Місто

Індекс

Усередині (inner)

Повне ім'я

Адреса email

Усередині з іконками

Пошук

Пароль

Вебсайт

Використання

Базове

<template>
  <orio-input v-model="name" placeholder="Enter your name" />
</template>

<script setup>
const name = ref("");
</script>

З підписом

<orio-input
  v-model="email"
  label="Email Address"
  type="email"
  placeholder="you@example.com"
/>

З іконками

<orio-input v-model="search" placeholder="Search...">
  <template #before>
    <orio-icon name="search" />
  </template>
</orio-input>

<orio-input v-model="password" type="password" label="Password">
  <template #before>
    <orio-icon name="lock" />
  </template>
  <template #after>
    <orio-icon name="eye" />
  </template>
</orio-input>

Горизонтальне розміщення

<orio-input v-model="city" label="City" layout="horizontal" />

Внутрішнє розміщення

<orio-input v-model="name" label="Full Name" layout="inner" />

Різні типи

<orio-input v-model="text" type="text" label="Text" />
<orio-input v-model="email" type="email" label="Email" />
<orio-input v-model="password" type="password" label="Password" />
<orio-input v-model="number" type="number" label="Age" />
<orio-input v-model="url" type="url" label="Website" />

Пропси

Проп	Тип	За замовчуванням	Опис
modelValue	string	""	Значення поля (v-model)
layout	"vertical" | "horizontal" | "inner"	"vertical"	Позиція підпису відносно поля
label	string	undefined	Текст підпису
placeholder	string	undefined	Текст-заповнювач
type	string	"text"	HTML-тип поля

Усі стандартні HTML-атрибути input підтримуються через v-bind="$attrs".

Слоти

Слот	Опис
before	Вміст перед полем (наприклад, іконка)
after	Вміст після поля (наприклад, іконка)

Події

Подія	Дані	Опис
update:modelValue	string	Генерується під час зміни значення поля

Стилізація

--color-bg           /* Input background */
--color-border       /* Border color */
--color-text         /* Text color */
--color-accent       /* Focus border color */
--color-accent-soft  /* Focus ring color */
--color-muted        /* Placeholder and inner label color */