AI Inline Completion
betaGhost-text suggestion inside a real textarea, accepted with Tab.
- AI
- 1 file
- No extra npm packages
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add ai-inline-completionNo npm packages are needed beyond what Dowel already requires.
import { InlineCompletion } from "@/components/ui/ai-inline-completion";Default
Live
No Suggestion
Single Line
Wrapping
<InlineCompletion>
| Prop | Type | Default |
|---|---|---|
onValueChange (required) | (value: string) => void | — |
value (required) | string | — |
onAcceptCalled with the full text after the suggestion is taken. | (value: string) => void | — |
onDismissCalled when the reader rejects the suggestion outright. | () => void | — |
singleLineRenders a single-line input instead of a textarea. | boolean | false |
suggestionThe continuation to show after the value. Empty or undefined shows nothing. The caller supplies this; the component never requests it. | string | "" |
Plus every attribute of <textarea> except value, onChange, children.
No WAI-ARIA pattern covers generative ghost text — combobox is the nearest and does not fit, because the suggestion is not one of a known set of options and a listbox would misdescribe it. So the suggestion is announced through a polite live description that names the keys, since a gesture nobody knows about is not an affordance, and the grey text itself is aria-hidden. Escape always dismisses and restores plain Tab, so the keyboard is never trapped in the field. The ghost hides during IME composition and whenever the caret is not at the end, rather than rendering somewhere it does not belong.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes