@taylordb/forms-ui

Shared React runtime, answer inputs, autosave helpers, themes, locales, and tooling for TaylorDB forms.

This package no longer owns a concrete form shell. Use one of the renderer packages for Form, Question, Title, screens, and layout chrome:

• @taylordb/forms-ui-typeform for the Typeform-style one-step flow.
• @taylordb/forms-ui-googleform for the Google Forms-style paged sheet.

Both renderer packages re-export this package, so application forms can usually import inputs and runtime helpers from the renderer they use.

Features

• Inputs: text, textarea, number, date, phone, URL, dropdown, single choice, multiple choice, ranking, yes/no, rating, scale, legal, file upload, media, address, and contact info.
• Runtime: FormProvider, Zustand store, visibility, validation, navigation actions, answer bindings, composite fields, and hooks.
• Validation: shared sharedSteps from defineForm; defaults and custom validate callbacks run on the client before save/submit. Handlers do not validate on their own.
• Autosave: createAutosaveBootstrap, createAutosaveAdapter, fetch/tRPC clients, mappers, and SSR-friendly session helpers.
• Themes and locales: shared theme tokens, base styles, FormLocale, deFormLocale, ruFormLocale, and locale merge helpers.
• Tooling: Vite build-time form config checks and E2E selector helpers.

Install

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

Install a renderer too:

pnpm add @taylordb/forms-ui-typeform
# or
pnpm add @taylordb/forms-ui-googleform

Peer dependencies: react and react-dom 18+.

Dependencies installed with this package include @radix-ui/react-select for Dropdown, react-phone-number-input for PhoneInput, zustand for form state, and @taylordb/forms-core.

Quick Start With A Renderer

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

export function Demo() {
  return (
    <Form keyboard theme="light" onSubmit={(answers) => console.log(answers)}>
      <Question id="name">
        <Title>Your name?</Title>
        <TextInput autoFocus placeholder="Ada Lovelace" />
      </Question>

      <EndScreen id="done" buttonText="Submit">
        <Title>Thanks!</Title>
      </EndScreen>
    </Form>
  )
}

For a Google Forms-style layout, import the same shared inputs through @taylordb/forms-ui-googleform and group questions in Section.

TaylorDB Apps

When your form persists to TaylorDB tables via @taylordb/query-builder, pair this package with @taylordb/forms-taylordb:

• Define the schema once with defineTaylorForm(taylorSchema)({ sharedSteps, taylordb }).
• On the server, use form.createActions({ ctxToQB, emailConfig }).
• On the client, pick a renderer (@taylordb/forms-ui-typeform or @taylordb/forms-ui-googleform), pass sharedSteps={form.sharedSteps}, and wire autosave through form.mappers(...) (including the shared uploadFile helper for attachment columns).

See @taylordb/forms-taylordb/docs/api.md (Client UI) for the full wiring pattern.

UI Locale

Built-in chrome and input copy can follow a FormLocale object. Pass locale to a renderer <Form> or import a language pack:

import { Form, Question, TextInput, Title } from '@taylordb/forms-ui-typeform'
import { deFormLocale } from '@taylordb/forms-ui/locales/de'

export function LocalizedDemo() {
  return (
    <Form locale={deFormLocale} theme="light" onSubmit={(answers) => console.log(answers)}>
      <Question id="name">
        <Title>Name?</Title>
        <TextInput />
      </Question>
    </Form>
  )
}

Documentation

• example.md: shared-runtime example with renderer imports, shared schema, autosave, mappers, and Vite form checks.
• llm.txt: short index for agents and documentation search.
• docs/overview.md: package split and runtime mental model.
• docs/form-api.md: shared FormProps, locale, and step prop contracts used by renderers.
• docs/inputs.md: built-in answer inputs and value shapes.
• docs/autosave.md: fetch, tRPC, custom adapters, storage, and status.
• docs/ssr.md: static styles, server cookie helpers, SSR session bootstrap.
• docs/migration.md: upgrading from eager to lazy session creation.
• docs/vite-plugin-form-check.md: build-time configuration checks.
• docs/test-ids.md: stable selectors and @taylordb/forms-ui/testing.

Handler And Question Types

@taylordb/forms-core ships a default typeHandlers map with these keys:

text, email, rating, multipleChoice, short_text, long_text, deep_dive, website, number, phone_number, date, multiple_choice, dropdown, picture_choice, ranking, yes_no, checkbox, opinion_scale, nps, legal, file_upload, multi_format, address, contact_info

Several core types share UI widgets. For example, text-like types use TextInput or TextArea, scalar choices use Dropdown or SingleChoice, and picture_choice uses SingleChoice.Choice with an image prop.

License

See the repository root for license terms.