@taylordb/forms-ui-googleform

Google Forms-style renderer for TaylorDB forms.

Use this package when you want a form sheet with paged sections, Next / Back / Submit controls, a Clear form action, and a submitted confirmation screen with Edit response / Submit another response actions. It re-exports the shared inputs, runtime hooks, autosave helpers, locales, and types from @taylordb/forms-ui.

Install

pnpm add @taylordb/forms-ui-googleform @taylordb/forms-ui @taylordb/forms-core

Peer dependencies: react and react-dom 18+.

Quick Start

import { Form, Question, Section, TextInput, Title } from '@taylordb/forms-ui-googleform'

export function SurveyForm() {
  return (
    <Form theme="light" onSubmit={(answers) => console.log(answers)}>
      <Section id="about">
        <Title>About you</Title>
        <Question id="name">
          <Title>What should we call you?</Title>
          <TextInput autoFocus placeholder="Ada Lovelace" />
        </Question>
      </Section>
    </Form>
  )
}

What This Package Owns

• Form: Google Forms shell with gf-* classes, page navigation, clear form, and submitted confirmation actions.
• Section: groups questions on a single page and can render a section header.
• WelcomeScreen, Question, Statement, EndScreen, StepPanel: Google Forms presentation primitives.
• FormImage, FormVideo: display-only inline media blocks.
• styles.css: bundled base + Google Forms CSS (import once in your app).
• googleFormConfigCheckAdapter: Vite form-check adapter for section/page validation.

All answer inputs (TextInput, Dropdown, Ranking, FileUpload, AddressInput, etc.), autosave helpers, locales, and runtime hooks are re-exported from @taylordb/forms-ui.

Documentation

• example.md: complete Google Forms-style form with sections and shared schema.
• llm.txt: short index for agents and documentation search.
• docs/overview.md: mental model, pages, and package split.
• docs/form-api.md: Google Forms-specific form and step behavior.
• docs/vite-form-check.md: build-time config check adapter.

For input props, autosave, SSR, test ids, locales, and custom input authoring, read the shared docs in @taylordb/forms-ui.

TaylorDB Apps

When your form writes to TaylorDB tables, use @taylordb/forms-taylordb alongside this renderer:

import { defineTaylorForm } from '@taylordb/forms-taylordb'
import { Form, Question, Section, TextInput, Title } from '@taylordb/forms-ui-googleform'

export const candidateForm = defineTaylorForm(taylorSchema)({
  sharedSteps: [{ taylordbFieldName: 'name', questionType: 'text' }] as const,
  taylordb: { table: 'candidates', completedColumn: 'submitted' },
})

export function CandidateForm() {
  return (
    <Form sharedSteps={candidateForm.sharedSteps}>
      <Section id="about">
        <Title>About you</Title>
        <Question id="name">
          <Title>Name?</Title>
          <TextInput />
        </Question>
      </Section>
    </Form>
  )
}

Use form.createActions(...) on the server and form.mappers(...) for autosave. See @taylordb/forms-taylordb/docs/api.md#client-ui.