Forms docs

Install and status

Install the published schema form package with pnpm add @texuli/forms. The package is in development (pre-1.0). The visual builder (@texuli/forms/builder) is in development: it was released in 0.18.0.

Import the base theme stylesheet once in your application. SchemaForm renders the validated schema using Texuli controls.

<script lang="ts">
import { SchemaForm, validateFormSchema } from '@texuli/forms';

const result = validateFormSchema({
  title: 'Workshop request',
  fields: [{ name: 'email', type: 'email', label: 'Email address', required: true }],
});
</script>

{#if result.ok}<SchemaForm form={result.form} />{/if}

Schemas, conditions and steps

Schemas use closed field types, named formats, validation rules and expression data. Conditions use when.show, when.require and when.enable; expressions are evaluated by the bounded language from @texuli/core/expression. Multi-step schemas group fields into steps, and hidden or disabled fields are excluded from validation and submission.

Validate the schema before rendering. The validator returns either a compiled form or issues that identify invalid members and relationships.

Drafts and host storage

Draft storage belongs to the application. Pass a storage adapter to keep draft behavior under host control. The demo uses fictional example.com data and keeps its draft in the page session; it sends nothing to a server.

Restored values are checked against the current schema. Credential fields are excluded from drafts by default.

Visual builder

The in-development @texuli/forms/builder subpath exports FormBuilder. It provides a field palette, a keyboard and pointer sortable canvas, a field inspector, a live schema form preview and a schema JSON view. It was released in 0.18.0.

The builder edits a flat, single-page field list. It does not preserve a multi-step or section layout when editing; use it to author a flat schema and add advanced layout data in your application code.