Mention Single Line Input

ProNew

A one-line chat or reply box with @ mentions where Enter sends the message unless the mention list is open, in which case Enter picks the person. Use this when the composer is a single line.

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

placeholder

Guide and examples

When to use it

Use it for reply bars, live-chat widgets and search-and-mention fields, where Enter means send and a mention menu must not swallow or trigger a send by accident.

Do not use it when messages are multi-line. Use a textarea-based mention box.

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
`people`	`{ id, name }[]`	-	Who can be mentioned.
`value`	`string`	-	The text (controlled).
`defaultValue`	`string`	`""`	Initial text.
`onValueChange`	`(value: string) => void`	-	Runs on every change.
`onSend`	`(text: string, mentioned: string[]) => void`	-	Runs on Enter with the list closed and text present.
`placeholder`	`string`	`Reply…`	Input placeholder.

Accessibility

The input is a combobox with a listbox; the list opens only for an @ that starts a word.
Enter picks while the list is open and sends otherwise, so a mention is never sent half-typed by pressing Enter.
After sending, the input is cleared and a polite Sent status is announced; focus stays in the input.
Empty or whitespace-only text is never sent.

Testing

The pattern ships with a Testing Library test (mention-single-line-input.test.tsx) that covers Enter picking versus sending, clearing after send and mentioned ids.

Guide and examples

When to use it

Use it for reply bars, live-chat widgets and search-and-mention fields, where Enter means send and a mention menu must not swallow or trigger a send by accident.

Do not use it when messages are multi-line. Use a textarea-based mention box.

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
`people`	`{ id, name }[]`	-	Who can be mentioned.
`value`	`string`	-	The text (controlled).
`defaultValue`	`string`	`""`	Initial text.
`onValueChange`	`(value: string) => void`	-	Runs on every change.
`onSend`	`(text: string, mentioned: string[]) => void`	-	Runs on Enter with the list closed and text present.
`placeholder`	`string`	`Reply…`	Input placeholder.

Accessibility

The input is a combobox with a listbox; the list opens only for an @ that starts a word.
Enter picks while the list is open and sends otherwise, so a mention is never sent half-typed by pressing Enter.
After sending, the input is cleared and a polite Sent status is announced; focus stays in the input.
Empty or whitespace-only text is never sent.

Testing

The pattern ships with a Testing Library test (mention-single-line-input.test.tsx) that covers Enter picking versus sending, clearing after send and mentioned ids.