ui
GitHub

Input

A component that allows users to input text.

Docs
input-demo.tsx
import { Input } from "@/components/ui/input"
 
export function InputDemo() {
	return <Input placeholder="Name" inputContainerClassName="w-80" />
}

Installation

npx shadcn@latest add https://9ui.dev/r/input.json

Usage

Imports
import { Input } from "@/components/ui/input"
Anatomy
<Input />

Examples

With Icons

input-with-icons.tsx
import { useState } from "react"
import { EyeIcon, EyeOffIcon, LockIcon } from "lucide-react"
 
import { Input } from "@/components/ui/input"
 
export function InputWithIcons() {
	const [isPasswordVisible, setIsPasswordVisible] = useState(false)
 
	const togglePasswordVisibility = () => {
		setIsPasswordVisible(!isPasswordVisible)
	}
 
	const passwordType = isPasswordVisible ? "text" : "password"
 
	return (
		<Input
			placeholder="Password"
			inputContainerClassName="w-80"
			type={passwordType}
			leadingIcon={<LockIcon />}
			trailingIcon={
				isPasswordVisible ? (
					<EyeIcon
						className="hover:text-foreground pointer-events-auto cursor-pointer transition-colors duration-200"
						onClick={togglePasswordVisibility}
					/>
				) : (
					<EyeOffIcon
						className="hover:text-foreground pointer-events-auto cursor-pointer transition-colors duration-200"
						onClick={togglePasswordVisibility}
					/>
				)
			}
		/>
	)
}

Disabled

input-disabled.tsx
import { Input } from "@/components/ui/input"
 
export function InputDisabled() {
	return <Input inputContainerClassName="w-80" placeholder="Name" disabled />
}

Error

input-error.tsx
import { Input } from "@/components/ui/input"
 
export function InputError() {
	return (
		<Input inputContainerClassName="w-80" placeholder="Name" aria-invalid />
	)
}