Components
Loading preview...
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
@kokonutd
npx shadcn@latest add https://21st.dev/r/kokonutd/input"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>
);
}