Input API Reference

Props

Prop	Type	Default	Description
prepend	Boolean	false	Show prepend button
prependInner	Boolean	false	Show inner prepend button
label	String	''	Label for the input
appendInner	Boolean	false	Show inner append button
append	Boolean	false	Show append button
clearable	Boolean	false	Allow clearing the input
hideDetails	Boolean	false	Hide validation details
hint	String	-	Hint message for the input
persistentHint	Boolean	false	Always show hint message
loading	Boolean	false	Show loading state
disabled	Boolean	false	Disable the input
readonly	Boolean	false	Make the input read-only
placeholder	String	''	Placeholder text
type	String	'text'	Input type (text, email, password, etc.)
persistentDetails	Boolean	false	Always show validation details
modelValue	String/Number/Object/Array	-	v-model binding value
value	String/Number/Object/Array	-	Alternative to modelValue
rules	Array	[]	Validation rules
hideSpinButtons	Boolean	false	Hide spin buttons for number inputs

Events

The component emits many standard DOM events, including:

Event	Payload	Description
update:modelValue	Value	Emitted when input value changes
prepend:click	Event	Emitted when prepend button is clicked
prependInner:click	Event	Emitted when inner prepend button is clicked
clear:click	Event	Emitted when clear button is clicked
append:click	Event	Emitted when append button is clicked
appendInner:click	Event	Emitted when inner append button is clicked
validate	Boolean, Value, Message	Emitted when validation occurs
focus, blur, input, change	Event	Standard form events
keydown, keyup, keypress	Event	Keyboard events
click, dblclick, mousedown, etc.	Event	Mouse events

Slots

Slot	Props	Description
prepend	{ click }	Content before the input
prependInner	{ click }	Content inside the input, at the beginning
input-field	Various props	Custom input field
append-inner	{ click, changeInternalType, internalType }	Content inside the input, at the end
append	{ click }	Content after the input
details	{ errorMessage, hint }	Custom validation details
loading	-	Custom loading indicator

Methods

The component exposes these methods via template refs:

Method	Description
validate()	Manually trigger validation
setInternalValue(value)	Set the input value programmatically

Example Usage

<template>
  <OInput
    v-model="email"
    label="Email Address"
    type="email"
    :rules="[
      { rule: 'required', message: 'Email is required' },
      { rule: 'email', message: 'Please enter a valid email' }
    ]"
    :clearable="true"
    :appendInner="true"
    @validate="handleValidation"
  />
</template>

<script setup>
import { ref } from 'vue'
import { OInput } from 'your-component-library'

const email = ref('')

const handleValidation = (isValid, value, message) => {
  console.log('Validation result:', isValid, value, message)
}
</script>

Validation Rules

The component supports these built-in validation rules:

• required: Field must not be empty
• email: Field must be a valid email address
• min: Field must have a minimum length
• max: Field must have a maximum length
• numeric: Field must contain only numbers
• alpha: Field must contain only letters
• alphaNumeric: Field must contain only letters and numbers
• phone: Field must be a valid phone number
• url: Field must be a valid URL

You can also create custom validation rules using the custom rule type and providing a validator function.