Vue Component Library

Appearance

Input Component Demo ​

This page demonstrates the Input component with various configurations and examples.

Basic Input ​

A simple text input with a label.

vue
<template>
  <OInput
    label="Username"
    placeholder="Enter your username"
  />
</template>

<OInput label="Username" placeholder="Enter your username" />

Input with Validation ​

Input with validation rules.

vue
<template>
  <OInput
    label="Email"
    placeholder="Enter your email"
    :rules="[
      { rule: 'required', message: 'Email is required' },
      { rule: 'email', message: 'Please enter a valid email' }
    ]"
  />
</template>

Input with Prepend and Append ​

Input with prepend and append elements.

vue
<template>
  <OInput
    label="Price"
    placeholder="Enter price"
    :prepend="true"
    :append="true"
  >
    <template #prepend>
      <div style="padding: 0 8px;">$</div>
    </template>
    <template #append>
      <div style="padding: 0 8px;">.00</div>
    </template>
  </OInput>
</template>
$
.00

Clearable Input ​

Input with a clear button.

vue
<template>
  <OInput
    label="Search"
    placeholder="Search..."
    :clearable="true"
  />
</template>

Password Input ​

Input for password with toggle visibility.

vue
<template>
  <OInput
    label="Password"
    placeholder="Enter your password"
    type="password"
    :appendInner="true"
  >
    <template #append-inner="{ props: { changeInternalType, internalType } }">
      <button
        @click="() => changeInternalType(internalType === 'password' ? 'text' : 'password')"
        style="background: none; border: none; cursor: pointer; padding: 0 8px;"
      >
        {{ internalType === 'password' ? 'Show' : 'Hide' }}
      </button>
    </template>
  </OInput>
</template>

Disabled and Readonly Inputs ​

Inputs in disabled and readonly states.

vue
<template>
  <div class="input-group">
    <OInput
      label="Disabled Input"
      placeholder="This input is disabled"
      :disabled="true"
      value="Disabled value"
    />

    <OInput
      label="Readonly Input"
      placeholder="This input is readonly"
      :readonly="true"
      value="Readonly value"
    />
  </div>
</template>

<style>
.input-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

Input with Hint ​

Input with a hint message.

vue
<template>
  <OInput
    label="Username"
    placeholder="Enter your username"
    hint="Username must be between 3-20 characters"
    :persistentHint="true"
  />
</template>
Username must be between 3-20 characters

Form Example ​

A complete form using multiple inputs.

vue
<template>
  <form class="form-example" @submit.prevent="submitForm">
    <OInput
      v-model="form.firstName"
      label="First Name"
      placeholder="Enter your first name"
      :rules="[{ rule: 'required', message: 'First name is required' }]"
    />

    <OInput
      v-model="form.lastName"
      label="Last Name"
      placeholder="Enter your last name"
      :rules="[{ rule: 'required', message: 'Last name is required' }]"
    />

    <OInput
      v-model="form.email"
      label="Email"
      placeholder="Enter your email"
      type="email"
      :rules="[
        { rule: 'required', message: 'Email is required' },
        { rule: 'email', message: 'Please enter a valid email' }
      ]"
    />

    <OInput
      v-model="form.password"
      label="Password"
      placeholder="Enter your password"
      type="password"
      :rules="[
        { rule: 'required', message: 'Password is required' },
        { rule: 'min', value: 8, message: 'Password must be at least 8 characters' }
      ]"
      :appendInner="true"
    >
      <template #append-inner="{ props: { changeInternalType, internalType } }">
        <button
          @click="() => changeInternalType(internalType === 'password' ? 'text' : 'password')"
          style="background: none; border: none; cursor: pointer; padding: 0 8px;"
        >
          {{ internalType === 'password' ? 'Show' : 'Hide' }}
        </button>
      </template>
    </OInput>

    <button type="submit" class="submit-button">Submit</button>
  </form>
</template>

<script setup>
import { ref } from 'vue'

const form = ref({
  firstName: '',
  lastName: '',
  email: '',
  password: ''
})

const submitForm = () => {
  console.log('Form submitted:', form.value)
}
</script>

<style>
.form-example {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 500px;
  margin: 0 auto;
}

.submit-button {
  margin-top: 16px;
  padding: 12px 24px;
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.submit-button:hover {
  background-color: #3a80d2;
}
</style>