From d48ed2c39cdb12a281ff8eea514476f6ba846763 Mon Sep 17 00:00:00 2001
From: Juanra GM <juanrgm724@gmail.com>
Date: Tue, 26 Sep 2023 21:15:45 +0200
Subject: [PATCH] feat(site): add email input type example

---
 .changeset/ninety-ducks-rule.md                 |  5 +++++
 .../TextFieldPage/StateTextFieldsExample.tsx    | 17 ++++++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/ninety-ducks-rule.md

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>
   );
 }