KQ-1170 · MAIL/FIELD

Mail Field

An email field that checks as you type and catches a slipped domain: when the domain looks finished but sits an edit or two from a known one (a swap counts as one), a row folds open under the field at its measured height on springs.glide, and using the fix morphs the address in place — kept letters slide on springs.glide, swapped letters trade places with one arcing over the other, a wrong letter drops out as the right one drops in on springs.snap, one after another on cascade(). A committed valid address is stamped with a postmark that lands on springs.recoil. The fix is the next thing Tab reaches, Enter or Space uses it, and Escape in the field declines it.

KQ-1170 · MAIL/FIELD

Did you mean ada.moss@fernmail.com?

We send the sign-in link here.

typo spotted · fernmial.com → fernmail.com

Open it on the Atelier stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/mail-field

Props

label: string; default —; What the address is for. The field's visible label.
value / defaultValue: string; default ""; The address, controlled or initial.
onValueChange: (value: string) => void; default —; Fires from the key, paste or accepted fix that changed the address.
onStamp: (value: string) => void; default —; Fires when a valid address is stamped: the field was left, Enter pressed, or a fix used or declined.
suggest: boolean; default true; Offer a fix when the domain looks like a slip of a known one.
stamp: boolean; default true; Stamp a committed valid address; off, it gets a quiet check.
domains: "common" | "work"; default "common"; Which built-in (invented) domains the field knows and suggests: personal mail hosts or company domains.
knownDomains: string[]; default —; The host's own known domains, in place of the built-in list.
name: string; default —; Form field name; the input itself carries the address.
placeholder: string; default "name@fernmail.com"; Shown in an empty field.
hint: string; default —; Helper text under the field.
error: string; default —; An error from the host; replaces the hint and marks the field invalid.
required: boolean; default false; An empty field is invalid once it has been left.
disabled: boolean; default false; Turns the field off.
sound: boolean; default false; Play the letters landing and the stamp. Only the visitor's own actions are heard.
className: string; default —; Classes for the root.

Prop	Type	Default	Description
label	string	—	What the address is for. The field's visible label.
value / defaultValue	string	""	The address, controlled or initial.
onValueChange	(value: string) => void	—	Fires from the key, paste or accepted fix that changed the address.
onStamp	(value: string) => void	—	Fires when a valid address is stamped: the field was left, Enter pressed, or a fix used or declined.
suggest	boolean	true	Offer a fix when the domain looks like a slip of a known one.
stamp	boolean	true	Stamp a committed valid address; off, it gets a quiet check.
domains	"common" \| "work"	"common"	Which built-in (invented) domains the field knows and suggests: personal mail hosts or company domains.
knownDomains	string[]	—	The host's own known domains, in place of the built-in list.
name	string	—	Form field name; the input itself carries the address.
placeholder	string	"name@fernmail.com"	Shown in an empty field.
hint	string	—	Helper text under the field.
error	string	—	An error from the host; replaces the hint and marks the field invalid.
required	boolean	false	An empty field is invalid once it has been left.
disabled	boolean	false	Turns the field off.
sound	boolean	false	Play the letters landing and the stamp. Only the visitor's own actions are heard.
className	string	—	Classes for the root.