diff --git a/app/components/Input.mdx b/app/components/Input.mdx
new file mode 100644
index 0000000..5111f62
--- /dev/null
+++ b/app/components/Input.mdx
@@ -0,0 +1,26 @@
+---
+name: Input
+---
+
+import { Playground, PropsTable } from 'docz'
+
+import { InputComponent } from './input.js'
+import { DoczWrapper } from '../theme.js'
+
+# Input
+
+
+
+## Text Input
+
+
+ {() => }
+
+
+## Textarea
+
+
+
+ {() => }
+
+
diff --git a/app/components/input.js b/app/components/input.js
new file mode 100644
index 0000000..459ae30
--- /dev/null
+++ b/app/components/input.js
@@ -0,0 +1,53 @@
+// @flow
+import React from 'react';
+
+import styled from 'styled-components';
+
+// TODO: Missing styles
+
+const defaultStyles = `
+ padding: 10px;
+ width: 100%;
+ outline: none;
+ font-family: ${props => props.theme.fontFamily}
+`;
+
+const Input = styled.input.attrs({
+ type: 'text',
+})`
+ ${defaultStyles};
+`;
+
+const Textarea = styled.textarea`
+ ${defaultStyles};
+`;
+
+type Props = {
+ inputType?: 'input' | 'textarea' | 'dropdown',
+ value: string,
+ onChange: string => void,
+ rows?: number,
+ disabled?: boolean,
+ type?: string,
+};
+
+export const InputComponent = ({ inputType, onChange, ...props }: Props) => {
+ const inputTypes = {
+ input: () => onChange(evt.target.value)} {...props} />,
+ textarea: () =>