Text Input with Address Preview Form Block for React

Edit the constants at the top. MIN and MAX are the length rule, NEAR is how close to the end the characters to go start to show, HOST is the fixed part of every address and SEED_TAKEN lists the addresses that are already in use. slugify and issueOf are pure functions: the first turns a name into its address, the second returns the first rule a name breaks and whether it is said while typing or only after the field is left. Nothing is typed twice, so the address line, the counter and the problem all follow from the one name.

Different problems have different timing. A name past 50 characters and an address that is taken are said as you type, because they are certain and the visitor can act on them. A name that is empty or under three characters is only said when the field is left or Create is pressed, since nobody is wrong halfway through a word; after that the field re-checks as it changes. The message line is always there, so a message appearing never moves the button, and the field points to it with aria-describedby and is marked aria-invalid while a problem shows.

When the address is taken, the button names the next free one (q3-launch-plan-2, then -3 if that is taken too), fills the field with it and puts focus back in the field, so the keyboard user stays where they were. The line is spoken by the status message in the foot. The button is only there while the problem is.

A disabled button gives no reason and drops out of the tab order. Here Create stays pressable: pressing it with a problem says what is wrong, in the foot and under the field, and moves focus to the field. Nothing is created until the name passes.

Nothing is created or sent. The taken names are four typed ones plus every name you create here, kept in the page's state, so creating the same name twice is refused. For a real app, check the address on your server when the field settles (and again when you create, since two people can pick the same name at once), show the server's answer in the same line, and keep the Use button for the suggestion it returns. The status line says what happened and the foot never changes size.

The block keeps its state in plain useState so it ports to Vue, Svelte and Solid. With react-hook-form, register the name with Controller (the field is controlled), move issueOf into a resolver or a schema, use mode: "onBlur" with reValidateMode: "onChange" for the same timing, and keep the reserved message line; its shouldFocusError puts focus on the field after a refused submit. With TanStack Form, give the field validators for blur and change and read field.state.meta.errors for the line under the input.