COMPONENT: Input Component

[nayan458]

Task: Input Component

Type: Component
Milestone: M0.5 — Shared Component Library
Estimate: S

Component Type

• Design system (no API calls, pure props)

Props Interface

interface InputProps {
  label?:       string;
  placeholder?: string;
  value:        string;
  onChange:     (value: string) => void;
  type?:        'text' | 'email' | 'password' | 'search' | 'number';
  error?:       string | null;
  helperText?:  string;
  prefixIcon?:  ReactNode;
  suffixIcon?:  ReactNode;
  isDisabled?:  boolean;
  isReadOnly?:  boolean;
  autoComplete?: string;
  testId?:      string;
  className?:   string;
}

Variants / States

State	Description
Default	Neutral border, label above, placeholder inside
Focus	Border upgrades to --border-primary, no outline ring
Error	Border becomes --border-danger, error message below in danger text
Disabled	Reduced opacity, cursor not-allowed, no focus
With prefix icon	Icon left-padded inside input (e.g. search icon in topbar)
With suffix icon	Icon right-padded inside input (e.g. clear button, eye toggle)
Helper text	Subtle secondary text below input when no error

Acceptance Criteria

• onChange receives the string value directly, not the raw event
• error prop shows message below input in danger color, adds danger border
• prefixIcon and suffixIcon don't overflow or shift input text
• type="password" — suffix slot used externally by caller for eye toggle, Input itself does not hardcode this
• label renders a <label> with correct htmlFor wired to input id
• helperText hidden when error is present (error takes priority)
• Keyboard accessible, correct tab index
• Zero hardcoded hex values
• Storybook stories: default, focus, error, disabled, with icons, search variant

Notes

• Topbar search box is an Input with type="search" and prefixIcon={<SearchIcon />}
• Do not use e.target.value pattern outside this component — always expose clean string via onChange(value)