Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA page-title field with a length meter that turns amber near the search-result cut-off and red past it, announcing the count in text.
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 wherever someone writes a page title that search engines will show: a CMS, a blog editor, a settings page. It keeps titles under the cut-off without a rule in the docs.
Do not use it when: the title is not shown in search results, or the limit is in pixels rather than characters.
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 |
|---|---|---|---|
defaultValue | string | "" | Starting value. |
max | number | 60 | Where the meter turns red. |
label | string | "Page title" | The field label. |
onChange | (value: string) => void | - | Called on every keystroke. |
The field is a labelled input whose aria-describedby points at the count. The count is a polite live region, so each change is announced without interrupting. Past the limit the field gets aria-invalid. The progress bar is decorative (aria-hidden); the text carries the meaning.
The pattern ships with a test (meta-title-length-meter.test.tsx). It covers the count text at the near and over states, aria-invalid past the limit, and the describedby link.