Visual form builder primitives
Visual references for a Typeform / Tally-style form designer — a palette of field types, a drop-zone canvas, an inspector with validation and default value editors, logic rule builders and a flow visualiser, embed code, analytics, theming, and a multi-page wizard. No real form persistence — these primitives design forms, they don't ship them.
Visual form builder primitives is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Visual form builder primitives: Visual references for a Typeform / Tally-style form designer — a palette of field types, a drop-zone canvas, an inspector with validation and default value editors, logic rule builders and a flow visualiser, embed code, analytics, theming, and a multi-page wizard. No real form persistence — these primitives design forms, they don't ship them.
Field palette
Left rail palette grouped by category — text, numeric, selection, media, payments — each draggable affordance with type icon, name, hint.
Form canvas
Vertical drop zones with idle, hover, and active visual states. Selected field gets an amber highlight ring.
Field config pane
Right inspector — label, placeholder, required toggle, default value, validation chips, and a collapsible Advanced block.
Field type icon
Single component dispatching 15 inline SVG glyphs — short text through signature, payment, yes / no — sized by prop.
Logic rule builder
Chip-based show / hide rule editor — When [field] [operator] [value], then [action] [target] — visual reference only.
Field preview
Live respondent-side preview of any field — text, dropdown, rating, file upload, signature, payment, yes / no.
Form theme picker
Four mini preview tiles — Minimal / Workshop dark / Editorial light / Brutalist — radiogroup with active ring.
Multi-page wizard
Page tabs with per-page field count, an add-page action, and reorder / preview controls in the footer.
Embed code generator
Mode selector — inline, popup, slider, fullscreen — plus a copy-ready snippet rendered via the CodeBlock primitive.
Submission analytics
Totals, average time-to-complete, completion gauge, plus per-field drop-off bars tone-coded high / mid / low.
Validation editor
Required / regex / length / value range / file size / file type — each rule as an aria-pressed chip toggle.
Required toggle chip
Compact aria-pressed chip with red asterisk indicator and On / Off micro-label. Stateful on click.
Default value editor
Adapts UI by field type — text input, date picker, dropdown, rating, multi-select chips, yes / no, file row.
Conditional logic flow
Source → conditions → target dependency graph with tone-coded SVG edges and a legend chip for each action.
Full form builder scene
Palette left + Canvas centre + Inspector right with Wizard top, Logic visualizer below, and Analytics in the side rail.