GenerativeFormFill
v1.0.0Form field with AI-assist affordances: ghost-text suggestion, accept/reject controls, Tab-to-accept keyboard shortcut, provenance badge (model name + confidence), and generating state. WCAG AA compliant with full ARIA labeling.
import { GenerativeFormFill } from "@danagraph/design-system"Loading demo…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Current confirmed value. |
suggestion | string | — | AI-generated suggestion text (shown as ghost text). |
model | string | — | Which model generated the suggestion. |
generating | boolean | false | Loading state: AI is generating a suggestion. |
confidence | number | — | Confidence score 0–1 shown in the provenance badge. |
label | string | — | Field label. |
placeholder | string | — | Placeholder text when empty and no suggestion. |
type | "text" | "email" | "number" | "search" | "url" | "text" | HTML input type. |
onAccept | (value: string) => void | — | Called when user accepts the suggestion. |
onReject | () => void | — | Called when user rejects the suggestion. |
onChange | (value: string) => void | — | Called when user edits the field. |
disabled | boolean | false | Disable the field. |
required | boolean | false | Mark field as required. |
error | string | — | Error message displayed below the field. |
valueType
stringDefault —Current confirmed value.
suggestionType
stringDefault —AI-generated suggestion text (shown as ghost text).
modelType
stringDefault —Which model generated the suggestion.
generatingType
booleanDefault falseLoading state: AI is generating a suggestion.
confidenceType
numberDefault —Confidence score 0–1 shown in the provenance badge.
labelType
stringDefault —Field label.
placeholderType
stringDefault —Placeholder text when empty and no suggestion.
typeType
"text" | "email" | "number" | "search" | "url"Default "text"HTML input type.
onAcceptType
(value: string) => voidDefault —Called when user accepts the suggestion.
onRejectType
() => voidDefault —Called when user rejects the suggestion.
onChangeType
(value: string) => voidDefault —Called when user edits the field.
disabledType
booleanDefault falseDisable the field.
requiredType
booleanDefault falseMark field as required.
errorType
stringDefault —Error message displayed below the field.
Design Rationale
This component was designed to express:
Explore Related
Was this helpful?