Specialized Form Inputs

Currency / amount input

Pattern: text field + optional slider + stepper buttons. Store numbers in state, format for display.

Utils (lib/amount-utils.ts)

export function parseAmountInput(raw: string): number {
  const cleaned = raw.replace(/[^\d.]/g, "");
  const n = parseFloat(cleaned);
  return Number.isFinite(n) ? n : 0;
}

export function formatAmountForEditing(n: number): string {
  return n.toLocaleString("en-IN", { maximumFractionDigits: 0 }); // swap locale
}

export function formatAmountCompact(n: number): string {
  if (n >= 1_00_00_000) return `₹${(n / 1_00_00_000).toFixed(1)}Cr`;
  if (n >= 1_00_000) return `₹${(n / 1_00_000).toFixed(1)}L`;
  return formatAmountForEditing(n);
}

export function clampAmount(n: number, min: number, max: number) {
  return Math.min(max, Math.max(min, n));
}

export function getSliderMaxForValue(value: number): number {
  const tiers = [1_00_000, 10_00_000, 50_00_000, 1_00_00_000, 5_00_00_000];
  return tiers.find((t) => value <= t) ?? tiers[tiers.length - 1];
}

Component behavior

• Display mode: formatted string; empty when 0
• Edit mode: raw draft on focus; parse + clamp on blur
• Slider: dynamic max from getSliderMaxForValue
• Steppers: ± preset increments (1K, 10K, 1L, etc.)
• Optional compact prop for dense wizard layouts

Pass tooltip from centralized help copy.

Date of birth (select-based)

Prefer 3-select (year / month / day) when:

• Mobile UX matters more than calendar UX
• You want decade-grouped years without a heavy date lib

Store ISO string YYYY-MM-DD or undefined until complete.

export function toDateOfBirth(y?: number, m?: number, d?: number): string | undefined {
  if (!y || !m || !d) return undefined;
  return `${y}-${String(m).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
}

export function getDaysInMonth(year: number, month: number): number {
  return new Date(year, month, 0).getDate();
}

export function calculateAge(iso?: string): number | undefined { /* ... */ }

Clamp day when month/year changes. Show confirmation chip: formatted date + computed age.

Calendar date picker (shadcn)

For general dates (appointments, deadlines):

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">{date ? format(date, "PPP") : "Pick a date"}</Button>
  </PopoverTrigger>
  <PopoverContent className="w-auto p-0">
    <Calendar mode="single" selected={date} onSelect={setDate} initialFocus />
  </PopoverContent>
</Popover>

Use date-fns for format/parse. Disable past/future via disabled prop on Calendar.

Month + year only

Two selects side by side; store { month: number; year: number }. Useful for goals, EMI start dates.

Validation

• DOB: min/max age, valid calendar date (Feb 29 handling)
• Amount: non-negative, optional max; reject NaN on parse
• Always validate in Zod schema and show inline field errors

Locale / currency config

Centralize in one module:

export const MONEY = { locale: "en-IN", currency: "INR", symbol: "₹" } as const;

Swap per product/market without touching every component.

Related skills

• shadcn-ui-setup — Form, Calendar, Select primitives
• vitest-unit-testing — test parse/format utils
• multi-step-wizard-flow — wizard step forms using these inputs

Anti-patterns

• Storing formatted strings ("₹1,50,000") in app state
• <input type="number"> for currency (bad UX on mobile, spinner quirks)
• Native <input type="date"> when brand consistency matters (Safari/Chrome differ)