Input

A text input for forms and user data entry.

Installation

Add the input component with the shadcn CLI.

bash

npx shadcn@latest add https://swiss.ui.unsanity.ai/r/input.json

Usage

tsx

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

<Input placeholder="Email" />

Examples

Disabled

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

<Input disabled placeholder="Disabled" className="w-64" />

With label

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

<div className="grid w-64 gap-1.5">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="you@example.com" />
</div>