Import
import { Form } from "@typed/ui";Access Form.make through the imported Form export. Its declaration below describes the member.
This public exposure is a re-export. Its import path is supported; declaration documentation is shared with the other public exposures below.
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.