Input

Vue text input with size variants for forms, search fields, and general single-line entry.

Show code

Installation

Install from the Vuzeno registry:

      
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/input.json

      
      npx shadcn-vue@latest add https://vuzeno.com/r/input.json

      
      yarn dlx shadcn-vue@latest add https://vuzeno.com/r/input.json

      
      pnpm dlx shadcn-vue@latest add https://vuzeno.com/r/input.json

Usage

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

<template>
  <Input placeholder="Email" />
</template>

Examples

Sizes

Use the size prop to change the height of the input.

Show code

Field

Combine the Input component with Field to add a label, helper text, and validation context.

Show code

See Ark UI Field docs for field composition patterns.

Image Cropper Input Group