Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA meta-description field with the count, a cut-off warning and keyword chips that light up as each word appears in the 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 in page settings with the target keywords passed in. Writers see the length and the missing words at once, so descriptions come out complete and short.
Do not use it when: there are no target words: use a plain length meter 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 |
|---|---|---|---|
defaultValue | string | "" | Starting text. |
max | number | 160 | Characters before the cut-off warning. |
keywords | string[] | [] | Words that should appear. |
onChange | (value: string) => void | - | Called on every change. |
A labelled textarea described by the count, which is a polite live region; past the limit it gets aria-invalid. Each keyword chip carries hidden text saying included or missing, so colour is never the only signal.
The pattern ships with a test (meta-description-editor.test.tsx). It covers the chip states, the count and aria-invalid.