Input

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <UInput v-model="value" placeholder="Enter text..." />
</template>

<template>
  <UInput type="text" placeholder="Text" />
  <UInput type="email" placeholder="Email" />
  <UInput type="password" placeholder="Password" />
  <UInput type="number" placeholder="Number" />
  <UInput type="tel" placeholder="Phone" />
  <UInput type="url" placeholder="URL" />
  <UInput type="search" placeholder="Search" />
</template>

<template>
  <!-- Leading icon -->
  <UInput
    leading-icon="i-heroicons-magnifying-glass"
    placeholder="Search..."
  />
  
  <!-- Trailing icon -->
  <UInput
    trailing-icon="i-heroicons-check"
    placeholder="Username"
  />
  
  <!-- Both icons -->
  <UInput
    leading-icon="i-heroicons-envelope"
    trailing-icon="i-heroicons-check-circle"
    placeholder="Email"
  />
</template>

<template>
  <UInput
    :avatar="{ src: 'https://i.pravatar.cc/150?img=1' }"
    placeholder="Enter your name"
  />
</template>

<template>
  <UInput placeholder="Amount">
    <template #leading>
      <span class="text-gray-500">$</span>
    </template>
  </UInput>
  
  <UInput placeholder="Website">
    <template #trailing>
      <span class="text-gray-500">.com</span>
    </template>
  </UInput>
</template>

<template>
  <UInput color="primary" placeholder="Primary" />
  <UInput color="secondary" placeholder="Secondary" />
  <UInput color="success" placeholder="Success" />
  <UInput color="warning" placeholder="Warning" />
  <UInput color="error" placeholder="Error" />
  <UInput color="neutral" placeholder="Neutral" />
</template>

<template>
  <UInput variant="outline" placeholder="Outline" />
  <UInput variant="soft" placeholder="Soft" />
  <UInput variant="ghost" placeholder="Ghost" />
  <UInput variant="none" placeholder="None" />
</template>

<template>
  <UInput size="xs" placeholder="Extra Small" />
  <UInput size="sm" placeholder="Small" />
  <UInput size="md" placeholder="Medium" />
  <UInput size="lg" placeholder="Large" />
  <UInput size="xl" placeholder="Extra Large" />
</template>

<template>
  <!-- Disabled -->
  <UInput disabled placeholder="Disabled" />
  
  <!-- Required -->
  <UInput required placeholder="Required field" />
  
  <!-- Highlighted -->
  <UInput highlight placeholder="Highlighted" />
  
  <!-- Loading -->
  <UInput loading placeholder="Loading..." />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const trimmed = ref('')
const number = ref(0)
const nullable = ref(null)
</script>

<template>
  <!-- Trim whitespace -->
  <UInput v-model.trim="trimmed" />
  
  <!-- Convert to number -->
  <UInput v-model.number="number" type="number" />
  
  <!-- Nullable (empty = null) -->
  <UInput v-model.nullable="nullable" />
  
  <!-- Optional (empty = undefined) -->
  <UInput v-model.optional="optional" />
  
  <!-- Lazy (update on change, not input) -->
  <UInput v-model.lazy="lazy" />
</template>

<template>
  <!-- Immediate autofocus -->
  <UInput autofocus placeholder="Focused on mount" />
  
  <!-- Delayed autofocus -->
  <UInput autofocus :autofocus-delay="500" placeholder="Focused after 500ms" />
</template>

<script setup lang="ts">
import { z } from 'zod'
import { ref } from 'vue'

const schema = z.object({
  email: z.string().email('Invalid email'),
  username: z.string().min(3, 'Must be at least 3 characters')
})

const state = ref({
  email: '',
  username: ''
})
</script>

<template>
  <UForm :schema="schema" :state="state">
    <UFormField label="Email" name="email">
      <UInput
        v-model="state.email"
        type="email"
        leading-icon="i-heroicons-envelope"
      />
    </UFormField>
    
    <UFormField label="Username" name="username">
      <UInput
        v-model="state.username"
        leading-icon="i-heroicons-user"
      />
    </UFormField>
  </UForm>
</template>