Working field

packages/example/src/lib/form/TextFieldFormInput.tsx

@@ -0,0 +1,40 @@
+import { Callout, Flex, TextField } from "@radix-ui/themes"
+import { Array, Option } from "effect"
+import { Component, Form } from "effect-fc"
+import { useSubscribables } from "effect-fc/hooks"
+
+
+export interface TextFieldFormInputProps
+extends TextField.RootProps, Form.useInput.Options {
+    readonly field: Form.FormField<any, string>
+}
+
+export class TextFieldFormInput extends Component.makeUntraced("TextFieldFormInput")(function*(props: TextFieldFormInputProps) {
+    const { value, setValue } = yield* Form.useInput(props.field, props)
+    const [issues, isValidating, isSubmitting] = yield* useSubscribables(
+        props.field.issuesSubscribable,
+        props.field.isValidatingSubscribable,
+        props.field.isSubmittingSubscribable,
+    )
+
+    return (
+        <Flex direction="column" gap="1">
+            <TextField.Root
+                value={value}
+                onChange={e => setValue(e.target.value)}
+                disabled={isSubmitting}
+                {...props}
+            />
+
+            {Option.match(Array.head(issues), {
+                onSome: issue => (
+                    <Callout.Root>
+                        <Callout.Text>{issue.message}</Callout.Text>
+                    </Callout.Root>
+                ),
+
+                onNone: () => <></>,
+            })}
+        </Flex>
+    )
+}) {}