diff --git a/packages/example/src/lib/TextFieldInput.tsx b/packages/example/src/lib/TextFieldInput.tsx
index 9e3d45a..a2c1983 100644
--- a/packages/example/src/lib/TextFieldInput.tsx
+++ b/packages/example/src/lib/TextFieldInput.tsx
@@ -1,15 +1,18 @@
 import { Callout, Flex, TextField } from "@radix-ui/themes"
-import { Option, ParseResult, Schema, Struct } from "effect"
+import { Option, ParseResult, Schema, Struct, SubscriptionRef } from "effect"
 import { Component } from "effect-fc"
 import { useInput } from "effect-fc/hooks"
+import { SubscriptionSubRef } from "effect-fc/types"
 import * as React from "react"
 
 
-export interface TextFieldInputProps<A, R>
-extends
-    Omit<useInput.Options<A, R>, "schema">,
-    Omit<TextField.RootProps, "ref">
-{}
+export type TextFieldInputProps<A, R> = (
+    & (
+        | { readonly optional: true } & Omit<useInput.Options<Option.Option<A>, R>, "schema">
+        | { readonly optional?: false } & Omit<useInput.Options<A, R>, "schema">
+    )
+    & Omit<TextField.RootProps, "ref">
+)
 
 export const TextFieldInput = <A, R>(
     schema: Schema.Schema<A, string, R>
@@ -19,7 +22,14 @@ export const TextFieldInput = <A, R>(
     ParseResult.ParseError,
     R
 > => Component.makeUntraced(function* TextFieldInput(props) {
+    const ref = React.useMemo(() => props.optional
+        ? SubscriptionSubRef.makeFromGetSet(props.ref, {
+
+        })
+        : props.ref,
+    [props.optional, props.ref])
     const input = yield* useInput({ schema, ...props })
+
     const issues = React.useMemo(() => Option.map(
         input.error,
         ParseResult.ArrayFormatter.formatErrorSync,