Input

Source: packages/shared/components/ui/input.tsx

import { Input } from "@prosper/shared/components/ui/input";

Preview

Text

Disabled

Default Styling

Height: h-10 (40px)
Background: bg-input-background (gray-100 in light, gray-800 in dark)
Border: border-input
Focus: 3px ring in ring/50, border changes to ring color
Placeholder: text-muted-foreground
Font size: text-base (16px), md:text-sm (14px on medium+ screens)

Props

Accepts all standard <input> HTML attributes, plus:

Prop	Type	Default	Description
`type`	`string`	—	Input type (text, email, password, tel, etc.)
`className`	`string`	—	Additional Tailwind classes
`disabled`	`boolean`	`false`	Disables input, reduces opacity

Usage Examples

Basic

<Input type="text" placeholder="Enter your name" />
<Input type="email" placeholder="admin@example.com" />
<Input type="password" placeholder="••••••••" />

With Label (common pattern)

<div className="space-y-2">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="john@company.com" />
</div>

With white background override (admin forms)

<Input id="title" className="bg-white" value={title} onChange={...} />

Used In

Admin: LoginPage, JobForm (all fields)
Landing: ContactPage (all fields)

Notes

Override in Admin JobForm: className="bg-white" replaces the default bg-input-background to match the white-background admin form style.
Landing ContactPage and Admin LoginPage use the component with default styling (no className overrides).