Form

import { Form } from "@gpuixui/components/form";
import { Field, FieldInput } from "@gpuixui/components/field";
import { Button } from "@gpuixui/primitives";
import { Schema } from "effect";
import { useState } from "react";

const Account = Schema.Struct({
  email: Schema.NonEmptyString,
  name: Schema.NonEmptyString,
});

export const CreateAccount = () => {
  const [draft, setDraft] = useState({ email: "", name: "" });

  return (
    <Form
      label="Create account"
      schema={Account}
      value={draft}
      onSubmit={(account) => save(account.email, account.name)}
    >
      {(state) => (
        <>
          <Field label="Email">
            <FieldInput
              value={draft.email}
              onChange={(event) =>
                setDraft({ ...draft, email: event.value ?? "" })
              }
            />
          </Field>
          <Field label="Name">
            <FieldInput
              value={draft.name}
              onChange={(event) =>
                setDraft({ ...draft, name: event.value ?? "" })
              }
            />
          </Field>
          <Button
            onClick={state.submit}
            disabled={state.pending}
            loading={state.pending}
          >
            Create account
          </Button>
        </>
      )}
    </Form>
  );
};

Form
├── message block
└── children (fields)