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" className="w-80" />
}

Installation

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

Usage

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

Examples

With Icons

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

Disabled

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

Error

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