Components
Input
Text input field with variants, states, and slot overrides.
Input
A styled text input component with consistent theming and state management.
Import
import { Input } from '@mks2508/mks-ui/react';Basic Usage
Basic Usage
.tsx
<div className="space-y-4">
<Input placeholder="Enter your email" />
<Input type="password" placeholder="Password" />
<Input type="number" placeholder="0" />
</div>With Label
With Label
.tsx
<div className="space-y-2">
<Label htmlFor="username">Username</Label>
<Input id="username" placeholder="mks2508" />
</div>Disabled
Disabled
.tsx
<Input disabled placeholder="Cannot edit" />File Input
File Input
.tsx
<Input type="file" />Slot Overrides
Slot Overrides
.tsx
<Input
slots={{ root: 'border-cyan-400/50 focus:ring-cyan-500/30' }}
placeholder="Cyan border"
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
type | string | 'text' | HTML input type |
placeholder | string | — | Placeholder text |
disabled | boolean | false | Disable the input |
slots | SlotOverrides<InputSlot> | — | Style overrides per slot |
className | string | — | Additional CSS classes |