make

Import

import { make } from "@typed/ui/Form";

Signatures

export declare function make<const Fields extends FormFields>(codec: Schema.Struct<Fields>): SchemaBoundForm<Fields>;

Examples

import { Schema } from "effect";
import { html } from "@typed/template";
import { RefSubject } from "@typed/fx";
import { component } from "@typed/ui/Component";
import * as Form from "@typed/ui/Form";

const Order = Form.make(Schema.Struct({
  copies: Schema.FiniteFromString.pipe(Schema.check(Schema.isGreaterThan(0))),
  includeNotes: Schema.Boolean,
}));

export const PrintOrder = component(function* () {
  const form = yield* Order.state({ copies: 1, includeNotes: false }, { id: "print-order" });
  const submitting = RefSubject.map(form, (state) => state.submitting);
  const preview = yield* RefSubject.make("No print request preview yet.");
  return html`<section>${Order.Root({
    form,
    content: [
      Order.Label({ for: "order-copies", content: "Copies" }),
      Order.NumberInput({ name: "copies", props: { id: "order-copies", min: 1, required: true } }),
      Order.Error({ name: "copies" }),
      Order.Checkbox({ name: "includeNotes", props: { id: "order-notes" } }),
      Order.Label({ for: "order-notes", content: "Include speaker notes" }),
      Order.Submit({ content: "Preview print request", props: { "?disabled": submitting } }),
      Order.Reset({ content: "Restore defaults" }),
    ],
    onValidSubmit: (values) => RefSubject.set(
      preview,
      `${values.copies} copies; notes ${values.includeNotes ? "included" : "excluded"}.`,
    ),
  })}<p role="status">${preview}</p></section>`;
});

Other public imports

These import paths expose the same declaration. Each page retains its own public name and signature.

• Form.make from @typed/ui
• Form.make from @typed/ui/index

Source

• packages/ui/src/Form.ts:2950