Input
Input Component
Text input field with consistent styling. Works with labels and form validation.
Import
import { Input } from '@covers/ui';Usage
import { Input, Label } from '@covers/ui';
// Basic input
<Input placeholder="Enter text..." />
// With label
<div className="space-y-2">
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" placeholder="you@example.com" />
</div>
// With icon
<div className="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
<Input className="pl-10" placeholder="Search..." />
</div>
// Disabled
<Input disabled placeholder="Disabled input" />Props
| Name | Type | Description |
|---|---|---|
| type | string | Input type (text, email, password, etc.) |
| placeholder | string | Placeholder text |
| disabled | boolean | Disable input |
Default Styling
bg-slate-800 border border-slate-700 rounded-md px-3 py-2 text-slate-50
Part of CoverKit
This component is part of CoverKit (@covers/ui), a dark-first React component library.