diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts
index 05ab4240c..cd4601c52 100644
--- a/src/core/client/ui/components/index.ts
+++ b/src/core/client/ui/components/index.ts
@@ -7,3 +7,5 @@ export { default as Flex } from "./Flex";
 export { default as MatchMedia } from "./MatchMedia";
 export { default as TrapFocus } from "./TrapFocus";
 export { default as ValidationMessage } from "./ValidationMessage";
+export { default as InputLabel } from "./InputLabel";
+export { default as TextField } from "./TextField";
diff --git a/src/docs/forms.mdx b/src/docs/forms.mdx
new file mode 100644
index 000000000..5667d6f78
--- /dev/null
+++ b/src/docs/forms.mdx
@@ -0,0 +1,52 @@
+---
+name: Forms
+route: '/forms'
+---
+
+# Forms
+
+Let's build some forms! We will use the following compoenents `InputLabel`, `Typography`, `TextField`, `ValidationMessage`
+
+### Examples
+
+import { Playground, PropsTable } from 'docz'
+import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} from '../core/client/ui/components'
+
+# InputLabel
+
+## Simple Form
+<Playground>
+  <Flex itemGutter direction="column" style={{width:330}}>
+    <Typography variant="heading1">Sign up to join the conversation</Typography>
+    <InputLabel>Email Address</InputLabel>
+    <TextField fullWidth/>
+    <InputLabel>Username</InputLabel>
+    <Typography>A unique identifier displayed on your comments. You may use “_” and “.”</Typography>
+    <TextField fullWidth/>
+    <InputLabel>Password</InputLabel>
+    <Typography>Must be at least 8 characters</Typography>
+    <TextField fullWidth/>
+    <InputLabel>Confirm Password</InputLabel>
+    <TextField fullWidth/>
+    <Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
+  </Flex>
+</Playground>
+
+## Simple Form with error
+<Playground>
+  <Flex itemGutter direction="column" style={{width:330}}>
+    <Typography variant="heading1">Sign up to join the conversation</Typography>
+    <InputLabel>Email Address</InputLabel>
+    <TextField fullWidth />
+    <InputLabel>Username</InputLabel>
+    <Typography>A unique identifier displayed on your comments. You may use “_” and “.”</Typography>
+    <TextField defaultValue="something.com" color="error" fullWidth/>
+    <ValidationMessage color="error" fullWidth>Invalid characters. Try again.</ValidationMessage>
+    <InputLabel>Password</InputLabel>
+    <Typography>Must be at least 8 characters</Typography>
+    <TextField fullWidth/>
+    <InputLabel>Confirm Password</InputLabel>
+    <TextField fullWidth/>
+    <Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
+  </Flex>
+</Playground>