BaseInput

Input component with v-model, validation state, and prefix/suffix slots.

Basic

Email

Value:

<template>
  <div style="max-width:320px">
    <BaseInput v-model="value" label="Email" placeholder="you@example.com" />
    <p style="margin-top:8px;font-size:13px;color:#6b7280">Value: {{ value }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
</script>

Validation

Username *

<template>
  <div style="max-width:320px;display:flex;flex-direction:column;gap:12px">
    <BaseInput
      v-model="value"
      label="Username"
      :required="true"
      :error="hasError"
      :error-message="hasError ? 'This field is required' : undefined"
      placeholder="Enter username"
    />
    <BaseButton size="sm" @click="validate">Validate</BaseButton>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
const value = ref('')
const touched = ref(false)
const hasError = computed(() => touched.value && !value.value.trim())
function validate() { touched.value = true }
</script>

Prefix & Suffix

Price

$USD

<template>
  <div style="max-width:320px">
    <BaseInput v-model="value" label="Price" placeholder="0.00">
      <template #prefix>$</template>
      <template #suffix>USD</template>
    </BaseInput>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
</script>

Props

Prop	Type	Default	Description
modelValue	string | number	''	Input value (v-model)
label	string	—	Label text above input
placeholder	string	—	Input placeholder
type	text | password | email | number | search | tel | url	text	Input type
disabled	boolean	false	Disables the input
readonly	boolean	false	Makes input read-only
required	boolean	false	Shows asterisk on label
error	boolean	false	Applies error styling
errorMessage	string	—	Error text below input
hint	string	—	Hint text (hidden when errorMessage is set)

Events

Event	Payload	Description
update:modelValue	string	Emitted on every input
blur	FocusEvent	Emitted on blur
focus	FocusEvent	Emitted on focus

Slots

Slot	Description
prefix	Content placed before the input field
suffix	Content placed after the input field