Form work

packages/example/src/routes/form.tsx

@@ -1,9 +1,9 @@
 import { runtime } from "@/runtime"
-import { Callout, Container, Flex, TextField } from "@radix-ui/themes"
+import { Button, Callout, Container, Flex, TextField } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
-import { Array, Console, Effect, Option, Schema, Stream } from "effect"
+import { Array, Effect, Option, Schema } from "effect"
 import { Component, Form } from "effect-fc"
-import { useContext, useFork } from "effect-fc/hooks"
+import { useContext, useSubscribables } from "effect-fc/hooks"
 
 
 const email = Schema.pattern<typeof Schema.String>(
@@ -33,8 +33,7 @@ class RegisterPage extends Component.makeUntraced("RegisterPage")(function*() {
     const emailInput = yield* Form.useInput(form, ["email"], { debounce: "200 millis" })
     const passwordInput = yield* Form.useInput(form, ["password"], { debounce: "200 millis" })
 
-    yield* useFork(() => Stream.runForEach(form.valueRef.changes, Console.log), [])
-    // yield* useFork(() => Stream.runForEach(form.errorRef.changes, Console.log), [])
+    const [canSubmit] = yield* useSubscribables(form.canSubmitSubscribable)
 
     return (
         <Container>
@@ -68,6 +67,8 @@ class RegisterPage extends Component.makeUntraced("RegisterPage")(function*() {
 
                     onNone: () => <></>,
                 })}
+
+                <Button disabled={!canSubmit}>Submit</Button>
             </Flex>
         </Container>
     )