my2/app/components/ui/input

Input Component

shadcn-nuxt Input component with TypeScript support and variants.

Features

• Two-way binding - Full v-model support
• Variants - Default and error states
• Sizes - Small, default, and large
• TypeScript - Full type safety
• All HTML input types - text, email, password, number, etc.

Basic Usage

<script setup lang="ts">
import { ref } from 'vue'
import { Input } from '@/components/ui/input'

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

<template>
  <Input v-model="email" type="email" placeholder="Enter your email" />
</template>

With VeeValidate Form

<script setup lang="ts">
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import { z } from 'zod'
import {
  FormField,
  FormItem,
  FormLabel,
  FormControl,
  FormMessage,
} from '@/components/ui/form'
import { Input } from '@/components/ui/input'

const formSchema = toTypedSchema(
  z.object({
    email: z.string().email('Please enter a valid email'),
  })
)

const form = useForm({
  validationSchema: formSchema,
})
</script>

<template>
  <form @submit="form.handleSubmit((values) => console.log(values))">
    <FormField v-slot="{ field }" name="email">
      <FormItem>
        <FormLabel>Email</FormLabel>
        <FormControl>
          <Input
            v-bind="field"
            type="email"
            placeholder="you@example.com"
          />
        </FormControl>
        <FormMessage />
      </FormItem>
    </FormField>
  </form>
</template>

Variants

<!-- Default -->
<Input v-model="value" />

<!-- Error state (use with form validation) -->
<Input v-model="value" variant="error" />

Sizes

<!-- Small -->
<Input v-model="value" size="sm" />

<!-- Default -->
<Input v-model="value" size="default" />

<!-- Large -->
<Input v-model="value" size="lg" />

Input Types

<!-- Text (default) -->
<Input v-model="text" type="text" />

<!-- Email -->
<Input v-model="email" type="email" />

<!-- Password -->
<Input v-model="password" type="password" />

<!-- Number -->
<Input v-model="age" type="number" />

<!-- Date -->
<Input v-model="date" type="date" />

<!-- Search -->
<Input v-model="query" type="search" />

Props

Prop	Type	Default	Description
modelValue	string | number	undefined	The input value
type	string	'text'	HTML input type
placeholder	string	undefined	Placeholder text
disabled	boolean	false	Disable the input
required	boolean	false	Mark as required
name	string	undefined	Input name attribute
id	string	undefined	Input ID attribute
autocomplete	string	undefined	Autocomplete attribute
variant	'default' | 'error'	'default'	Visual variant
size	'sm' | 'default' | 'lg'	'default'	Input size
class	string	undefined	Additional CSS classes

Events

Event	Payload	Description
update:modelValue	string | number	Emitted when value changes