Components
Input
A versatile input component with support for various states, clear functionality, and validation indicators. Built with shadcn/ui principles and modern design patterns.
Features
-
Input States
- Default state
- Focus state with ring effect
- Error state with validation
- Success state with confirmation
- Disabled state
- Clear functionality
-
Visual Feedback
- Status indicators
- Validation messages
- Clear button
- Focus rings
- Smooth transitions
Loading preview...
"use client";
import { Input } from "@/components/ui/input";
export function InputDemo() {
return (
<div className="w-full max-w-sm space-y-8">
{/* Default */}
<div className="space-y-2">
<h3 className="text-sm font-medium">Default Input</h3>
<Input
label="Label"
placeholder="Type something..."
/>
</div>
{/* With Error */}
<div className="space-y-2">
<h3 className="text-sm font-medium">Error State</h3>
<Input
label="Label"
placeholder="Type something..."
error="This field is required"
/>
</div>
{/* With Success */}
<div className="space-y-2">
<h3 className="text-sm font-medium">Success State</h3>
<Input
label="Label"
placeholder="Type something..."
success="Looks good!"
defaultValue="Valid input"
/>
</div>
{/* With Clear Button */}
<div className="space-y-2">
<h3 className="text-sm font-medium">With Clear Button</h3>
<Input
label="Label"
placeholder="Type something..."
defaultValue="Clearable input"
onClear={() => console.log('Input cleared')}
/>
</div>
{/* Disabled */}
<div className="space-y-2">
<h3 className="text-sm font-medium">Disabled</h3>
<Input
label="Label"
placeholder="Type something..."
disabled
defaultValue="Disabled input"
/>
</div>
</div>
);
}