Hashtag Inline Autocomplete

ProNew

A post box where typing # lists existing tags with their use counts, offers to create a new valid tag, normalises it to lower case without spaces and lists the tags found in the text. Use this when posts are tagged inline.

Customize

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.

value

defaultValue

maxTags1

maxLength30

Guide and examples

When to use it

Use it for posts, notes and photo captions, where tags are written inside the text and the author benefits from seeing popular existing tags instead of inventing near-duplicates.

Do not use it when tags are chosen in a separate field. Use a tag picker.

Installation

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.

Props

Prop	Type	Default	Description
`tags`	`{ name, count }[]`	-	Existing tags and how often they are used.
`value`	`string`	-	The text (controlled).
`defaultValue`	`string`	`""`	Initial text.
`onValueChange`	`(value: string, tags: string[]) => void`	-	Runs on every change with the tags found in the text.
`maxTags`	`number`	-	Most distinct tags allowed in one post.
`maxLength`	`number`	`30`	Longest tag.

Accessibility

Rows read as the tag, then N posts; the Create row reads Create #name.
normalizeTag lower-cases, removes spaces and punctuation and rejects digits-only and over-long tags.
With maxTags reached, tags not yet in the text are listed as disabled and a polite status explains it.
The tags found in the text are listed under the box as badges and announced as a count.

Testing

The pattern ships with a Testing Library test (hashtag-inline-autocomplete.test.tsx) that covers existing and new tags, normalising, invalid tags, the limit and the tag list.

Guide and examples

When to use it

Use it for posts, notes and photo captions, where tags are written inside the text and the author benefits from seeing popular existing tags instead of inventing near-duplicates.

Do not use it when tags are chosen in a separate field. Use a tag picker.

Installation

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.

Props

Prop	Type	Default	Description
`tags`	`{ name, count }[]`	-	Existing tags and how often they are used.
`value`	`string`	-	The text (controlled).
`defaultValue`	`string`	`""`	Initial text.
`onValueChange`	`(value: string, tags: string[]) => void`	-	Runs on every change with the tags found in the text.
`maxTags`	`number`	-	Most distinct tags allowed in one post.
`maxLength`	`number`	`30`	Longest tag.

Accessibility

Rows read as the tag, then N posts; the Create row reads Create #name.
normalizeTag lower-cases, removes spaces and punctuation and rejects digits-only and over-long tags.
With maxTags reached, tags not yet in the text are listed as disabled and a polite status explains it.
The tags found in the text are listed under the box as badges and announced as a count.

Testing

The pattern ships with a Testing Library test (hashtag-inline-autocomplete.test.tsx) that covers existing and new tags, normalising, invalid tags, the limit and the tag list.