Ghost Input

Usage

import { GhostInput } from "@/components/ui/ghost-input";

async function fetchSuggestion(value: string, signal: AbortSignal) {
  const res = await fetch("/api/complete", {
    method: "POST",
    body: JSON.stringify({ prompt: value }),
    signal,
  });
  const { completion } = await res.json();
  // Must return the FULL string — current value plus the completion.
  return value + completion;
}

export function ReplyBox() {
  const [value, setValue] = useState("");

  return (
    <GhostInput
      value={value}
      onValueChange={setValue}
      fetchSuggestion={fetchSuggestion}
      placeholder="Write a reply…"
    />
  );
}

Inside a Field, drop it straight into FieldControl — id and ARIA wiring pass through:

<Field>
  <FieldLabel>Reply</FieldLabel>
  <FieldControl>
    <GhostInput value={value} onValueChange={setValue} fetchSuggestion={fetchSuggestion} />
  </FieldControl>
</Field>

Features

• Race-proof suggestions: every keystroke aborts the in-flight request before starting a new debounce, and any response that doesn't extend the current value is discarded — a slow reply can never overwrite what the user is now looking at.
• Nothing is ever inserted for you. Tab (or → at the end of the text) accepts, Esc dismisses. There is no auto-accept timer, by design.
• A real <input>, not a contentEditable — IME composition, autofill, native undo and screen-reader field semantics all behave exactly as they would in a plain input.
• Announced without double-reading: the ghost text is aria-hidden and an aria-live region announces the suggestion plus its accept/dismiss keys instead.
• Drops into Field unchanged, with id and ARIA wiring passing straight through.

Examples

Tuning when a suggestion is requested — wait longer after typing stops, and don't ask at all until there's enough context to complete:

<GhostInput
  value={value}
  onValueChange={setValue}
  fetchSuggestion={fetchSuggestion}
  debounceMs={500}
  minChars={12}
/>

Reacting to an accepted completion — useful for logging acceptance rate, which is the honest measure of whether the suggestions are any good:

<GhostInput
  value={value}
  onValueChange={setValue}
  fetchSuggestion={fetchSuggestion}
  onAcceptSuggestion={(full) => analytics.track("ghost_accepted", { length: full.length })}
/>

The live example at the top of this page is fully interactive — type a few words and pause to see the completion appear.

Props

All other props forward to the underlying <input>.

Behaviour

• Every keystroke cancels the in-flight request via AbortSignal before starting a new debounce timer — there is no scenario where a stale response can land after a newer one.
• A response that doesn't start with the value it was requested for is discarded, so a slow response can't overwrite what the user is now looking at.
• Tab, or → with the caret already at the end of the text, accepts. Esc dismisses without touching the typed value. Any other key just continues typing normally.
• The suggestion is never inserted automatically — there is no "auto-accept after N ms" mode.

Accessibility

• Implemented as a real <input> with a visually-hidden mirror layer, not a contentEditable — IME composition, autofill, undo and screen-reader field semantics all behave exactly like a plain text input.
• When a suggestion is available, an aria-live="polite" region announces it and the accept/dismiss keys, since the ghost text itself is aria-hidden.
• Right-arrow acceptance only triggers with the caret at the end of the text, so normal in-text cursor navigation is never intercepted.