AI primitive
InlineAISuggestion
Ghost-text completion chip rendered next to the cursor in any input. Tab-to-accept, Esc-to-dismiss, like Copilot.
Usage
Pick your edition with the tabs. Selection syncs across all docs.
tsx
import { InlineAISuggestion } from '@/components/molecules'
<InlineAISuggestion
suggestion="…get started today."
onAccept={() => insertCompletion()}
onDismiss={() => clearSuggestion()}
/>Props
Same surface in both editions; HTML version exposes equivalents through Alpine x-data.
| Prop | Type | Default | Description |
|---|---|---|---|
| suggestion | string | — | Ghost text shown after the cursor. |
| onAccept | () => void | — | Called when the user presses Tab. |
| onDismiss | () => void | — | Called when the user presses Esc. |
| modifier | "tab" | "enter" | "tab" | Which key accepts the suggestion. |
Accessibility
role
Suggestion is wrapped in aria-label='Suggestion'. Hint pill is decorative.
keyboard
Tab accept / Esc dismiss respects host input focus.