Search Suggest Bold Remainder

ProNew

A search field whose suggestions bold what you have not typed yet, preview the highlighted suggestion in the input while you arrow through them and restore your own text on Escape. Use this when a search box predicts the rest of a query.

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

limit6

placeholder

Guide and examples

When to use it

Use it for site search and query boxes with a list of popular or recent queries, where each suggestion extends what the person typed and the next words matter most.

Do not use it when suggestions are results, not queries (people, products). Use a combobox with highlighted matches.

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
`suggestions`	`string[]`	-	Queries to offer; only those starting with the typed text are shown.
`value`	`string`	-	The text (controlled).
`defaultValue`	`string`	`""`	Initial text.
`onValueChange`	`(value: string) => void`	-	Runs on typing and when a suggestion is taken.
`onSubmit`	`(query: string) => void`	-	Runs on Enter or when a suggestion is clicked.
`limit`	`number`	`6`	Most suggestions.
`placeholder`	`string`	`Search…`	Input placeholder.

Accessibility

The input is a combobox with aria-autocomplete="list", aria-expanded, aria-controls and aria-activedescendant.
Arrowing previews a suggestion in the input; Escape returns to exactly what was typed, so keyboard users can look without losing their text.
The bold remainder is <strong>; the whole suggestion is the accessible name.
Typing again clears the preview and recomputes the list.

Testing

The pattern ships with a Testing Library test (search-suggest-bold-remainder.test.tsx) that covers the bold remainder, previewing while arrowing, restoring on Escape and submitting.

Guide and examples

When to use it

Use it for site search and query boxes with a list of popular or recent queries, where each suggestion extends what the person typed and the next words matter most.

Do not use it when suggestions are results, not queries (people, products). Use a combobox with highlighted matches.

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
`suggestions`	`string[]`	-	Queries to offer; only those starting with the typed text are shown.
`value`	`string`	-	The text (controlled).
`defaultValue`	`string`	`""`	Initial text.
`onValueChange`	`(value: string) => void`	-	Runs on typing and when a suggestion is taken.
`onSubmit`	`(query: string) => void`	-	Runs on Enter or when a suggestion is clicked.
`limit`	`number`	`6`	Most suggestions.
`placeholder`	`string`	`Search…`	Input placeholder.

Accessibility

The input is a combobox with aria-autocomplete="list", aria-expanded, aria-controls and aria-activedescendant.
Arrowing previews a suggestion in the input; Escape returns to exactly what was typed, so keyboard users can look without losing their text.
The bold remainder is <strong>; the whole suggestion is the accessible name.
Typing again clears the preview and recomputes the list.

Testing

The pattern ships with a Testing Library test (search-suggest-bold-remainder.test.tsx) that covers the bold remainder, previewing while arrowing, restoring on Escape and submitting.