diff --git a/package.json b/package.json
index 481695ef..1f98b5c3 100644
--- a/package.json
+++ b/package.json
@@ -48,11 +48,14 @@
     "@fortawesome/react-fontawesome": "0.1.3",
     "@types/enzyme": "^3.1.15",
     "@types/lodash": "4.x.x",
+    "@types/react": "16.x.x",
+    "@types/react-dom": "16.x.x",
     "@types/react-input-autosize": "2.0.x",
     "@types/react-textarea-autosize": "4.3.x",
     "@types/styled-components": "4.0.x",
     "@types/styled-system": "3.0.x",
     "lodash": "4.x.x",
+    "react-dom": "^16.7.0-alpha.2",
     "react-contextmenu": "2.10.x",
     "react-input-autosize": "2.2.x",
     "react-textarea-autosize": "7.1.0-1",
@@ -65,14 +68,11 @@
     "@fortawesome/free-solid-svg-icons": "5.5.x",
     "@sambego/storybook-state": "1.x.x",
     "@stoplight/scripts": "1.2.3",
-    "@types/react": "16.x.x",
-    "@types/react-dom": "16.x.x",
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.7.0",
     "enzyme-to-json": "^3.3.4",
     "jest-enzyme": "^7.0.1",
-    "react": "16.x.x",
-    "react-dom": "16.x.x",
+    "react": "^16.7.0-alpha.2",
     "storybook-chromatic": "1.2.x",
     "typescript": "3.1.6"
   },
diff --git a/src/Checkbox.tsx b/src/Checkbox.tsx
index 2ceca702..0b469652 100644
--- a/src/Checkbox.tsx
+++ b/src/Checkbox.tsx
@@ -1,57 +1,63 @@
+import noop = require('lodash/noop');
 import * as React from 'react';
 
 import { Box } from './Box';
 import { Flex } from './Flex';
 import { Icon } from './Icon';
-import { Input } from './Input';
 import { styled } from './utils';
 
 export interface ICheckboxProps {
-  checked?: boolean;
-  disabled?: boolean;
   id?: string;
   className?: string;
+  checked?: boolean;
+  disabled?: boolean;
   width?: string;
   height?: string;
-  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  onChange?: (checked: boolean) => void;
 }
 
-export const Checkbox = styled<ICheckboxProps>((props: ICheckboxProps) => {
-  const { id, className, checked, width, height, disabled, onChange } = props;
+export const BasicCheckbox = (props: ICheckboxProps) => {
+  const { id, className, width, height, disabled, onChange = noop } = props;
+
+  const [checked, setValue] = React.useState(props.checked || false);
+  const isChecked = props.hasOwnProperty('checked') ? props.checked : checked;
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.checked);
+    onChange(event.target.checked);
+  };
 
   return (
-    <span className={className}>
-      <Box display="inline-block">
-        <Input
-          type="checkbox"
-          id={id}
-          checked={checked}
-          disabled={disabled}
-          onChange={onChange}
-          position="absolute"
-          css={{ clip: 'rect(1px, 1px, 1px, 1px)' }}
-        />
-        <Flex
-          as="span"
-          display="block"
-          m="none"
-          p="none"
-          radius="md"
-          items="center"
-          justify="center"
-          bg={checked ? 'toggle.checked.bg' : 'toggle.bg'}
-          cursor={disabled ? 'not-allowed' : 'pointer'}
-          width={width || '20px'}
-          height={height || '20px'}
-          opacity={disabled ? 0.6 : 1}
-          css={{
-            fontSize: '14px',
-            transition: 'background-color .15s ease-in-out',
-          }}
-        >
-          {checked && <Icon icon="check" fg="toggle.checked.fg" />}
-        </Flex>
-      </Box>
-    </span>
+    <Box as="label" display="inline-block" id={id} className={className}>
+      <input
+        type="checkbox"
+        checked={isChecked || false}
+        disabled={disabled}
+        onChange={handleChange}
+        style={{ position: 'absolute', clip: 'rect(1px, 1px, 1px, 1px)' }}
+      />
+      <Flex
+        as="span"
+        display="block"
+        m="none"
+        p="none"
+        radius="md"
+        items="center"
+        justify="center"
+        bg={isChecked ? 'toggle.checked.bg' : 'toggle.bg'}
+        cursor={disabled ? 'not-allowed' : 'pointer'}
+        width={width || '20px'}
+        height={height || '20px'}
+        opacity={disabled ? 0.6 : 1}
+        css={{
+          fontSize: '14px',
+          transition: 'background-color .15s ease-in-out',
+        }}
+      >
+        {isChecked && <Icon icon="check" fg="toggle.checked.fg" />}
+      </Flex>
+    </Box>
   );
-})``;
+};
+
+export const Checkbox = styled<ICheckboxProps>(BasicCheckbox as any)``;
diff --git a/src/Input.tsx b/src/Input.tsx
index 81349b74..d2e7e440 100644
--- a/src/Input.tsx
+++ b/src/Input.tsx
@@ -1,3 +1,4 @@
+import noop = require('lodash/noop');
 import * as React from 'react';
 import AutosizeInput from 'react-input-autosize';
 
@@ -7,16 +8,41 @@ import { styled } from './utils';
 export interface IInputProps extends ITextProps {
   type?: string;
   autosize?: boolean;
-  as?: any;
+  value?: string | number;
+  onChange?: (value?: string | number) => void;
 }
 
-const StyledAutosizeInput = ({ autosize, className, ...rest }: IInputProps) => (
-  <AutosizeInput inputClassName={className} {...rest} />
-);
+export interface IInputState {
+  value?: string | number;
+}
+
+export const BasicInput = (props: IInputProps) => {
+  const { autosize, className, onChange = noop, ...rest } = props;
+
+  const [value, setValue] = React.useState(props.value || '');
+  const internalValue = props.hasOwnProperty('value') ? props.value : value;
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+    onChange(event.target.value);
+  };
+
+  if (autosize) {
+    return (
+      <AutosizeInput
+        inputClassName={className}
+        placeholderIsMinWidth={true}
+        {...rest}
+        value={internalValue}
+        onChange={handleChange}
+      />
+    );
+  }
+
+  return React.createElement('input', { className, ...rest, value: internalValue, onChange: handleChange });
+};
 
-export const Input = styled<IInputProps>(Text as any).attrs({
-  as: ({ autosize }: IInputProps) => (autosize ? StyledAutosizeInput : 'input'),
-})(
+export const Input = styled<IInputProps, 'input'>(Text as any)(
   {
     // @ts-ignore
     ':focus': {
@@ -34,6 +60,7 @@ export const Input = styled<IInputProps>(Text as any).attrs({
 );
 
 Input.defaultProps = {
+  as: BasicInput,
   px: 'md',
   py: 'sm',
   border: 'xs',
diff --git a/src/Textarea.tsx b/src/Textarea.tsx
index 909a44bf..1b835241 100644
--- a/src/Textarea.tsx
+++ b/src/Textarea.tsx
@@ -1,3 +1,5 @@
+import noop = require('lodash/noop');
+import * as React from 'react';
 import AutosizeTextarea from 'react-textarea-autosize';
 
 import { ITextProps, Text } from './Text';
@@ -7,12 +9,32 @@ export interface ITextareaProps extends ITextProps {
   autosize?: boolean;
   minRows?: number;
   maxRows?: number;
-  as?: any;
+
+  value?: string;
+  onChange?: (value: string) => void;
 }
 
-export const Textarea = styled<ITextareaProps>(Text as any).attrs({
-  as: ({ autosize }: ITextareaProps) => (autosize ? AutosizeTextarea : 'textarea'),
-})(
+export const BasicTextArea = (props: ITextareaProps) => {
+  const { autosize, minRows, maxRows, onChange = noop, ...rest } = props;
+
+  const [value, setValue] = React.useState(props.value || '');
+  const internalValue = props.hasOwnProperty('value') ? props.value : value;
+
+  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(event.target.value);
+    onChange(event.target.value);
+  };
+
+  if (autosize) {
+    return (
+      <AutosizeTextarea {...rest} minRows={minRows} maxRows={maxRows} value={internalValue} onChange={handleChange} />
+    );
+  }
+
+  return React.createElement('textarea', { ...rest, value: internalValue, onChange: handleChange });
+};
+
+export const Textarea = styled<ITextareaProps>(Text as any)(
   {
     // @ts-ignore
     ':focus': {
@@ -34,6 +56,7 @@ export const Textarea = styled<ITextareaProps>(Text as any).attrs({
 );
 
 Textarea.defaultProps = {
+  as: BasicTextArea,
   px: 'md',
   py: 'sm',
   border: 'xs',
diff --git a/src/Toggle.tsx b/src/Toggle.tsx
index ac7763c3..44dcf702 100644
--- a/src/Toggle.tsx
+++ b/src/Toggle.tsx
@@ -1,63 +1,70 @@
+import noop = require('lodash/noop');
 import * as React from 'react';
 
 import { Box } from './Box';
 import { Flex } from './Flex';
 import { Icon } from './Icon';
-import { Input } from './Input';
 import { styled } from './utils';
 
 export interface IToggleProps {
-  checked: boolean;
-  disabled?: boolean;
   id?: string;
   className?: string;
+  checked?: boolean;
+  disabled?: boolean;
   width?: string;
   height?: string;
-  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  onChange?: (checked: boolean) => void;
 }
 
-export const Toggle = styled<IToggleProps>((props: IToggleProps) => {
-  const { id, className, checked, width, height, disabled, onChange } = props;
+export const BasicToggle = (props: IToggleProps) => {
+  const { id, className, width, height, disabled, onChange = noop } = props;
+
+  const [checked, setValue] = React.useState(props.checked || false);
+  const isChecked = props.hasOwnProperty('checked') ? props.checked : checked;
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.checked);
+    onChange(event.target.checked);
+  };
 
   return (
-    <span className={className}>
-      <Box display="inline-block">
-        <Input
-          type="checkbox"
-          id={id}
-          checked={checked}
-          disabled={disabled}
-          onChange={onChange}
-          position="absolute"
-          css={{ clip: 'rect(1px, 1px, 1px, 1px)' }}
-        />
-        <Flex
-          as="span"
-          display="block"
-          m="none"
-          p="none"
-          radius="100px"
-          bg={checked ? 'toggle.checked.bg' : 'toggle.bg'}
-          cursor={disabled ? 'not-allowed' : 'pointer'}
-          width={width || '40px'}
-          height={height || '20px'}
-          opacity={disabled ? 0.6 : 1}
-          items="center"
+    <Box as="label" display="inline-block" id={id} className={className}>
+      <input
+        type="checkbox"
+        id={id}
+        checked={isChecked || false}
+        disabled={disabled}
+        onChange={handleChange}
+        style={{ position: 'absolute', clip: 'rect(1px, 1px, 1px, 1px)' }}
+      />
+      <Flex
+        as="span"
+        display="block"
+        m="none"
+        p="none"
+        radius="100px"
+        bg={isChecked ? 'toggle.checked.bg' : 'toggle.bg'}
+        cursor={disabled ? 'not-allowed' : 'pointer'}
+        width={width || '40px'}
+        height={height || '20px'}
+        opacity={disabled ? 0.6 : 1}
+        items="center"
+        css={{
+          fontSize: '14px',
+          transition: 'background-color .15s ease-in-out',
+        }}
+      >
+        <Icon
+          icon="circle"
+          fg={isChecked ? 'toggle.checked.fg' : 'toggle.fg'}
           css={{
-            fontSize: '14px',
-            transition: 'background-color .15s ease-in-out',
+            paddingLeft: isChecked ? '22px' : '4px',
+            transition: 'padding .15s ease-in-out, color .25s ease-in-out',
           }}
-        >
-          <Icon
-            icon="circle"
-            fg={checked ? 'toggle.checked.fg' : 'toggle.fg'}
-            css={{
-              paddingLeft: checked ? '22px' : '4px',
-              transition: 'padding .15s ease-in-out, color .25s ease-in-out',
-            }}
-          />
-        </Flex>
-      </Box>
-    </span>
+        />
+      </Flex>
+    </Box>
   );
-})``;
+};
+
+export const Toggle = styled<IToggleProps>(BasicToggle as any)``;
diff --git a/stories/Checkbox.tsx b/stories/Checkbox.tsx
index 6cf6c99a..0764de28 100644
--- a/stories/Checkbox.tsx
+++ b/stories/Checkbox.tsx
@@ -1,4 +1,5 @@
-import { action } from '@storybook/addon-actions';
+// @ts-ignore
+import { StateDecorator, Store } from '@sambego/storybook-state';
 import { withKnobs } from '@storybook/addon-knobs';
 import { boolean } from '@storybook/addon-knobs/react';
 import { storiesOf } from '@storybook/react';
@@ -6,13 +7,28 @@ import * as React from 'react';
 
 import { Checkbox } from '../src/Checkbox';
 
+const store = new Store({
+  checked: false,
+});
+
 export const checkboxKnobs = (tabName = 'Checkbox') => {
   return {
-    checked: boolean('checked', false, tabName),
     disabled: boolean('disabled', false, tabName),
   };
 };
 
 storiesOf('Checkbox', module)
   .addDecorator(withKnobs)
-  .add('with defaults', () => <Checkbox {...checkboxKnobs()} onChange={action('onChange')} />);
+  .add('uncontrolled', () => <Checkbox id="1" {...checkboxKnobs()} />)
+  .add('controlled set', () => <Checkbox {...checkboxKnobs()} checked={true} />)
+  .addDecorator(StateDecorator(store))
+  .add('controlled', () => (
+    <Checkbox
+      id="2"
+      {...checkboxKnobs()}
+      checked={store.checked}
+      onChange={(checked?: boolean) => {
+        store.set({ checked });
+      }}
+    />
+  ));
diff --git a/stories/Input.tsx b/stories/Input.tsx
index 31b2dd0d..c92d4d51 100644
--- a/stories/Input.tsx
+++ b/stories/Input.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 // @ts-ignore
 import { StateDecorator, Store } from '@sambego/storybook-state';
 import { withKnobs } from '@storybook/addon-knobs';
-import { boolean, select } from '@storybook/addon-knobs/react';
+import { boolean, select, text } from '@storybook/addon-knobs/react';
 import { storiesOf } from '@storybook/react';
 import { omitBy } from 'lodash';
 
@@ -21,6 +21,7 @@ export const inputKnobs = (tabName = 'Input'): any => {
     {
       disabled: boolean('disabled', false, tabName),
       type: select('type', InlineInputType, 'text', tabName),
+      placeholder: text('placeholder', 'placeholder', tabName),
     },
     val => !val
   );
@@ -31,6 +32,7 @@ export const autosizeInputKnobs = (tabName = 'Input'): any => {
     {
       disabled: boolean('disabled', false, tabName),
       type: select('type', AutosizeInputType, 'text', tabName),
+      placeholder: text('placeholder', 'placeholder', tabName),
     },
     val => !val
   );
@@ -38,23 +40,16 @@ export const autosizeInputKnobs = (tabName = 'Input'): any => {
 
 storiesOf('Input', module)
   .addDecorator(withKnobs)
+  .add('uncontrolled', () => <Input {...inputKnobs()} {...textKnobs()} {...boxKnobs()} />)
+  .add('autosize', () => <Input {...autosizeInputKnobs()} {...textKnobs()} {...boxKnobs()} autosize />)
+  .add('controlled set', () => <Input {...inputKnobs()} {...textKnobs()} {...boxKnobs()} value="not editable" />)
   .addDecorator(StateDecorator(store))
-  .add('with defaults', () => (
+  .add('controlled store', () => (
     <Input
       {...inputKnobs()}
       {...textKnobs()}
       {...boxKnobs()}
       value={store.get('value')}
-      onChange={(e: any) => store.set({ value: e.target.value })}
-    />
-  ))
-  .add('autosize', () => (
-    <Input
-      {...autosizeInputKnobs()}
-      {...textKnobs()}
-      {...boxKnobs()}
-      autosize
-      value={store.get('value')}
-      onChange={(e: any) => store.set({ value: e.target.value })}
+      onChange={(value: any) => store.set({ value })}
     />
   ));
diff --git a/stories/Textarea.tsx b/stories/Textarea.tsx
index 8909febc..d859aad5 100644
--- a/stories/Textarea.tsx
+++ b/stories/Textarea.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+// @ts-ignore
+import { StateDecorator, Store } from '@sambego/storybook-state';
 import { withKnobs } from '@storybook/addon-knobs';
 import { boolean, number } from '@storybook/addon-knobs/react';
 import { storiesOf } from '@storybook/react';
@@ -9,6 +11,10 @@ import { Textarea } from '../src/Textarea';
 import { boxKnobs } from './Box';
 import { textKnobs } from './Text';
 
+const store = new Store({
+  value: 'TextArea Text',
+});
+
 export const textareaKnobs = (tabName = 'Textarea'): any => {
   return omitBy(
     {
@@ -49,9 +55,16 @@ export const textareaAutosizeKnobs = (tabName = 'Textarea'): any => {
 
 storiesOf('Textarea', module)
   .addDecorator(withKnobs)
-  .add('with defaults', () => (
-    <Textarea {...textareaKnobs()} {...textKnobs()} {...boxKnobs()} defaultValue="Textarea Text" />
-  ))
-  .add('autosize', () => (
-    <Textarea {...textareaAutosizeKnobs()} {...textKnobs()} {...boxKnobs()} autosize defaultValue="Textarea Text" />
+  .add('uncontrolled', () => <Textarea {...textareaKnobs()} {...textKnobs()} {...boxKnobs()} />)
+  .add('autosize', () => <Textarea {...textareaAutosizeKnobs()} {...textKnobs()} {...boxKnobs()} autosize />)
+  .add('controlled set', () => <Textarea {...textareaKnobs()} {...textKnobs()} {...boxKnobs()} value="not-editable" />)
+  .addDecorator(StateDecorator(store))
+  .add('controlled', () => (
+    <Textarea
+      {...textareaKnobs()}
+      {...textKnobs()}
+      {...boxKnobs()}
+      value={store.get('value')}
+      onChange={(value: any) => store.set({ value })}
+    />
   ));
diff --git a/stories/Toggle.tsx b/stories/Toggle.tsx
index 0ba256ba..360693d5 100644
--- a/stories/Toggle.tsx
+++ b/stories/Toggle.tsx
@@ -1,4 +1,5 @@
-import { action } from '@storybook/addon-actions';
+// @ts-ignore
+import { StateDecorator, Store } from '@sambego/storybook-state';
 import { withKnobs } from '@storybook/addon-knobs';
 import { boolean } from '@storybook/addon-knobs/react';
 import { storiesOf } from '@storybook/react';
@@ -6,13 +7,28 @@ import * as React from 'react';
 
 import { Toggle } from '../src/Toggle';
 
+const store = new Store({
+  checked: false,
+});
+
 export const toggleKnobs = (tabName = 'Toggle') => {
   return {
-    checked: boolean('checked', false, tabName),
     disabled: boolean('disabled', false, tabName),
   };
 };
 
 storiesOf('Toggle', module)
   .addDecorator(withKnobs)
-  .add('with defaults', () => <Toggle {...toggleKnobs()} onChange={action('onChange')} />);
+  .add('uncontrolled', () => <Toggle {...toggleKnobs()} />)
+  .add('controlled checked', () => <Toggle {...toggleKnobs()} checked={true} />)
+  .addDecorator(StateDecorator(store))
+  .add('controlled', () => (
+    <Toggle
+      id="2"
+      {...toggleKnobs()}
+      checked={store.checked}
+      onChange={(checked?: boolean) => {
+        store.set({ checked });
+      }}
+    />
+  ));