webiny-form-model

Build declarative forms with field builders, layouts, validation, and dynamic zones in Webiny.

8.0k|673|Updated Jan 9, 2018
One-click install
npx skills add https://github.com/webiny/webiny-js --skill webiny-form-model
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: webiny-form-model
Source: https://github.com/webiny/webiny-js/tree/main/skills/user-skills/admin/form-model
Command: npx skills add https://github.com/webiny/webiny-js --skill webiny-form-model

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires zod.

What problem does it solve?

Defining complex admin forms in Webiny — with nested objects, conditional visibility, computed values, and validation — requires knowing the FormModel builder API, its renderer registry, and its callback conventions. This Skill provides the complete reference so developers can construct forms correctly without guessing method names or renderer settings.

Core Features & Use Cases

  • Field Builders: Create text, number, boolean, datetime, file, lexical, password, permissions, and object fields with chainable methods like .label(), .required(), .options(), and .list().
  • Layout & Renderers: Arrange fields with rows, separators, and tabs; override default renderers (select, tags, codeEditor, dynamicZone, keyValueTags) with settings.
  • Validation & Reactivity: Add Zod schemas, conditional required rules, cross-field form rules, computed fields, hiddenWhen/disabledWhen callbacks, and reactive field context.
  • Use Case: Build a page settings form where a slug field auto-computes from the title until edited, a sections field acts as a dynamic zone with hero and CTA templates, and premium tabs hide unless the plan is enterprise.

Quick Start

Ask the AI to define a Webiny FormModel with a required title text field, an auto-computed slug, and a dynamic zone of content section templates.

Frequently Asked Questions about webiny-form-model

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create form fields in Webiny with the FormModel API?

Use the fields registry callback with builder methods like fields.text(), fields.number(), or fields.datetime(), then chain methods such as .label(), .required(), .options(), and .renderer() to configure each field.

How do I add validation to a Webiny form field?

Attach a Zod schema with .schema(z.string().email(...)) for field-level validation, use .requiredWhen() for conditional requirements, or call form.addRule() for cross-field and imperative validation.

How do I conditionally hide or disable a form field in Webiny?

Use .hiddenWhen() or .disabledWhen() callbacks receiving { field, form }, or declarative .rules() with condition objects specifying a target field, operator like eq or isFalsy, and a hide or disable action.

What is a dynamic zone in Webiny FormModel?

A dynamic zone is an object field with multiple templates defined via .template(), letting users pick a template per item. Calling .template() automatically switches the renderer to dynamicZone, and templates can be added or removed at runtime.

How do computed fields work in Webiny forms?

Use .computed(fn) for values always recalculated from other fields, or .computedUntilDirty(fn) to compute until the user manually edits the field, such as auto-generating a slug from a title.

Which renderer does a Webiny form field use by default?

Each field type has a default: textInput for text, switch for boolean, dateTimeInput for datetime, and so on. Renderers switch automatically when calling .options(), .list(), or .template(), and can be overridden with .renderer().