Slug Input

slug-input

A URL slug field that fills itself in from a title and then gets out of the way. Use it wherever a record needs a URL: the permalink or slug field in a blog post editor or CMS admin form, a page or docs route segment, a product handle, a workspace or team URL, a category or tag slug, a public profile handle. Type a title, watch the slug appear as kebab-case, and edit it whenever you want — this is the part hand-rolled fields get wrong. It keeps deriving only while the field still holds exactly what it generated, so editing the slug by hand, or loading an existing slug from your database, stops the derivation for good: renaming a published post cannot silently change its URL. Leave the field empty and blur, and it goes back to following the title. Every keystroke is sanitised in place — lowercased, spaces and punctuation collapsed to a single hyphen (or underscore), accents folded away — while the caret stays exactly where you were typing, which is what breaks when you naively assign a transformed value back to a controlled input. Unicode is handled rather than mangled: NFKD folding turns "Café au lait" into cafe-au-lait, "Łódź" into lodz, and the letters decomposition leaves whole are spelled out ("Straße" becomes strasse, not strae). Pass allowUnicode to keep the title's own script instead — without it a Japanese, Chinese, Korean, Greek, Cyrillic, Hebrew or Arabic title slugifies to an empty string, and with it combining marks stay attached to their letter, so がっこう does not quietly become かっこう. maxLength cuts a generated slug back to a whole word rather than mid-syllable, apostrophes disappear instead of splitting words ("don't panic" becomes dont-panic), and pasting a full URL takes just its last path segment. Zero dependencies, one import, shadcn tokens, optional prefix like example.com/blog/ wired to the input with aria-describedby. Common asks it answers: "slug input react", "auto generate slug from title", "permalink field component", "slugify input react", "url handle field", "kebab case input", "seo friendly url input", "slug field cms form", "react slug generator component", "github-slugger alternative", "slugify npm alternative", "editable slug with auto fill", "stop slug changing after publish", "slug input with prefix", "unicode slug transliteration react", "japanese title to slug". Typing with an IME is handled rather than fought: while a composition is open the field shows exactly what the engine put there and sanitises nothing, because transforming a half-formed character writes the old text back and loses the composition — and because not every engine fires compositionend before blur, leaving the field mid-word still commits what was on screen. Distinct from the other text fields here: masked-input imposes a fixed shape on what you type, char-counter counts toward a limit, floating-label-input is about the label, and inline-edit turns text into a field on click — none of them derive their value from another field, which is the whole of this one. Official shadcn/ui has no slug or permalink field — its input is a bare element and input-group is an assembly kit with no logic in it — and a slugify npm package solves the string, not the field: the caret, the do-not-stomp rule and the typing-in-progress state are what this component is.