URL Input with Paste Cleanup Form Block for React

When you paste a whole address (or the field is empty), it takes off a leading http:// or https:// and any trailing slash on the path, before a query or fragment, and trims the spaces around it; the query and the path are kept as they are. Typing is left alone except that a scheme you type in full is taken off, since a slash at the end may be the start of a path you are still typing. Leaving the field tidies it the same way, and the status line says what changed. A fragment pasted into the middle of a field is inserted as usual.

By the browser's URL class, given https:// plus what is in the field. The Host cell shows its hostname (lower case, and punycode for an international domain), the Path cell the path with its query and fragment, and the Secure cell is about the scheme you pasted. The block also asks for a dot in the host and an ending of two letters or more, which URL alone does not. The cells hold their space, so they never move the panel.

A space is certain to be wrong, so it is called out as you type. An empty field, a host without a dot and something that is not an address wait until you leave the field or press Save, since nobody is wrong halfway through typing a domain; after that the field re-checks as it changes. The message line is always in place, so it never moves the button, and the field points to it and is marked invalid while a problem shows.

A type="url" field trims what it holds and, on some browsers, quietly refuses what it dislikes, which would hide the very mistakes this block names (a space in the middle of a paste). The field is plain text with inputmode="url", so phones show a keyboard with a slash and a dot, autocomplete="url", no automatic capitals and no spell check.

No. Nothing is fetched or sent, so a well-formed address that does not exist still passes: the block checks the shape, not that the site is there. For a real app, check reachability on your server if it matters, store the address as https only, and treat an http:// paste as the reason to say so, as this block does.

Store the cleaned value, without the scheme, or https:// plus it. With react-hook-form, use Controller, call field.onChange with the cleaned value from the paste and blur handlers, move issueOf into a resolver and use mode: "onBlur" for the same timing. With TanStack Form, give the field onBlur and onChange validators and use field.handleChange for the cleaned value.