Fix

packages/example/src/lib/TextAreaInput.tsx

@@ -1,45 +1,40 @@
 import { Callout, Flex, TextArea, TextAreaProps } from "@radix-ui/themes"
-import { Option, ParseResult, Schema, Struct } from "effect"
+import { Array, Equivalence, Option, ParseResult, Schema, Struct } from "effect"
 import { Component } from "effect-fc"
 import { useInput } from "effect-fc/hooks"
 import * as React from "react"
 
 
-export interface TextAreaInputProps<A, R>
-extends
-    Omit<useInput.Options<A, R>, "schema">,
-    Omit<TextAreaProps, "ref">
-{}
+export type TextAreaInputProps<A, R> = Omit<useInput.Options<A, R>, "schema" | "equivalence"> & Omit<TextAreaProps, "ref">
 
-export const TextAreaInput = <A, R>(
-    schema: Schema.Schema<A, string, R>
-): Component.Component<
+export const TextAreaInput = <A, R>(options: {
+    readonly schema: Schema.Schema<A, string, R>
+    readonly equivalence?: Equivalence.Equivalence<A>
+}): Component.Component<
     TextAreaInputProps<A, R>,
     React.JSX.Element,
     ParseResult.ParseError,
     R
 > => Component.makeUntraced(function* TextFieldInput(props) {
-    const input = yield* useInput({ schema, ...props })
-    const issues = React.useMemo(() => Option.map(
-        input.error,
-        ParseResult.ArrayFormatter.formatErrorSync,
+    const input = yield* useInput({ ...options, ...props })
+    const issue = React.useMemo(() => input.error.pipe(
+        Option.map(ParseResult.ArrayFormatter.formatErrorSync),
+        Option.flatMap(Array.head),
     ), [input.error])
 
     return (
         <Flex direction="column" gap="1">
-            {Option.isSome(issues) &&
-                <Callout.Root color="red" role="alert">
-                    <Callout.Text>
-                        <ul>{issues.value.map((issue, i) => <li key={i}>{issue.message}</li>)}</ul>
-                    </Callout.Text>
-                </Callout.Root>
-            }
-
             <TextArea
                 value={input.value}
-                onChange={input.onChange}
+                onChange={e => input.setValue(e.target.value)}
                 {...Struct.omit(props, "ref")}
             />
+
+            {Option.isSome(issue) &&
+                <Callout.Root color="red" role="alert">
+                    <Callout.Text>{issue.value.message}</Callout.Text>
+                </Callout.Root>
+            }
         </Flex>
     )
 })

packages/example/src/lib/TextFieldInput.tsx

@@ -24,8 +24,7 @@ export const TextFieldInput = <A, R, O extends boolean = false>(options: {
             optional: true,
             // eslint-disable-next-line react-hooks/rules-of-hooks
             ...yield* useOptionalInput({
-                schema: options.schema,
-                equivalence: options.equivalence,
+                ...options,
                 ...props as TextFieldOptionalInputProps<A, R>,
             }),
         }
@@ -33,8 +32,7 @@ export const TextFieldInput = <A, R, O extends boolean = false>(options: {
             optional: false,
             // eslint-disable-next-line react-hooks/rules-of-hooks
             ...yield* useInput({
-                schema: options.schema,
-                equivalence: options.equivalence,
+                ...options,
                 ...props as TextFieldInputProps<A, R>,
             })
         }
@@ -49,21 +47,20 @@ export const TextFieldInput = <A, R, O extends boolean = false>(options: {
             <Flex direction="row" align="center" gap="1">
                 {input.optional &&
                     <Checkbox
-                        checked={!input.disabled}
-                        onCheckedChange={checked => input.setDisabled(!checked)}
+                        checked={input.enabled}
+                        onCheckedChange={checked => input.setEnabled(checked !== "indeterminate" && checked)}
                     />
                 }
 
                 <TextField.Root
-                    {...input.optional
-                        ? Struct.pick(input, "value", "onChange", "disabled")
-                        : Struct.pick(input, "value", "onChange")
-                    }
+                    value={input.value}
+                    onChange={e => input.setValue(e.target.value)}
+                    disabled={input.optional ? !input.enabled : undefined}
                     {...Struct.omit(props as TextFieldOptionalInputProps<A, R> | TextFieldInputProps<A, R>, "ref")}
                 />
             </Flex>
 
-            {(!(input.optional && input.disabled) && Option.isSome(issue)) &&
+            {(!(input.optional && !input.enabled) && Option.isSome(issue)) &&
                 <Callout.Root color="red" role="alert">
                     <Callout.Text>{issue.value.message}</Callout.Text>
                 </Callout.Root>

packages/example/src/todo/Todo.tsx

@@ -12,7 +12,7 @@ import { FaDeleteLeft } from "react-icons/fa6"
 import { TodosState } from "./TodosState.service"
 
 
-const StringTextAreaInput = TextAreaInput(Schema.String)
+const StringTextAreaInput = TextAreaInput({ schema: Schema.String })
 const OptionalDateInput = TextFieldInput({ optional: true, schema: Schema.DateTimeUtc })
 
 const makeTodo = makeUuid4.pipe(