feat(site): add email input type example

swordev · Sep 26, 2023 · d48ed2c · d48ed2c
1 parent 48253e6
commit d48ed2c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/.changeset/ninety-ducks-rule.md 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
@@ -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>
   );
 }