caliper uidocs
DemoSign inGet Pro

Form builder

Pro

Builds a working form: add fields from the palette, reorder by drag or Alt and arrows, set validation and show-when rules, then preview the real form and copy its schema.

Installs components/ui/form-builder.tsxDepends on @radix-ui/react-popover, @radix-ui/react-slot, lucide-reactMotion shared motion tokens
pnpm dlx shadcn@latest add @caliper/form-builder

Onboarding intake

9 questions · 2 with rules

Add a field

  1. About you
  2. Full name
  3. Work email
  4. Team size
  5. We are moving from another tool
  6. Which tool?Rule
  7. Seats neededRule
  8. When do you want to go live?
  9. Anything else
  10. What should we know?
  11. How likely are you to recommend us?

Alt and Up or Down moves the field. Delete removes it.

Section heading

Show this field

Always. Rules can use answers from fields above this one.

When to use #

Use it for

  • Surveys, intake and application forms your customers design.
  • Internal tools where operations staff change questions.

Skip it when

  • A form you write once in code; use fields directly.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/form-builder

Adds its 15 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source. It is built from FormBuilder, FormPreview and fieldVisible.

example.tsx
import { FormBuilder, FormPreview, fieldVisible } from "@/components/ui/form-builder"

The worked example comes with Pro

The 22-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

FormBuilder

component
PropTypeDefault
value *readonly FormFieldSchema[]—
onChange *(schema: FormFieldSchema[]) => void—
titlestring"Untitled form"
classNamestring—

FormPreview

component
PropTypeDefault
schema *readonly FormFieldSchema[]—
titlestring—
onSubmit((answers: Record<string, unknown>) => void)—

fieldVisible

component
PropTypeDefaultDescription
id *string—
type *FormFieldType—
label *string—
helpstring—
placeholderstring—
requiredboolean—
optionsreadonly string[]—For select.
minnumber—
maxnumber—
showWhenFormRule—Show this field only when another answer matches.

Accessibility #

It exposes button, status and alert semantics, with aria-label, aria-hidden, aria-pressed, aria-describedby and aria-invalid kept in step with state. Changes that matter are announced through a live region.

KeyBehaviour
↑Moves to the previous item or value.
↓Moves to the next item or value.
DeleteRemoves the next character or the selected item.
BackspaceRemoves the previous character or item.
EnterActivates the focused control.
SpaceActivates the focused control.

Motion #

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.