Input
Form primitive with label support, error states, and focus animations.
Simple Build
Interactive Preview
Initialising Operative...
Architecture
Component Architecture
Input/
Prop Usage
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Floating label shown above the input. |
error | string | — | Error message shown below the input in red. |
type | string | "text" | HTML input type (text, email, password, etc). |
placeholder | string | — | Placeholder text shown inside the input. |
disabled | boolean | false | Disables the input. |
required | boolean | false | Marks the input as required. |
className | string | — | Additional Tailwind classes. |
onChange | (e: React.ChangeEvent<HTMLInputElement>) => void | — | Change handler. |
Usage
import { Input } from '@/ui';
// Basic
<Input label="Email" type="email" placeholder="you@example.com" />
// With error
<Input
label="Password"
type="password"
error="Password must be at least 8 characters"
/>
// Controlled
const [value, setValue] = useState('');
<Input
label="Username"
value={value}
onChange={e => setValue(e.target.value)}
/>