@taylordb/forms-ui-typeform

Typeform-style renderer for TaylorDB forms.

Use this package when you want the classic one-question-at-a-time experience: progress bar, keyboard and wheel navigation, footer controls, welcome screens, statements, questions, and an end screen. It re-exports the shared inputs, runtime hooks, autosave helpers, locales, and types from @taylordb/forms-ui.

Install

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

Peer dependencies: react and react-dom 18+.

Quick Start

import {
  EndScreen,
  Form,
  Question,
  TextInput,
  Title,
  WelcomeScreen,
} from '@taylordb/forms-ui-typeform'

export function ContactForm() {
  return (
    <Form keyboard theme="light" onSubmit={(answers) => console.log(answers)}>
      <WelcomeScreen id="welcome" buttonText="Start">
        <Title>Tell us about yourself.</Title>
      </WelcomeScreen>

      <Question id="name">
        <Title>What should we call you?</Title>
        <TextInput autoFocus placeholder="Ada Lovelace" />
      </Question>

      <EndScreen id="done" buttonText="Submit">
        <Title>Ready to submit?</Title>
      </EndScreen>
    </Form>
  )
}

What This Package Owns

• Form: Typeform shell with tf-* classes, progress, keyboard navigation, footer controls, and theme variables.
• WelcomeScreen, Question, Statement, EndScreen, StepPanel: step primitives for the one-step flow.
• Title, Description, Progress, Controls, FooterNavigation, StartButton: Typeform chrome and content helpers.
• styles.css: bundled base + Typeform CSS (import once in your app).

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 Typeform-style form with shared schema and autosave.
• llm.txt: short index for agents and documentation search.
• docs/overview.md: mental model and package split.
• docs/form-api.md: Typeform-specific form and step behavior.

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, TextInput, Title } from '@taylordb/forms-ui-typeform'

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}>
      <Question id="name">
        <Title>Name?</Title>
        <TextInput />
      </Question>
    </Form>
  )
}

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