kagadmodyaa

Input

BadgeTextarea

A text input for forms — text, email, file and every native type.

import { Input } from '@/components/ui/input'

export default function InputDemo() {
  return <Input type="email" placeholder="Email" className="max-w-xs" />
}

Installation

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/input.json

Needs a React + Tailwind project set up with shadcn. Copies the component source straight into your project, so you can edit it.

Input imports cn() from lib/utils.ts — add it too if you don't have it yet:

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Usage

import { Input } from '@/components/ui/input'

<Input type="email" placeholder="Email" />

Examples

Label, disabled & file

import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'

export default function InputStates() {
  return (
    <div className="grid w-full max-w-xs gap-4">
      <div className="grid gap-1.5">
        <Label htmlFor="input-states-name">Name</Label>
        <Input id="input-states-name" placeholder="Ada Lovelace" />
      </div>
      <div className="grid gap-1.5">
        <Label htmlFor="input-states-disabled">Disabled</Label>
        <Input id="input-states-disabled" placeholder="Can't touch this" disabled />
      </div>
      <div className="grid gap-1.5">
        <Label htmlFor="input-states-file">File</Label>
        <Input id="input-states-file" type="file" />
      </div>
    </div>
  )
}

API Reference

NameTypeDefaultDescription
typestring—Native input type (text, email, file, …).
...propsReact.InputHTMLAttributes<HTMLInputElement>—Every native input attribute (disabled, value, onChange, etc.).