Introduction

shadcn/ui gives you an <Input>. What it does not give you is a phone field that knows about countries, a money field that cannot lose a cent to a float, or a cron field that tells you what the expression means. Everyone builds those, badly, once per project.

The hard part is never the markup. It is the caret jumping to the end when you insert a digit in the middle, the paste from a spreadsheet that arrives with a non-breaking space in it, and the fact that 0.1 + 0.2 is not 0.3 and your invoice total is now wrong by a cent.

Every component follows the same rule: onChange emits the canonical value, never the display string. A phone field emits E.164. A money field emits an integer count of minor units. A duration field emits seconds. What you store, validate and send over the wire is always the same shape, whatever the field happens to be showing.

See Value semantics for the full table, and The props contract for the eleven props every component implements identically.