Input

Text input component with label, icon slots, and layout support.

Live Demo

Vertical (default)

Name

Email

Password

With Icons

Email

Password

Horizontal

City

Zip

Inner

Full Name

Email Address

Inner with Icons

Search

Password

Website

Usage

Basic

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

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

With Label

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

With Icons

<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>

Horizontal Layout

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

Inner Layout

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

Different Types

<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" />

Props

Prop	Type	Default	Description
modelValue	string	""	Input value (v-model)
layout	"vertical" | "horizontal" | "inner"	"vertical"	Label position relative to input
label	string	undefined	Label text
placeholder	string	undefined	Placeholder text
type	string	"text"	HTML input type

All standard HTML input attributes are supported via v-bind="$attrs".

Slots

Slot	Description
before	Content placed before the input (e.g. icon)
after	Content placed after the input (e.g. icon)

Events

Event	Payload	Description
update:modelValue	string	Emitted when input value changes

Styling

--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 */