} {...shared} /> ) : ( } {...shared} /> ); } /* ── Form state shared with the blanks and the tray ─────── */ type Ids = { options: string; label: string; hint: string; error: string }; type Api = { locale: string; status: Status; editable: boolean; reduced: boolean; active: string | null; keys: boolean; errors: Record; ids: (name: string) => Ids; valueOf: (name: string) => string | string[]; typing: (field: Field) => boolean; upNext: (name: string) => string | undefined; describedBy: (field: Field) => string | undefined; choice: (field: Field) => React.HTMLAttributes; text: (field: Field) => React.InputHTMLAttributes; pick: (field: Field, value: string) => void; other: (field: Field) => void; optionsKeyDown: (field: Field, event: React.KeyboardEvent) => void; }; const FormContext = React.createContext(null); function useForm() { const form = React.useContext(FormContext); if (!form) throw new Error("This part must be rendered inside ."); return form; } const hintFor = (field: Field) => field.hint ?? (field.options ? field.multiple ? "Pick any" : field.custom ? "Pick one, or write your own" : "Pick one" : null); const otherLabel = (field: Field) => (typeof field.custom === "string" ? field.custom : "Other"); /* ── SentenceForm ───────────────────────────────────────── */ type Focus = { blank: string; shake?: boolean } | { options: string } | { success: true }; export interface SentenceFormProps extends Omit, "onSubmit" | "children"> { /** * The sentence, with `SentenceFormField`s as its blanks. Or a function of * the current values, for clauses that depend on an answer. */ children: React.ReactNode | ((values: SentenceFormValues) => React.ReactNode); /** * Called on send with the values of the blanks in the sentence and the * form's FormData. Return a promise to hold the form in a pending state; * if it rejects, `errorMessage` shows and nothing is lost. */ onSubmit?: (values: SentenceFormValues, formData: FormData) => void | PromiseLike; /** The confirmation that rises where the button was, or a function of what was sent. */ success?: | React.ReactNode | ((sent: { values: SentenceFormValues; edit: () => void; reset: () => void }) => React.ReactNode); /** Shown, and announced, when `onSubmit` throws or its promise rejects. */ errorMessage?: React.ReactNode; /** The send button's label. */ submitLabel?: React.ReactNode; /** The values, to control the form from outside. Pair with `onValuesChange`. */ values?: SentenceFormValues; /** The values it starts with. A field's own `defaultValue` fills in the rest. */ defaultValues?: SentenceFormValues; /** Called with every value whenever one changes. */ onValuesChange?: (values: SentenceFormValues) => void; /** Locale for joining picks ("a, b, and c"). Set explicitly so the server and browser agree. */ locale?: string; /** Classes for the tray under the sentence. */ trayClassName?: string; /** Classes for the send button. It has `data-ready="true"` once the required blanks are filled. */ submitClassName?: string; } /** * A form written as a sentence. Each blank is a real field set inline at the * sentence's own size; picked options fly up into their blanks while the * words after them glide aside, and on send the form settles into the * sentence that was written. */ export function SentenceForm({ children, onSubmit, success, errorMessage = "That didn't go through. Everything you wrote is still here, so try again.", submitLabel = "Send", values, defaultValues, onValuesChange, locale = "en-US", className, trayClassName, submitClassName, onBlur, ...props }: SentenceFormProps) { const uid = React.useId(); const reduced = useReducedMotion() ?? false; const [engine] = React.useState(createEngine); const [own, setOwn] = React.useState(() => defaultValues ?? {}); const [active, setActive] = React.useState(null); const [custom, setCustom] = React.useState>({}); const [errors, setErrors] = React.useState>({}); const [status, setStatus] = React.useState("editing"); const [sent, setSent] = React.useState({}); const [keys, setKeys] = React.useState(false); const [news, setNews] = React.useState<{ id: number; text: React.ReactNode }>({ id: 0, text: null }); const [restarts, setRestarts] = React.useState(0); const formRef = React.useRef(null); const sentenceRef = React.useRef(null); const layerRef = React.useRef(null); const submitRef = React.useRef(null); const successRef = React.useRef(null); const focusNext = React.useRef(null); const beat = React.useRef(0); const ticket = React.useRef(0); const modality = React.useRef<"keys" | "pointer">("pointer"); /* The sentence, read with the current values. */ const raw = values ?? own; const read = (source: SentenceFormValues) => typeof children === "function" ? children(source) : children; let parsed = parse(read(raw)); let current = raw; for (const field of parsed.fields) { if (field.defaultValue !== undefined && current[field.name] === undefined) { current = { ...current, [field.name]: field.defaultValue }; } } if (current !== raw && typeof children === "function") parsed = parse(read(current)); const { flow, fields } = parsed; const byName = new Map(fields.map((field) => [field.name, field])); const valueOf = (name: string): string | string[] => { const value = current[name]; if (byName.get(name)?.multiple) return Array.isArray(value) ? value : value ? [value] : []; return Array.isArray(value) ? (value[0] ?? "") : (value ?? ""); }; /** Whether a blank with options is showing its "Other" text input. */ const typing = (field: Field) => { if (!field.options) return true; if (!field.custom || field.multiple) return false; const value = valueOf(field.name) as string; return !!custom[field.name] || (!!value && !field.options.some((option) => option.value === value)); }; const editable = status === "editing" || status === "failed"; const ready = fields.every((field) => !field.required || !isEmpty(valueOf(field.name))); const latest = React.useRef({ fields, valueOf, active }); React.useLayoutEffect(() => { latest.current = { fields, valueOf, active }; }); const ids = (name: string): Ids => { const base = `${uid}-${name.replace(/[^\w-]/g, "_")}`; return { options: `${base}-options`, label: `${base}-label`, hint: `${base}-hint`, error: `${base}-error` }; }; const blankOf = (name: string) => formRef.current?.querySelector(`[data-blank="${CSS.escape(name)}"]`) ?? null; const trayOf = () => formRef.current?.querySelector("[data-tray]") ?? null; const say = (text: React.ReactNode) => setNews((n) => ({ id: n.id + 1, text })); /* Moving between blanks. */ const open = (name: string | null) => { if (name === active) return; engine.snapshot("flow"); setActive(name); if (name) setKeys(modality.current === "keys"); }; const focusOptions = (name: string) => { const list = document.getElementById(ids(name).options); const target = list?.querySelector('[aria-selected="true"]') ?? list?.querySelector('[role="option"]'); target?.focus(); }; const intoOptions = (name: string) => { setKeys(true); if (active === name) focusOptions(name); else { open(name); focusNext.current = { options: name }; } }; const upNext = (from: string) => nextEmpty(from, fields, valueOf); const advance = (from: string, sendIfDone: boolean) => { const next = nextEmpty(from, latest.current.fields, latest.current.valueOf); if (next) blankOf(next)?.focus(); else if (sendIfDone) formRef.current?.requestSubmit(submitRef.current); else submitRef.current?.focus(); }; /** Tab out of a tray: the blank after its own, or the send button. */ const after = (name: string) => { const i = fields.findIndex((field) => field.name === name); const next = fields[i + 1]; if (next) blankOf(next.name)?.focus(); else submitRef.current?.focus(); }; /* Changing values. */ const write = (name: string, next: string | string[], mode: Mode = "flow") => { engine.snapshot(mode, name); const all = { ...current, [name]: next }; if (values === undefined) setOwn(all); onValuesChange?.(all); const error = errors[name]; const field = byName.get(name); if (error && field) { const fixed = error.kind === "required" ? !isEmpty(next) : isEmpty(next) || !check(field, next, typing(field)); if (fixed) setErrors((all) => Object.fromEntries(Object.entries(all).filter(([key]) => key !== name))); } if (status === "failed") setStatus("editing"); }; const pick = (field: Field, value: string) => { if (!editable) return; window.clearTimeout(beat.current); const now = valueOf(field.name); if (field.multiple) { const picks = now as string[]; write(field.name, picks.includes(value) ? picks.filter((v) => v !== value) : [...picks, value]); return; } const wasTyping = typing(field); if (wasTyping) { // The text input goes away, so focus moves to the blank it turns back into. setCustom((all) => ({ ...all, [field.name]: false })); focusNext.current = { blank: field.name }; } if (now === value && !wasTyping) { write(field.name, ""); // the outline was tapped: send the pick back down return; } write(field.name, value); beat.current = window.setTimeout(() => { if (latest.current.active === field.name) advance(field.name, false); }, SENTENCE.beat); }; const other = (field: Field) => { if (!editable) return; window.clearTimeout(beat.current); if (typing(field)) { blankOf(field.name)?.focus(); return; } engine.snapshot("flow"); setCustom((all) => ({ ...all, [field.name]: true })); if (valueOf(field.name)) write(field.name, ""); // the old pick drops back into the tray focusNext.current = { blank: field.name }; }; const closeCustom = (field: Field, refocus: boolean) => { engine.snapshot("flow"); setCustom((all) => ({ ...all, [field.name]: false })); if (refocus) focusNext.current = { blank: field.name }; }; /* Event handlers for the blanks and the tray. */ const choice = (field: Field): React.HTMLAttributes => ({ onFocus: () => { if (editable) open(field.name); }, // Focus is moved by hand on click, so a click never blurs the blank you're // leaving before the new one opens (Safari doesn't focus buttons on click). onMouseDown: (event) => { if (event.button === 0) event.preventDefault(); }, onClick: (event) => { if (!editable || event.detail === 0) return; // Focusing opens it; clicking it again keeps it open (Esc or a click elsewhere closes). if (document.activeElement !== event.currentTarget) event.currentTarget.focus(); else open(field.name); }, onKeyDown: (event) => { if (!editable) return; if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") { event.preventDefault(); intoOptions(field.name); } else if (event.key === "Escape" && active === field.name) { event.preventDefault(); open(null); } }, }); const text = (field: Field): React.InputHTMLAttributes => { const isCustom = !!field.options; return { onFocus: () => { if (editable) open(field.name); }, onChange: (event) => write(field.name, event.target.value, "type"), onKeyDown: (event) => { if (!editable) return; if (event.key === "Enter" && !event.nativeEvent.isComposing) { event.preventDefault(); advance(field.name, true); } else if (event.key === "ArrowDown" && isCustom) { event.preventDefault(); intoOptions(field.name); } else if (event.key === "Escape") { if (isCustom && isEmpty(valueOf(field.name))) { event.preventDefault(); closeCustom(field, true); } else if (active === field.name) { event.preventDefault(); open(null); } } }, onBlur: (event) => { if (!isCustom || !isEmpty(valueOf(field.name)) || !event.target.isConnected) return; if (event.relatedTarget && trayOf()?.contains(event.relatedTarget as Node)) return; closeCustom(field, false); }, }; }; const optionsKeyDown = (field: Field, event: React.KeyboardEvent) => { const items = [...event.currentTarget.querySelectorAll('[role="option"]')]; const i = items.indexOf(document.activeElement as HTMLElement); const go = (j: number) => { event.preventDefault(); items[Math.max(0, Math.min(items.length - 1, j))]?.focus(); }; const toBlank = () => { event.preventDefault(); blankOf(field.name)?.focus(); }; switch (event.key) { case "ArrowRight": case "ArrowDown": return go(i + 1); case "ArrowLeft": case "ArrowUp": return i <= 0 ? toBlank() : go(i - 1); case "Home": return go(0); case "End": return go(items.length - 1); case "Escape": return toBlank(); case "Tab": if (event.shiftKey) return toBlank(); event.preventDefault(); return after(field.name); case " ": case "Enter": { event.preventDefault(); const option = items[i]; if (!option) return; const value = option.dataset.option; if (field.multiple && event.key === "Enter") { // Enter finishes a pick-any blank, picking the focused option if nothing is picked yet. if (value !== undefined && isEmpty(valueOf(field.name))) { pick(field, value); beat.current = window.setTimeout(() => advance(field.name, false), SENTENCE.beat); } else advance(field.name, false); return; } if (value === undefined) other(field); else pick(field, value); } } }; const describedBy = (field: Field) => { if (active !== field.name) return undefined; const { hint, error } = ids(field.name); return [hintFor(field) ? hint : null, errors[field.name] ? error : null].filter(Boolean).join(" ") || undefined; }; /* Sending. */ const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); if (!editable) return; window.clearTimeout(beat.current); const problems = fields.flatMap((field) => { const problem = check(field, valueOf(field.name), typing(field)); return problem ? [{ field, problem }] : []; }); if (problems.length) { engine.snapshot("flow"); setErrors(Object.fromEntries(problems.map(({ field, problem }) => [field.name, problem]))); if (status === "failed") setStatus("editing"); const [{ field, problem }] = problems; focusNext.current = { blank: field.name, shake: true }; say(`${field.label}: ${problem.message}`); return; } // Read the form before anything is locked: disabled fields drop out of FormData. const data = new FormData(event.currentTarget); const submitted = Object.fromEntries(fields.map((field) => [field.name, valueOf(field.name)])); const mine = ++ticket.current; const done = () => { if (mine !== ticket.current) return; engine.snapshot("flow"); setSent(submitted); setErrors({}); say(null); // the confirmation takes focus and speaks for itself setActive(null); setStatus("sent"); focusNext.current = { success: true }; }; const fail = () => { if (mine !== ticket.current) return; setStatus("failed"); say(errorMessage); }; let result: void | PromiseLike; try { result = onSubmit?.(submitted, data); } catch { fail(); return; } if (result && typeof result.then === "function") { submitRef.current?.focus(); // the blanks lock while it sends engine.snapshot("flow"); setActive(null); setStatus("pending"); result.then(done, fail); } else done(); }; // Both reopen the sentence and focus its first blank (see the effect below). const edit = () => { engine.snapshot("flow"); setStatus("editing"); setRestarts((n) => n + 1); }; const reset = () => { engine.snapshot("flow"); const start = defaultValues ?? {}; if (values === undefined) setOwn(start); onValuesChange?.(start); setCustom({}); setErrors({}); setStatus("editing"); setRestarts((n) => n + 1); }; const handleBlur = (event: React.FocusEvent) => { onBlur?.(event); if (!event.target.isConnected) return; // its blank was swapped for another, which takes focus const to = event.relatedTarget; if (to && (sentenceRef.current?.contains(to) || trayOf()?.contains(to))) return; if (active) open(null); }; /* Effects. */ React.useLayoutEffect( () => engine.connect(formRef.current!, sentenceRef.current!, layerRef.current!), [engine], ); React.useLayoutEffect(() => engine.setReduced(reduced), [engine, reduced]); React.useLayoutEffect(() => { engine.commit(editable ? active : null); const next = focusNext.current; if (!next) return; focusNext.current = null; if ("success" in next) successRef.current?.focus(); else if ("options" in next) focusOptions(next.options); else { blankOf(next.blank)?.focus(); if (next.shake) requestAnimationFrame(() => engine.shake(next.blank)); } }); React.useLayoutEffect(() => { if (restarts) formRef.current?.querySelector("[data-blank]")?.focus(); }, [restarts]); React.useEffect(() => { const onKey = (event: KeyboardEvent) => { if (/^(Tab|Enter| |Arrow)/.test(event.key)) modality.current = "keys"; }; const onPointer = () => { modality.current = "pointer"; }; window.addEventListener("keydown", onKey, true); window.addEventListener("pointerdown", onPointer, true); return () => { window.removeEventListener("keydown", onKey, true); window.removeEventListener("pointerdown", onPointer, true); window.clearTimeout(beat.current); }; }, []); // On a phone, keep the active blank and its tray above the keyboard. React.useEffect(() => { const form = formRef.current; if (!active || !form) return; const view = window.visualViewport; const keep = () => { const blank = form.querySelector(`[data-blank="${CSS.escape(active)}"]`); const tray = form.querySelector("[data-tray]"); if (!blank || !tray) return; const top = view ? view.offsetTop : 0; const bottom = top + (view ? view.height : window.innerHeight); const over = tray.getBoundingClientRect().bottom + 16 - bottom; const room = blank.getBoundingClientRect().top - top - 16; if (over > 0 && room > 0) window.scrollBy({ top: Math.min(over, room) }); }; const frame = requestAnimationFrame(keep); view?.addEventListener("resize", keep); return () => { cancelAnimationFrame(frame); view?.removeEventListener("resize", keep); }; }, [active]); /* Rendering. */ const settled = status === "sent"; const spoken = (field: Field) => { const value = valueOf(field.name); if (isEmpty(value)) return ""; if (Array.isArray(value)) return listFormat(locale).format(value.map((v) => labelOf(field, v))); return typing(field) ? value : labelOf(field, value); }; const { before, after: lastWords } = speech(flow, settled ? spoken : () => null); const api: Api = { locale, status, editable, reduced, active, keys, errors, ids, valueOf, typing, upNext, describedBy, choice, text, pick, other, optionsKeyDown, }; const activeField = editable && active ? byName.get(active) : undefined; const pending = status === "pending"; const confirmation = typeof success === "function" ? success({ values: sent, edit, reset }) : (success ?? "Sent. Thank you!"); return (

{[0, 1, 2].map((i) => ( ))} {group(flow).map((unit, i) => ( {i > 0 ? " " : null} {unit.atoms.map((atom) => before.get(atom.id) ? ( {before.get(atom.id)} ) : null, )} ))} {lastWords ? {lastWords} : null}

{activeField ? : null} {settled ? ( {confirmation} ) : ( {status === "failed" ? ( {errorMessage} ) : null} )} {news.text}

); } /* ── The sentence's pieces ──────────────────────────────── */ /** Words and elements, each its own piece. */ function Glue({ atoms }: { atoms: Atom[] }) { return atoms.map((atom) => atom.kind === "field" ? null : ( {atom.kind === "text" ? atom.text : atom.node} ), ); } /** A run with no spaces in it: words glued together, or a blank with the punctuation that touches it. */ function Unit({ atoms }: { atoms: Atom[] }) { const blanks: BlankProps[] = []; const lead: Atom[] = []; for (const atom of atoms) { if (atom.kind === "field") blanks.push({ field: atom.field, prefix: blanks.length ? [] : lead, suffix: [] }); else if (blanks.length) blanks[blanks.length - 1].suffix.push(atom); else lead.push(atom); } if (!blanks.length) { return atoms.length > 1 ? ( ) : ( ); } return blanks.map((blank) => ); } type BlankProps = { field: Field; prefix: Atom[]; suffix: Atom[] }; function Blank(props: BlankProps) { const form = useForm(); const { field } = props; if (form.status === "sent") return ; if (form.typing(field)) return ; return field.multiple ? : ; } function Underline({ filled, active, invalid }: { filled: boolean; active: boolean; invalid: boolean }) { return ( ); } /** One answer, or the placeholder, sitting on its underline. */ function Answer({ id, field, partner, origin, muted, children, }: { id: string; field: Field; partner?: string; origin?: string; muted?: boolean; children: React.ReactNode; }) { const form = useForm(); return ( {children} ); } const INPUT = "col-start-1 row-start-1 m-0 w-full min-w-0 appearance-none border-0 bg-transparent p-0 text-inherit outline-none placeholder:text-current/45 read-only:cursor-default " + // Keep the browser's autofill tint (and its forced text color) from boxing in the blank. "[&:-webkit-autofill]:[transition:background-color_0s_600000s,color_0s_600000s] [&:autofill]:[transition:background-color_0s_600000s,color_0s_600000s]"; function TextBlank({ field, prefix, suffix }: BlankProps) { const form = useForm(); const { name } = field; const value = form.valueOf(name) as string; const custom = !!field.options; const id = custom ? `f:${name}:custom` : `f:${name}:input`; const error = form.errors[name]; return ( 0 && "max-w-[calc(100%-0.6em)]", field.className, )} > {/* Hidden copies set the width and the input fills it. While the blank is active it keeps at least its placeholder's room, so the first letters typed don't pull the rest of the sentence back. */} {value || field.placeholder || "\u00a0".repeat(6)} {value && form.active === name && field.placeholder ? ( {field.placeholder} ) : null} ); } function OneBlank({ field, prefix, suffix }: BlankProps) { const form = useForm(); const { name } = field; const value = form.valueOf(name) as string; const open = form.active === name; const label = value ? labelOf(field, value) : null; const id = value ? `f:${name}:v:${value}` : `f:${name}:ph`; return ( ); } /** A pick-any blank: its picks as separate words joined with list grammar, so the list can wrap. */ function ManyBlank({ field, prefix, suffix }: BlankProps) { const form = useForm(); const { name } = field; const picks = form.valueOf(name) as string[]; const open = form.active === name; const bits: (ListBit | null)[] = picks.length ? listBits(field, picks, form.locale) : [{ kind: "word", id: `f:${name}:ph`, text: field.placeholder ?? "\u00a0".repeat(6) }]; const units = group(bits); const label = picks.length ? `${field.label}, ${listFormat(form.locale).format(picks.map((value) => labelOf(field, value)))}` : field.label; return ( ); } /** After sending: the answer as plain words that wrap like the rest of the sentence. */ function SettledBlank({ field, prefix, suffix }: BlankProps) { const form = useForm(); const { name } = field; const value = form.valueOf(name); const typing = form.typing(field); const bits: ({ id: string; text: string; origin?: string; muted?: boolean } | null)[] = []; const words = (text: string, from: string) => { let k = 0; text.split(/(\s+)/).forEach((bit) => { if (!bit) return; if (/^\s/.test(bit)) bits.push(null); else bits.push({ id: `${from}~${k++}`, text: bit, origin: from }); }); }; if (isEmpty(value)) { const from = !field.options ? `f:${name}:input` : typing ? `f:${name}:custom` : `f:${name}:ph`; bits.push({ id: `f:${name}:dash`, text: "—", origin: from, muted: true }); } else if (Array.isArray(value)) { for (const bit of listBits(field, value, form.locale)) { if (bit === null) bits.push(null); else if (bit.kind === "pick") words(bit.label, bit.id); else bits.push({ id: bit.id, text: bit.text }); } } else if (typing) words(value, field.options ? `f:${name}:custom` : `f:${name}:input`); else words(labelOf(field, value), `f:${name}:v:${value}`); const units = group(bits); return ( {units.map((unit, i) => ( {i > 0 ? " " : null} {i === 0 ? : null} {unit.atoms.map((bit) => ( {bit.text} ))} {i === units.length - 1 ? : null} ))} {(Array.isArray(value) ? value : [value]).map((v, i) => ( ))} ); } /* ── The tray ───────────────────────────────────────────── */ const CHIP = "relative inline-flex h-10 cursor-pointer items-center rounded-full border px-4 text-[15px] leading-none whitespace-nowrap outline-none select-none " + "transition-[background-color,border-color] duration-200 ease-out before:absolute before:-inset-1 before:content-[''] " + "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"; // AnimatePresence pops a leaving tray out of the flow through this ref, so the // tray's height changes as soon as the next blank opens. function Tray({ field, ref }: { field: Field; ref?: React.Ref }) { const form = useForm(); const { name } = field; const ids = form.ids(name); const value = form.valueOf(name); const error = form.errors[name]; const hint = hintFor(field); const typing = form.typing(field); const keyHint = !form.keys ? null : !field.options || typing ? form.upNext(name) ? "Enter for the next blank" : "Enter to send" : field.multiple ? "Space picks · Enter when done" : "Arrows move · Enter picks"; const options = field.options ?? []; return (

{field.label} {hint ? ( {hint} ) : null} {keyHint ? {keyHint} : null}

{error ? (

{error.message}

) : null} {field.options ? ( ) : null} ); } function Chip({ field, value, label, picked, index, }: { field: Field; /** Unset for the "Other" chip. */ value?: string; label: string; picked: boolean; index: number; }) { const form = useForm(); const delay = index * SENTENCE.options; return ( ); } /* ── SentenceFormField ──────────────────────────────────── */ export interface SentenceFormFieldProps { /** The field's name in the values and in the submitted FormData. */ name: string; /** Names the field for screen readers, and heads the tray while the blank is active. */ label: string; /** Muted hint shown in the empty blank, like "your name". It sets the blank's width until something's typed. */ placeholder?: string; /** A line in the tray beside the label. Options default to "Pick one" or "Pick any". */ hint?: React.ReactNode; /** Makes the blank a choice. Strings, or `{ value, label }` when the submitted value differs. */ options?: readonly SentenceFormOption[]; /** Lets several options be picked. The value becomes a string[] in the order they were picked. */ multiple?: boolean; /** Adds an "Other" chip that turns the blank into a text input. Pass a string to rename the chip. */ custom?: boolean | string; /** Input type for a text blank. "email" and "url" are checked on send. */ type?: "text" | "email" | "tel" | "url"; /** Must be filled (or, with `multiple`, have a pick) before the form sends. */ required?: boolean; /** The value it starts with, until it's changed. */ defaultValue?: string | string[]; /** Autofill hint for a text blank, like "name", "email" or "organization". */ autoComplete?: string; /** Classes for the blank's words: the input, the picks and the answer once sent. */ className?: string; } /** * One blank in a `SentenceForm`. Write it inline in the sentence; it's * read by the form, which renders it as a text input or a choice. */ export function SentenceFormField(props: SentenceFormFieldProps): React.ReactNode { throw new Error( ` must be written inside 's sentence (directly, or inside fragments and conditionals).`, ); } ```