Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA slug field that follows the page title until edited by hand, keeps the value URL-safe, shows the full URL and offers a reset.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it in any editor where a title becomes a URL. People get a sensible default and can still choose a shorter slug without the title fighting them.
Do not use it when: the URL is fixed after publishing (show it read-only instead).
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | required | Source of the automatic slug. |
base | string | "https://example.com/blog/" | Shown before the slug. |
defaultSlug | string | - | A hand-set slug; the field starts in manual mode. |
onChange | (slug: string) => void | - | Called with every value. |
A labelled input whose aria-describedby points at the URL line, so the full address is read with the field. The reset is a real button. Characters that are not URL-safe are replaced as you type; nothing is rejected silently.
The pattern ships with a test (slug-editor-with-preview.test.tsx). It covers the slugify rules, following the title, manual mode and the reset.