diff --git a/packages/html2/src/index.ts b/packages/html2/src/index.ts
index b61f911..4b37dae 100644
--- a/packages/html2/src/index.ts
+++ b/packages/html2/src/index.ts
@@ -17,6 +17,8 @@ type Wrapped = {
     options?: AddEventListenerOptions | boolean,
 };
 
+export type NodeGenerator = (t: HtmlFragmentsTemplate) => HtmlFragment;
+
 export class Widget implements EventTarget {
     facet: Facet;
     node: Dataflow.Field<ChildNode | null>;
@@ -24,7 +26,7 @@ export class Widget implements EventTarget {
         new Map<string, Map<EventListenerOrEventListenerObject, Wrapped>>();
     _parent: Dataflow.Field<ParentNode | null>;
 
-    constructor (private nodeGenerator: (t: HtmlFragmentsTemplate) => HtmlFragment) {
+    constructor (private nodeGenerator: NodeGenerator) {
         this.facet = Turn.activeFacet;
 
         on stop {
@@ -170,6 +172,50 @@ export class Widget implements EventTarget {
     }
 }
 
+export class ValueWidget extends Widget {
+    _value: Dataflow.Field<string>;
+    _valueAsNumber: Dataflow.Field<number>;
+
+    constructor (nodeGenerator: NodeGenerator) {
+        super(nodeGenerator);
+
+        field value: string = '';
+        this._value = value;
+
+        field valueAsNumber: number = NaN;
+        this._valueAsNumber = valueAsNumber;
+
+        const readValues = (n: any) => {
+            this._value.value = n?.value ?? '';
+            this._valueAsNumber.value = n?.valueAsNumber ?? NaN;
+        };
+
+        this.on('change', e => readValues(e.target));
+
+        dataflow {
+            if (this.node.value && 'value' in this.node.value) {
+                readValues(this.node.value);
+            }
+        }
+        dataflow {
+            if (this.node.value && 'value' in this.node.value) {
+                (this.node.value as any).value = '' + this._valueAsNumber.value;
+            }
+        }
+        dataflow {
+            if (this.node.value && 'value' in this.node.value) {
+                this.node.value.value = this._value.value;
+            }
+        }
+    }
+
+    get value(): string { return this._value.value; }
+    set value(v: string) { this._value.value = v; }
+
+    get valueAsNumber(): number { return this._valueAsNumber.value; }
+    set valueAsNumber(v: number) { this._valueAsNumber.value = v; }
+}
+
 function spawnLocationHashTracker(ds: Ref) {
     spawn named 'LocationHashTracker' {
         at ds {