UIInput

UIInput

A versatile input component with various types and validation support.

<template>
  <UIInput
    v-model:value="inputValue"
    placeholder="Enter text"
    :type="type"
    :clearable="true"
    :disabled="false"
    :maxLength="100"
    @change="handleChange"
    @clear="handleClear"
  >
    <template #prefix>
      <SearchIcon class="w-4 h-4" />
    </template>
    <template #suffix>
      <span class="text-gray-400">suffix</span>
    </template>
  </UIInput>
</template>

<script setup lang="ts">
const inputValue = ref('')
const type = ref('text')

const handleChange = (value: string) => {
  console.log('Input changed:', value)
}

const handleClear = () => {
  console.log('Input cleared')
}
</script>

Props

• value (string | number): Input value
• type (‘text’ | ‘password’ | ‘email’ | ‘number’ | ‘tel’ | ‘url’): Input type
• placeholder (string): Placeholder text
• disabled (boolean): Disable input
• readonly (boolean): Make input readonly
• clearable (boolean): Show clear button
• maxLength (number): Maximum input length
• showCount (boolean): Show character count
• size (‘small’ | ‘medium’ | ‘large’): Input size
• status (‘error’ | ‘warning’ | ‘success’): Input status
• bordered (boolean): Show input border
• round (boolean): Round input corners
• autoFocus (boolean): Auto focus input

Events

• update:value: Emitted when input value changes
• change: Emitted when input value is changed and blur
• input: Emitted when input value is being typed
• focus: Emitted when input is focused
• blur: Emitted when input loses focus
• clear: Emitted when clear button is clicked
• pressEnter: Emitted when Enter key is pressed

Slots

• prefix: Content before input
• suffix: Content after input
• prepend: Content before input group
• append: Content after input group