GhostText

Stable

Faded suggested text that appears after what you typed, with a Tab key hint.

Also known as inline completion, autocomplete text, copilot suggestion

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

Thanks for the update.Suggestion available: I will review the draft tomorrow morning.. Press Tab to accept, Esc to dismiss. Ctrl + Right accepts one word.

<GhostText typed="Thanks for the update." partialHint="Ctrl + Right accepts one word"
  onAccept={() => accept()} onDismiss={() => dismiss()}>
  {" I will review the draft tomorrow morning."}
</GhostText>

Click the Tab hint to accept, or the close button to dismiss. In a real editor, Tab accepts and Escape dismisses.

Usage Code Design Accessibility

When to use it

A suggested ending shown faded after what someone typed, with a hint for the key that accepts it. It looks clearly different from real text and only becomes text when accepted.

Made of: Typed text · Suggestion · Key hint to accept · Hint to accept one word · Dismiss button · Hidden description for screen readers

Use it for

Completing the sentence or line someone is typing.
Offering a long suggestion that can be accepted a word at a time, with a hint that says how.

Not for

A whole paragraph or a rewrite: use SuggestionBar.
A correction to text already written: use SuggestionCard.
Ideas for what to ask next: use SuggestionChips.

Do and avoid

Let's meet at theSuggestion available: station at 9. Press Tab to accept, Esc to dismiss.

Do. A short faded ending that is easy to take or ignore.

Let's meet at theSuggestion available: station at 9, then walk to the market, have lunch by the river, visit the old castle and take the late train home together.. Press Tab to accept, Esc to dismiss.

Avoid. A whole faded paragraph is hard to read and hard to judge.

Do

Make Tab, or your accept key, work from the keyboard as well as from the hint.
Dismiss on Escape, and when the person keeps typing.
For long suggestions, let people accept one word at a time and say how.
Keep the suggestion looking different from real text.

Avoid

Do not put the suggestion into the real text before it is accepted.
Do not make screen readers announce the suggestion. It changes with every key press.
Do not use it for whole paragraphs. Use SuggestionBar.

On a phone

Phones have no Tab or Esc key, so pass onAccept and onDismiss. The key hint then becomes a tap target and a dismiss button appears.
On touch screens both buttons keep their size and have a 44px tap area, so the line they sit in does not get taller.
The hint shows the accept key as text, so set acceptKey to something a phone user understands or hide the hint.

Seen in products

GitHub Copilot in VS Code and Visual Studio shows dimmed ghost text that completes the current line or a block, accepted with Tab.
With Next Edit Suggestions, Tab navigates to the suggested edit and Tab again accepts it.

Properties

Prop	Type	Default	Description
childrenrequired	string	none	The suggested continuation.
typed	ReactNode	none	Text already typed, rendered in normal ink before the suggestion.
id	string	none	Id of the hidden description. Point the field's aria-describedby at it.
acceptKey	string	"Tab"	Key shown in the hint and named in the description.
dismissKey	string	"Esc"	Key named in the description.
partialHint	string	none	Text for a partial accept path, such as one word or one line.
description	string	none	Replaces the default hidden description.
onAccept	() => void	none	Called when the hint button is activated. Makes the hint a button.
onDismiss	() => void	none	Called when the dismiss button is activated. Shows the button.
acceptLabel / dismissLabel	string	"Accept suggestion" / "Dismiss suggestion"	Accessible names of the two controls.

"Show code under the preview gives the code for the example on the stage."

States

States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.

accept button: Pass onAccept to turn the key hint into a button that accepts the suggestion.
dismiss button: Pass onDismiss to show a small close button beside the suggestion.
partial hint: Pass partialHint to show a short note about accepting only part of the suggestion.

Tokens

Change one of these and every part that uses it follows.

--surface-sunken
--fg-subtle
--border-strong
--border
--radius-control

Accept or dismiss