diff --git a/.changeset/ninety-ducks-rule.md b/.changeset/ninety-ducks-rule.md
new file mode 100644
index 000000000..8c3806e01
--- /dev/null
+++ b/.changeset/ninety-ducks-rule.md
@@ -0,0 +1,5 @@
+---
+"@suid/site": minor
+---
+
+Add email input example to the `TextField` component page
diff --git a/packages/site/src/pages/components/TextFieldPage/StateTextFieldsExample.tsx b/packages/site/src/pages/components/TextFieldPage/StateTextFieldsExample.tsx
index 6ece41e06..ba97fc154 100644
--- a/packages/site/src/pages/components/TextFieldPage/StateTextFieldsExample.tsx
+++ b/packages/site/src/pages/components/TextFieldPage/StateTextFieldsExample.tsx
@@ -11,7 +11,8 @@ function capitalizeWords(value: string) {
 export default function StateTextFields() {
   const [name, setName] = createSignal(capitalizeWords("Cat in the Hat"));
   const [date, setDate] = createSignal("");
-  const [number, setNumber] = createSignal("0");
+  const [number, setNumber] = createSignal("");
+  const [email, setEmail] = createSignal("");
   return (
     <Box
       component="form"
@@ -63,6 +64,20 @@ export default function StateTextFields() {
         />
         <TextField label="Uncontrolled number" type="number" defaultValue="0" />
       </div>
+      <div>
+        <TextField
+          label="Controlled email"
+          type="email"
+          value={email()}
+          onChange={(event, value) => setEmail(value)}
+          helperText={email()}
+        />
+        <TextField
+          label="Uncontrolled email"
+          type="email"
+          defaultValue="info@localhost"
+        />
+      </div>
     </Box>
   );
 }