diff --git a/ui/src/components/form/checkbox.js b/ui/src/components/form/checkbox/index.js
similarity index 50%
rename from ui/src/components/form/checkbox.js
rename to ui/src/components/form/checkbox/index.js
index a0a0589f..5d1d7837 100644
--- a/ui/src/components/form/checkbox.js
+++ b/ui/src/components/form/checkbox/index.js
@@ -1,6 +1,6 @@
-const composers = require('../../shared/composers');
-const BaseInput = require('./base-input');
-const Toggle = require('./toggle');
+const composers = require('../../../shared/composers');
+const BaseInput = require('../base-input');
+const Toggle = require('../toggle');
const {
Baseline
diff --git a/ui/src/components/form/checkbox/story.js b/ui/src/components/form/checkbox/story.js
new file mode 100644
index 00000000..d963b42f
--- /dev/null
+++ b/ui/src/components/form/checkbox/story.js
@@ -0,0 +1,169 @@
+const React = require('react');
+
+const {
+ storiesOf
+} = require('@kadira/storybook');
+
+const FormMeta = require('../meta');
+const FormGroup = require('../group');
+const Checkbox = require('../checkbox');
+const Label = require('../label');
+const Row = require('../../row');
+const Column = require('../../column');
+
+storiesOf('Checkbox', module)
+ .add('Default', () => (
+
+
+
+
+ ))
+ .add('Checked', () => (
+
+
+
+
+ ))
+ .add('Disabled', () => (
+
+
+
+
+ ))
+ .add('With label before', () => (
+
+
+
+
+ ))
+ .add('With warning', () => (
+
+ {/* eslint-disable object-curly-newline */}
+
+ {/* eslint-enable object-curly-newline */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Unexpected children warning!
+
+
+
+
+
+
+
+
+ ))
+ .add('With error', () => (
+
+ {/* eslint-disable object-curly-newline */}
+
+ {/* eslint-enable object-curly-newline */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Unexpected children error!
+
+
+
+
+
+
+
+
+ ))
+ .add('With success', () => (
+
+ {/* eslint-disable object-curly-newline */}
+
+ {/* eslint-enable object-curly-newline */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Unexpected children success!
+
+
+
+
+
+
+
+
+ ))
+ .add('With label before with success', () => (
+
+
+
+
+ Thanks for ticking, you are a star!
+
+
+ ))
+ .add('Multiple checkboxes with meta', () => (
+
+
+
+
+
+
+
+
+
+
+
+
+ Thanks for ticking, you are a star!
+
+
+
+
+
+
+
+
+
+
+ Thanks for ticking, you are a star!
+
+
+
+
+
+
+
+
+
+
+
+
+ ));
diff --git a/ui/src/components/form/input.js b/ui/src/components/form/input/index.js
similarity index 56%
rename from ui/src/components/form/input.js
rename to ui/src/components/form/input/index.js
index 3c5981f9..ea65d33f 100644
--- a/ui/src/components/form/input.js
+++ b/ui/src/components/form/input/index.js
@@ -1,5 +1,5 @@
-const composers = require('../../shared/composers');
-const BaseInput = require('./base-input');
+const composers = require('../../../shared/composers');
+const BaseInput = require('../base-input');
const {
Baseline
diff --git a/ui/src/components/form/input/story.js b/ui/src/components/form/input/story.js
new file mode 100644
index 00000000..d93e143a
--- /dev/null
+++ b/ui/src/components/form/input/story.js
@@ -0,0 +1,155 @@
+const React = require('react');
+
+const {
+ storiesOf
+} = require('@kadira/storybook');
+
+const Input = require('../input');
+const FormMeta = require('../meta');
+const FormGroup = require('../group');
+const Label = require('../label');
+
+storiesOf('Input', module)
+ .add('Default', () => (
+
+ ))
+ .add('type=email', () => (
+
+
+
+ We'll never share your email with anyone else.
+
+ ))
+ .add('Error', () => (
+
+
+
+
+
+
+
+
+
+
+
+ {/* eslint-disable object-curly-newline */}
+
+ {/* eslint-enable object-curly-newline */}
+
+
+
+
+
+
+
+
+ Unexpected children error!
+
+
+
+ ))
+ .add('Warning', () => (
+
+
+
+
+
+
+
+
+
+
+
+ {/* eslint-disable object-curly-newline */}
+
+ {/* eslint-enable object-curly-newline */}
+
+
+
+
+
+
+
+
+ Unexpected children warning!
+
+
+
+ ))
+ .add('Success', () => (
+
+
+
+
+
+
+
+
+
+
+
+ {/* eslint-disable object-curly-newline */}
+
+ {/* eslint-enable object-curly-newline */}
+
+
+
+
+
+
+
+
+ Unexpected children success!
+
+
+
+ ))
+ .add('Base meta', () => (
+
+
+
+ I'm a children of meta
+
+ ));
diff --git a/ui/src/components/form/radio.js b/ui/src/components/form/radio/index.js
similarity index 74%
rename from ui/src/components/form/radio.js
rename to ui/src/components/form/radio/index.js
index 641fa4fa..06c68429 100644
--- a/ui/src/components/form/radio.js
+++ b/ui/src/components/form/radio/index.js
@@ -1,8 +1,8 @@
const Styled = require('styled-components');
-const Toggle = require('./toggle');
-const composers = require('../../shared/composers');
-const BaseInput = require('./base-input');
+const Toggle = require('../toggle');
+const composers = require('../../../shared/composers');
+const BaseInput = require('../base-input');
const {
default: styled
diff --git a/ui/src/components/form/radio/story.js b/ui/src/components/form/radio/story.js
new file mode 100644
index 00000000..3dd04fdf
--- /dev/null
+++ b/ui/src/components/form/radio/story.js
@@ -0,0 +1,180 @@
+const React = require('react');
+
+const {
+ storiesOf
+} = require('@kadira/storybook');
+
+const Legend = require('../legend');
+const Radio = require('../radio');
+const FormGroup = require('../group');
+const FormMeta = require('../meta');
+
+const {
+ RadioList
+} = Radio;
+
+
+storiesOf('Radio', module)
+ .add('Default', () => (
+
+
+
+ Video
+ TV
+ Netflix
+
+
+ ))
+ .add('disabled', () => (
+
+
+
+ Video
+ TV
+ Netflix
+
+
+ ))
+ .add('Error', () => (
+
+
+
+
+
+ Video
+ TV
+ Netflix
+
+
+
+
+
+
+ Video
+ TV
+ Netflix
+
+
+ {/* eslint-disable object-curly-newline */}
+
+ {/* eslint-enable object-curly-newline */}
+
+
+
+ Video
+ TV
+ Netflix
+
+
+
+
+
+ Unexpected children error!
+
+
+ Video
+ TV
+ Netflix
+
+
+
+ ))
+ .add('Warning', () => (
+
+
+
+
+
+ Video
+ TV
+ Netflix
+
+
+
+
+
+
+ Video
+ TV
+ Netflix
+
+
+ {/* eslint-disable object-curly-newline */}
+
+ {/* eslint-enable object-curly-newline */}
+
+
+
+ Video
+ TV
+ Netflix
+
+
+
+
+
+ Unexpected children warning!
+
+
+ Video
+ TV
+ Netflix
+
+
+
+ ))
+ .add('Success', () => (
+
+
+
+
+
+ Video
+ TV
+ Netflix
+
+
+
+
+
+
+ Video
+ TV
+ Netflix
+
+
+ {/* eslint-disable object-curly-newline */}
+
+ {/* eslint-enable object-curly-newline */}
+
+
+
+ Video
+ TV
+ Netflix
+
+
+
+
+
+ Unexpected children success!
+
+
+ Video
+ TV
+ Netflix
+
+
+
+ ))
+ .add('Base meta', () => (
+
+
+ I'm a children of meta
+
+ Video
+ TV
+ Netflix
+
+
+ ));
diff --git a/ui/src/components/form/select.js b/ui/src/components/form/select/index.js
similarity index 57%
rename from ui/src/components/form/select.js
rename to ui/src/components/form/select/index.js
index 0be3bf65..3ed46f69 100644
--- a/ui/src/components/form/select.js
+++ b/ui/src/components/form/select/index.js
@@ -1,5 +1,5 @@
-const composers = require('../../shared/composers');
-const BaseInput = require('./base-input');
+const composers = require('../../../shared/composers');
+const BaseInput = require('../base-input');
const {
Baseline
diff --git a/ui/src/components/form/select/story.js b/ui/src/components/form/select/story.js
new file mode 100644
index 00000000..84173e85
--- /dev/null
+++ b/ui/src/components/form/select/story.js
@@ -0,0 +1,231 @@
+const React = require('react');
+
+const {
+ storiesOf
+} = require('@kadira/storybook');
+
+const FormMeta = require('../meta');
+const FormGroup = require('../group');
+const Select = require('../select');
+const Label = require('../label');
+
+storiesOf('Select', module)
+ .add('Default', () => (
+
+
+
+
+ ))
+ .add('placeholder', () => (
+
+ ))
+ .add('disabled', () => (
+
+
+
+
+ ))
+ .add('selected', () => (
+
+
+
+
+ ))
+ .add('multiple', () => (
+
+
+
+
+ ))
+ .add('warning', () => (
+
+
+
+
+
+
+
+
+
+
+
+ {/* eslint-disable object-curly-newline */}
+
+ {/* eslint-enable object-curly-newline */}
+
+
+
+
+
+
+
+
+ Unexpected children warning!
+
+
+
+ ))
+ .add('error', () => (
+
+
+
+
+
+
+
+
+
+
+
+ {/* eslint-disable object-curly-newline */}
+
+ {/* eslint-enable object-curly-newline */}
+
+
+
+
+
+
+
+
+ Unexpected children error!
+
+
+
+ ))
+ .add('success', () => (
+
+
+
+
+
+
+
+
+
+
+
+ {/* eslint-disable object-curly-newline */}
+
+ {/* eslint-enable object-curly-newline */}
+
+
+
+
+
+
+
+
+ Unexpected children success!
+
+
+
+ ))
+ .add('Base meta', () => (
+
+
+
+
+ I'm a children of meta!
+
+
+ ));