Input

Text input component with label and placeholder support.

Live Demo

Name

Email

Password

Current values:
Name: (empty)
Email: (empty)
Password: (empty)

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

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)
label	string	undefined	Label text displayed above input
placeholder	string	undefined	Placeholder text
type	string	'text'	HTML input type

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

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