From 9406718c6c85ca98047ad880c2b342c8c7f32b15 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Thu, 10 Aug 2017 16:19:38 -0700
Subject: [PATCH] rename to CJ recomendation

---
 ui_framework/dist/ui_framework.css            | 182 +++++++++---------
 ui_framework/doc_site/src/views/form/form.js  |  44 ++---
 ui_framework/src/components/form/_index.scss  |  20 +-
 .../_checkbox.scss}                           |  16 +-
 .../src/components/form/checkbox/_index.scss  |   1 +
 .../src/components/form/checkbox/checkbox.js  |  28 +++
 .../checkbox.test.js}                         |   8 +-
 .../src/components/form/checkbox/index.js     |   1 +
 .../form/field_number/_field_number.scss      |   3 +
 .../components/form/field_number/_index.scss  |   1 +
 .../field_number.js}                          |   8 +-
 .../form/field_number/field_number.test.js    |  16 ++
 .../src/components/form/field_number/index.js |   1 +
 .../form/field_password/_field_password.scss  |   3 +
 .../form/field_password/_index.scss           |   1 +
 .../field_password.js}                        |   8 +-
 .../field_password/field_password.test.js     |  16 ++
 .../components/form/field_password/index.js   |   1 +
 .../form/field_search/_field_search.scss      |   4 +
 .../components/form/field_search/_index.scss  |   1 +
 .../field_search.js}                          |   8 +-
 .../form/field_search/field_search.test.js    |  16 ++
 .../src/components/form/field_search/index.js |   1 +
 .../form/field_text/_field_text.scss          |   3 +
 .../components/form/field_text/_index.scss    |   1 +
 .../form_text.js => field_text/field_text.js} |   8 +-
 .../field_text.test.js}                       |   8 +-
 .../src/components/form/field_text/index.js   |   1 +
 .../components/form/form_checkbox/_index.scss |   1 -
 .../form/form_checkbox/form_checkbox.js       |  29 ---
 .../form/form_checkbox/form_checkbox.test.js  |  16 --
 .../components/form/form_checkbox/index.js    |   1 -
 .../form/form_number/_form_number.scss        |   3 -
 .../components/form/form_number/_index.scss   |   1 -
 .../form/form_number/form_number.test.js      |  16 --
 .../src/components/form/form_number/index.js  |   1 -
 .../form/form_password/_form_password.scss    |   3 -
 .../components/form/form_password/_index.scss |   1 -
 .../form/form_password/form_password.test.js  |  16 --
 .../components/form/form_password/index.js    |   1 -
 .../form/form_radio/_form_radio.scss          |   3 -
 .../components/form/form_radio/_index.scss    |   1 -
 .../components/form/form_radio/form_radio.js  |  20 --
 .../src/components/form/form_radio/index.js   |   1 -
 .../src/components/form/form_range/index.js   |   1 -
 .../components/form/form_row/form_row.test.js |   2 +-
 .../form/form_search/_form_search.scss        |   4 -
 .../components/form/form_search/_index.scss   |   1 -
 .../src/components/form/form_search/index.js  |   1 -
 .../form/form_select/_form_select.scss        |   9 -
 .../components/form/form_select/_index.scss   |   1 -
 .../form/form_select/form_select.test.js      |  16 --
 .../src/components/form/form_select/index.js  |   1 -
 .../components/form/form_switch/_index.scss   |   5 -
 .../form/form_switch/form_switch.js           |  33 ----
 .../form/form_switch/form_switch.test.js      |  16 --
 .../src/components/form/form_switch/index.js  |   1 -
 .../components/form/form_text/_form_text.scss |   3 -
 .../src/components/form/form_text/_index.scss |   1 -
 .../src/components/form/form_text/index.js    |   1 -
 .../form/form_textarea/_form_textarea.scss    |   3 -
 .../components/form/form_textarea/_index.scss |   1 -
 .../form/form_textarea/form_textarea.test.js  |  16 --
 .../components/form/form_textarea/index.js    |   1 -
 ui_framework/src/components/form/index.js     |  20 +-
 .../src/components/form/radio/_index.scss     |   1 +
 .../src/components/form/radio/_radio.scss     |   3 +
 .../src/components/form/radio/index.js        |   1 +
 .../src/components/form/radio/radio.js        |  15 ++
 .../form_text.test.js => radio/radio.test.js} |   8 +-
 .../form/{form_range => range}/_index.scss    |   2 +-
 .../_form_range.scss => range/_range.scss}    |   2 +-
 .../src/components/form/range/index.js        |   1 +
 .../form_range.js => range/range.js}          |   8 +-
 .../range.test.js}                            |   8 +-
 .../src/components/form/select/_index.scss    |   1 +
 .../src/components/form/select/_select.scss   |   9 +
 .../src/components/form/select/index.js       |   1 +
 .../form_select.js => select/select.js}       |   6 +-
 .../src/components/form/select/select.test.js |  16 ++
 .../src/components/form/switch/_index.scss    |   5 +
 .../_form_switch.scss => switch/_switch.scss} |  58 +++---
 .../src/components/form/switch/index.js       |   1 +
 .../src/components/form/switch/switch.js      |  33 ++++
 .../src/components/form/switch/switch.test.js |  16 ++
 .../src/components/form/text_area/_index.scss |   1 +
 .../components/form/text_area/_text_area.scss |   3 +
 .../src/components/form/text_area/index.js    |   1 +
 .../text_area.js}                             |   8 +-
 .../form/text_area/text_area.test.js          |  16 ++
 ui_framework/src/components/index.js          |  20 +-
 91 files changed, 449 insertions(+), 455 deletions(-)
 rename ui_framework/src/components/form/{form_checkbox/_form_checkbox.scss => checkbox/_checkbox.scss} (74%)
 create mode 100644 ui_framework/src/components/form/checkbox/_index.scss
 create mode 100644 ui_framework/src/components/form/checkbox/checkbox.js
 rename ui_framework/src/components/form/{form_range/form_range.test.js => checkbox/checkbox.test.js} (50%)
 create mode 100644 ui_framework/src/components/form/checkbox/index.js
 create mode 100644 ui_framework/src/components/form/field_number/_field_number.scss
 create mode 100644 ui_framework/src/components/form/field_number/_index.scss
 rename ui_framework/src/components/form/{form_number/form_number.js => field_number/field_number.js} (69%)
 create mode 100644 ui_framework/src/components/form/field_number/field_number.test.js
 create mode 100644 ui_framework/src/components/form/field_number/index.js
 create mode 100644 ui_framework/src/components/form/field_password/_field_password.scss
 create mode 100644 ui_framework/src/components/form/field_password/_index.scss
 rename ui_framework/src/components/form/{form_password/form_password.js => field_password/field_password.js} (66%)
 create mode 100644 ui_framework/src/components/form/field_password/field_password.test.js
 create mode 100644 ui_framework/src/components/form/field_password/index.js
 create mode 100644 ui_framework/src/components/form/field_search/_field_search.scss
 create mode 100644 ui_framework/src/components/form/field_search/_index.scss
 rename ui_framework/src/components/form/{form_search/form_search.js => field_search/field_search.js} (67%)
 create mode 100644 ui_framework/src/components/form/field_search/field_search.test.js
 create mode 100644 ui_framework/src/components/form/field_search/index.js
 create mode 100644 ui_framework/src/components/form/field_text/_field_text.scss
 create mode 100644 ui_framework/src/components/form/field_text/_index.scss
 rename ui_framework/src/components/form/{form_text/form_text.js => field_text/field_text.js} (67%)
 rename ui_framework/src/components/form/{form_search/form_search.test.js => field_text/field_text.test.js} (50%)
 create mode 100644 ui_framework/src/components/form/field_text/index.js
 delete mode 100644 ui_framework/src/components/form/form_checkbox/_index.scss
 delete mode 100644 ui_framework/src/components/form/form_checkbox/form_checkbox.js
 delete mode 100644 ui_framework/src/components/form/form_checkbox/form_checkbox.test.js
 delete mode 100644 ui_framework/src/components/form/form_checkbox/index.js
 delete mode 100644 ui_framework/src/components/form/form_number/_form_number.scss
 delete mode 100644 ui_framework/src/components/form/form_number/_index.scss
 delete mode 100644 ui_framework/src/components/form/form_number/form_number.test.js
 delete mode 100644 ui_framework/src/components/form/form_number/index.js
 delete mode 100644 ui_framework/src/components/form/form_password/_form_password.scss
 delete mode 100644 ui_framework/src/components/form/form_password/_index.scss
 delete mode 100644 ui_framework/src/components/form/form_password/form_password.test.js
 delete mode 100644 ui_framework/src/components/form/form_password/index.js
 delete mode 100644 ui_framework/src/components/form/form_radio/_form_radio.scss
 delete mode 100644 ui_framework/src/components/form/form_radio/_index.scss
 delete mode 100644 ui_framework/src/components/form/form_radio/form_radio.js
 delete mode 100644 ui_framework/src/components/form/form_radio/index.js
 delete mode 100644 ui_framework/src/components/form/form_range/index.js
 delete mode 100644 ui_framework/src/components/form/form_search/_form_search.scss
 delete mode 100644 ui_framework/src/components/form/form_search/_index.scss
 delete mode 100644 ui_framework/src/components/form/form_search/index.js
 delete mode 100644 ui_framework/src/components/form/form_select/_form_select.scss
 delete mode 100644 ui_framework/src/components/form/form_select/_index.scss
 delete mode 100644 ui_framework/src/components/form/form_select/form_select.test.js
 delete mode 100644 ui_framework/src/components/form/form_select/index.js
 delete mode 100644 ui_framework/src/components/form/form_switch/_index.scss
 delete mode 100644 ui_framework/src/components/form/form_switch/form_switch.js
 delete mode 100644 ui_framework/src/components/form/form_switch/form_switch.test.js
 delete mode 100644 ui_framework/src/components/form/form_switch/index.js
 delete mode 100644 ui_framework/src/components/form/form_text/_form_text.scss
 delete mode 100644 ui_framework/src/components/form/form_text/_index.scss
 delete mode 100644 ui_framework/src/components/form/form_text/index.js
 delete mode 100644 ui_framework/src/components/form/form_textarea/_form_textarea.scss
 delete mode 100644 ui_framework/src/components/form/form_textarea/_index.scss
 delete mode 100644 ui_framework/src/components/form/form_textarea/form_textarea.test.js
 delete mode 100644 ui_framework/src/components/form/form_textarea/index.js
 create mode 100644 ui_framework/src/components/form/radio/_index.scss
 create mode 100644 ui_framework/src/components/form/radio/_radio.scss
 create mode 100644 ui_framework/src/components/form/radio/index.js
 create mode 100644 ui_framework/src/components/form/radio/radio.js
 rename ui_framework/src/components/form/{form_text/form_text.test.js => radio/radio.test.js} (51%)
 rename ui_framework/src/components/form/{form_range => range}/_index.scss (97%)
 rename ui_framework/src/components/form/{form_range/_form_range.scss => range/_range.scss} (99%)
 create mode 100644 ui_framework/src/components/form/range/index.js
 rename ui_framework/src/components/form/{form_range/form_range.js => range/range.js} (71%)
 rename ui_framework/src/components/form/{form_radio/form_radio.test.js => range/range.test.js} (50%)
 create mode 100644 ui_framework/src/components/form/select/_index.scss
 create mode 100644 ui_framework/src/components/form/select/_select.scss
 create mode 100644 ui_framework/src/components/form/select/index.js
 rename ui_framework/src/components/form/{form_select/form_select.js => select/select.js} (73%)
 create mode 100644 ui_framework/src/components/form/select/select.test.js
 create mode 100644 ui_framework/src/components/form/switch/_index.scss
 rename ui_framework/src/components/form/{form_switch/_form_switch.scss => switch/_switch.scss} (66%)
 create mode 100644 ui_framework/src/components/form/switch/index.js
 create mode 100644 ui_framework/src/components/form/switch/switch.js
 create mode 100644 ui_framework/src/components/form/switch/switch.test.js
 create mode 100644 ui_framework/src/components/form/text_area/_index.scss
 create mode 100644 ui_framework/src/components/form/text_area/_text_area.scss
 create mode 100644 ui_framework/src/components/form/text_area/index.js
 rename ui_framework/src/components/form/{form_textarea/form_textarea.js => text_area/text_area.js} (65%)
 create mode 100644 ui_framework/src/components/form/text_area/text_area.test.js

diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index dc1c8a81b4129..4b780fd06ce1b 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -632,11 +632,11 @@ table {
   .kuiFormRow.kuiFormRow--invalid textarea {
     box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.16), inset 0 0 0 0 #FFF, inset 0 -2px 0 0 #A30000 !important; }
 
-.kuiFormCheckbox {
+.kuiCheckbox {
   position: relative;
   height: 24px;
   margin-top: 8px; }
-  .kuiFormCheckbox .kuiFormCheckbox__label {
+  .kuiCheckbox .kuiCheckbox__label {
     position: absolute;
     padding-left: 32px;
     line-height: 24px;
@@ -645,7 +645,7 @@ table {
     z-index: 2;
     font-size: 14px;
     cursor: pointer; }
-  .kuiFormCheckbox .kuiFormCheckbox__square {
+  .kuiCheckbox .kuiCheckbox__square {
     position: absolute;
     height: 24px;
     width: 24px;
@@ -653,25 +653,25 @@ table {
     border: 1px solid #D9D9D9;
     background: #fbfbfb;
     z-index: 0; }
-  .kuiFormCheckbox .kuiFormCheckbox__check {
+  .kuiCheckbox .kuiCheckbox__check {
     height: 100%;
     width: 100%; }
-  .kuiFormCheckbox .kuiFormCheckbox__input {
+  .kuiCheckbox .kuiCheckbox__input {
     position: absolute;
     opacity: 0; }
-    .kuiFormCheckbox .kuiFormCheckbox__input:checked ~ .kuiFormCheckbox__square .kuiFormCheckbox__check {
+    .kuiCheckbox .kuiCheckbox__input:checked ~ .kuiCheckbox__square .kuiCheckbox__check {
       background-color: #3F3F3F;
       -webkit-mask: url("../src/components/icon/assets/check.svg") center center no-repeat;
               mask: url("../src/components/icon/assets/check.svg") center center no-repeat; }
-    .kuiFormCheckbox .kuiFormCheckbox__input:focus ~ .kuiFormCheckbox__square {
+    .kuiCheckbox .kuiCheckbox__input:focus ~ .kuiCheckbox__square {
       background-color: #e6f2f6;
       border-color: #0079a5; }
-    .kuiFormCheckbox .kuiFormCheckbox__input:checked:focus ~ .kuiFormCheckbox__square .kuiFormCheckbox__check {
+    .kuiCheckbox .kuiCheckbox__input:checked:focus ~ .kuiCheckbox__square .kuiCheckbox__check {
       background-color: #3F3F3F;
       -webkit-mask: url("../src/components/icon/assets/check.svg") center center no-repeat;
               mask: url("../src/components/icon/assets/check.svg") center center no-repeat; }
 
-.kuiFormPassword {
+.kuiFieldNumber {
   border: none;
   font-size: 14px;
   font-family: "Roboto", Helvetica, Arial, sans-serif;
@@ -683,23 +683,71 @@ table {
   transition: box-shadow 250ms ease-in, background 250ms ease-in;
   max-width: 400px;
   border-radius: 0; }
-  .kuiFormPassword:focus {
+  .kuiFieldNumber:focus {
     background: #FFF;
     box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.16), inset 0 0 0 0 #FFF, inset 0 -2px 0 0 #0079a5; }
 
-.kuiFormRange {
+.kuiFieldPassword {
+  border: none;
+  font-size: 14px;
+  font-family: "Roboto", Helvetica, Arial, sans-serif;
+  padding: 12px;
+  color: #3F3F3F;
+  min-width: 256px;
+  background: #fbfbfb;
+  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.08), inset -400px 0 0 0 #fbfbfb;
+  transition: box-shadow 250ms ease-in, background 250ms ease-in;
+  max-width: 400px;
+  border-radius: 0; }
+  .kuiFieldPassword:focus {
+    background: #FFF;
+    box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.16), inset 0 0 0 0 #FFF, inset 0 -2px 0 0 #0079a5; }
+
+.kuiFieldSearch {
+  border: none;
+  font-size: 14px;
+  font-family: "Roboto", Helvetica, Arial, sans-serif;
+  padding: 12px;
+  color: #3F3F3F;
+  min-width: 256px;
+  background: #fbfbfb;
+  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.08), inset -400px 0 0 0 #fbfbfb;
+  transition: box-shadow 250ms ease-in, background 250ms ease-in;
+  max-width: 400px;
+  border-radius: 0; }
+  .kuiFieldSearch:focus {
+    background: #FFF;
+    box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.16), inset 0 0 0 0 #FFF, inset 0 -2px 0 0 #0079a5; }
+
+.kuiFieldText {
+  border: none;
+  font-size: 14px;
+  font-family: "Roboto", Helvetica, Arial, sans-serif;
+  padding: 12px;
+  color: #3F3F3F;
+  min-width: 256px;
+  background: #fbfbfb;
+  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.08), inset -400px 0 0 0 #fbfbfb;
+  transition: box-shadow 250ms ease-in, background 250ms ease-in;
+  max-width: 400px;
+  border-radius: 0; }
+  .kuiFieldText:focus {
+    background: #FFF;
+    box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.16), inset 0 0 0 0 #FFF, inset 0 -2px 0 0 #0079a5; }
+
+.kuiRange {
   -webkit-appearance: none;
   margin: 8px 0;
   width: 100%; }
-  .kuiFormRange:focus::-webkit-slider-thumb {
+  .kuiRange:focus::-webkit-slider-thumb {
     border: 2px solid #0079a5; }
-  .kuiFormRange:focus::-moz-range-thumb {
+  .kuiRange:focus::-moz-range-thumb {
     border: 2px solid #0079a5; }
-  .kuiFormRange:focus::-ms-thumb {
+  .kuiRange:focus::-ms-thumb {
     border: 2px solid #0079a5; }
-  .kuiFormRange:focus::-webkit-slider-runnable-track {
+  .kuiRange:focus::-webkit-slider-runnable-track {
     background-color: #0079a5; }
-  .kuiFormRange::-webkit-slider-runnable-track {
+  .kuiRange::-webkit-slider-runnable-track {
     cursor: pointer;
     height: 2px;
     transition: all 250ms ease-in;
@@ -707,7 +755,7 @@ table {
     background: #D9D9D9;
     border: 0 solid #D9D9D9;
     border-radius: 4px; }
-  .kuiFormRange::-webkit-slider-thumb {
+  .kuiRange::-webkit-slider-thumb {
     background: #FFF;
     border: 2px solid #3F3F3F;
     border-radius: 50%;
@@ -716,7 +764,7 @@ table {
     width: 16px;
     -webkit-appearance: none;
     margin-top: -7px; }
-  .kuiFormRange::-moz-range-track {
+  .kuiRange::-moz-range-track {
     cursor: pointer;
     height: 2px;
     transition: all 250ms ease-in;
@@ -724,14 +772,14 @@ table {
     background: #D9D9D9;
     border: 0 solid #D9D9D9;
     border-radius: 4px; }
-  .kuiFormRange::-moz-range-thumb {
+  .kuiRange::-moz-range-thumb {
     background: #FFF;
     border: 2px solid #3F3F3F;
     border-radius: 50%;
     cursor: pointer;
     height: 16px;
     width: 16px; }
-  .kuiFormRange::-ms-track {
+  .kuiRange::-ms-track {
     cursor: pointer;
     height: 2px;
     transition: all 250ms ease-in;
@@ -740,15 +788,15 @@ table {
     border-color: transparent;
     border-width: 8px 0;
     color: transparent; }
-  .kuiFormRange::-ms-fill-lower {
+  .kuiRange::-ms-fill-lower {
     background: #D9D9D9;
     border: 0 solid #D9D9D9;
     border-radius: 8px; }
-  .kuiFormRange::-ms-fill-upper {
+  .kuiRange::-ms-fill-upper {
     background: #D9D9D9;
     border: 0 solid #D9D9D9;
     border-radius: 8px; }
-  .kuiFormRange::-ms-thumb {
+  .kuiRange::-ms-thumb {
     background: #FFF;
     border: 2px solid #3F3F3F;
     border-radius: 50%;
@@ -757,23 +805,7 @@ table {
     width: 16px;
     margin-top: 0; }
 
-.kuiFormSearch {
-  border: none;
-  font-size: 14px;
-  font-family: "Roboto", Helvetica, Arial, sans-serif;
-  padding: 12px;
-  color: #3F3F3F;
-  min-width: 256px;
-  background: #fbfbfb;
-  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.08), inset -400px 0 0 0 #fbfbfb;
-  transition: box-shadow 250ms ease-in, background 250ms ease-in;
-  max-width: 400px;
-  border-radius: 0; }
-  .kuiFormSearch:focus {
-    background: #FFF;
-    box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.16), inset 0 0 0 0 #FFF, inset 0 -2px 0 0 #0079a5; }
-
-.kuiFormSelect {
+.kuiSelect {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -788,14 +820,14 @@ table {
   transition: box-shadow 250ms ease-in, background 250ms ease-in;
   max-width: 400px;
   border-radius: 0; }
-  .kuiFormSelect:focus {
+  .kuiSelect:focus {
     background: #FFF;
     box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.16), inset 0 0 0 0 #FFF, inset 0 -2px 0 0 #0079a5; }
 
-.kuiFormSelect::-ms-expand {
+.kuiSelect::-ms-expand {
   display: none; }
 
-.kuiFormSwitch {
+.kuiSwitch {
   position: relative;
   display: inline-block;
   height: 24px;
@@ -818,7 +850,7 @@ table {
   /**
    * When input is not checked, we shift around the positioning of sibling/child selectors.
    */ }
-  .kuiFormSwitch .kuiFormSwitch__label {
+  .kuiSwitch .kuiSwitch__label {
     position: absolute;
     left: 0;
     padding-left: 60px;
@@ -826,16 +858,16 @@ table {
     line-height: 24px;
     font-size: 14px;
     cursor: pointer; }
-  .kuiFormSwitch .kuiFormSwitch__input {
+  .kuiSwitch .kuiSwitch__input {
     position: absolute;
     opacity: 0;
     z-index: -1; }
-  .kuiFormSwitch .kuiFormSwitch__input:focus + .kuiFormSwitch__body {
+  .kuiSwitch .kuiSwitch__input:focus + .kuiSwitch__body {
     background: #FFF; }
-    .kuiFormSwitch .kuiFormSwitch__input:focus + .kuiFormSwitch__body .kuiFormSwitch__thumb {
+    .kuiSwitch .kuiSwitch__input:focus + .kuiSwitch__body .kuiSwitch__thumb {
       border-color: #0079a5;
       background-color: #0079a5; }
-  .kuiFormSwitch .kuiFormSwitch__body {
+  .kuiSwitch .kuiSwitch__body {
     width: 52px;
     height: 24px;
     background: #fbfbfb;
@@ -844,7 +876,7 @@ table {
     position: relative;
     border-radius: 24px;
     vertical-align: middle; }
-  .kuiFormSwitch .kuiFormSwitch__thumb {
+  .kuiSwitch .kuiSwitch__thumb {
     position: absolute;
     width: 24px;
     height: 24px;
@@ -858,7 +890,7 @@ table {
     transition: border-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), background-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
     transition: border-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), background-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
     z-index: 1; }
-  .kuiFormSwitch .kuiFormSwitch__track {
+  .kuiSwitch .kuiSwitch__track {
     position: absolute;
     left: 0;
     top: 0;
@@ -866,7 +898,7 @@ table {
     bottom: 0;
     overflow: hidden;
     border-radius: 24px; }
-  .kuiFormSwitch .kuiFormSwitch__icon {
+  .kuiSwitch .kuiSwitch__icon {
     position: absolute;
     right: -40px;
     top: 0;
@@ -876,59 +908,27 @@ table {
     -webkit-mask: url("../src/components/icon/assets/cross.svg") center center no-repeat;
             mask: url("../src/components/icon/assets/cross.svg") center center no-repeat;
     background-color: #3F3F3F; }
-  .kuiFormSwitch .kuiFormSwitch__icon--checked {
+  .kuiSwitch .kuiSwitch__icon--checked {
     right: auto;
     left: -8px;
     background-color: #3F3F3F;
     -webkit-mask: url("../src/components/icon/assets/check.svg") center center no-repeat;
             mask: url("../src/components/icon/assets/check.svg") center center no-repeat; }
-  .kuiFormSwitch:hover .kuiFormSwitch__thumb {
+  .kuiSwitch:hover .kuiSwitch__thumb {
     -webkit-transform: scale(1.05);
             transform: scale(1.05); }
-  .kuiFormSwitch:active .kuiFormSwitch__thumb {
+  .kuiSwitch:active .kuiSwitch__thumb {
     -webkit-transform: scale(0.95);
             transform: scale(0.95); }
-  .kuiFormSwitch .kuiFormSwitch__input:not(:checked) ~ .kuiFormSwitch__body .kuiFormSwitch__thumb {
+  .kuiSwitch .kuiSwitch__input:not(:checked) ~ .kuiSwitch__body .kuiSwitch__thumb {
     left: -1px; }
-  .kuiFormSwitch .kuiFormSwitch__input:not(:checked) ~ .kuiFormSwitch__body .kuiFormSwitch__icon {
+  .kuiSwitch .kuiSwitch__input:not(:checked) ~ .kuiSwitch__body .kuiSwitch__icon {
     right: -8px; }
-    .kuiFormSwitch .kuiFormSwitch__input:not(:checked) ~ .kuiFormSwitch__body .kuiFormSwitch__icon.kuiFormSwitch__icon--checked {
+    .kuiSwitch .kuiSwitch__input:not(:checked) ~ .kuiSwitch__body .kuiSwitch__icon.kuiSwitch__icon--checked {
       right: auto;
       left: -40px; }
 
-.kuiFormText {
-  border: none;
-  font-size: 14px;
-  font-family: "Roboto", Helvetica, Arial, sans-serif;
-  padding: 12px;
-  color: #3F3F3F;
-  min-width: 256px;
-  background: #fbfbfb;
-  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.08), inset -400px 0 0 0 #fbfbfb;
-  transition: box-shadow 250ms ease-in, background 250ms ease-in;
-  max-width: 400px;
-  border-radius: 0; }
-  .kuiFormText:focus {
-    background: #FFF;
-    box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.16), inset 0 0 0 0 #FFF, inset 0 -2px 0 0 #0079a5; }
-
-.kuiFormTextarea {
-  border: none;
-  font-size: 14px;
-  font-family: "Roboto", Helvetica, Arial, sans-serif;
-  padding: 12px;
-  color: #3F3F3F;
-  min-width: 256px;
-  background: #fbfbfb;
-  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.08), inset -400px 0 0 0 #fbfbfb;
-  transition: box-shadow 250ms ease-in, background 250ms ease-in;
-  max-width: 400px;
-  border-radius: 0; }
-  .kuiFormTextarea:focus {
-    background: #FFF;
-    box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.16), inset 0 0 0 0 #FFF, inset 0 -2px 0 0 #0079a5; }
-
-.kuiFormNumber {
+.kuiTextArea {
   border: none;
   font-size: 14px;
   font-family: "Roboto", Helvetica, Arial, sans-serif;
@@ -940,7 +940,7 @@ table {
   transition: box-shadow 250ms ease-in, background 250ms ease-in;
   max-width: 400px;
   border-radius: 0; }
-  .kuiFormNumber:focus {
+  .kuiTextArea:focus {
     background: #FFF;
     box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.16), inset 0 0 0 0 #FFF, inset 0 -2px 0 0 #0079a5; }
 
diff --git a/ui_framework/doc_site/src/views/form/form.js b/ui_framework/doc_site/src/views/form/form.js
index 626e046a7db28..421d7db52b4b7 100644
--- a/ui_framework/doc_site/src/views/form/form.js
+++ b/ui_framework/doc_site/src/views/form/form.js
@@ -6,17 +6,17 @@ import {
   KuiButton,
   KuiPopover,
   KuiForm,
-  KuiFormCheckbox,
-  KuiFormNumber,
-  KuiFormPassword,
-  KuiFormRadio,
-  KuiFormRange,
+  KuiCheckbox,
+  KuiFieldNumber,
+  KuiFieldPassword,
+  KuiRadio,
+  KuiRange,
   KuiFormRow,
-  KuiFormSearch,
-  KuiFormSelect,
-  KuiFormSwitch,
-  KuiFormText,
-  KuiFormTextarea,
+  KuiFieldSearch,
+  KuiSelect,
+  KuiSwitch,
+  KuiFieldText,
+  KuiTextArea,
 } from '../../../../components';
 
 export default class extends Component {
@@ -58,7 +58,7 @@ export default class extends Component {
           label="Number"
           helpText="Any number between 1 and 5"
         >
-          <KuiFormNumber name="number" id="number" min={1} max={5} />
+          <KuiFieldNumber name="number" id="number" min={1} max={5} />
         </KuiFormRow>
         <KuiFormRow
           id="first"
@@ -67,34 +67,34 @@ export default class extends Component {
           invalid
           errors={['Your name is not that cool.', 'Errors could be an array of errors, like this.']}
         >
-          <KuiFormText id="first" name="first" />
+          <KuiFieldText id="first" name="first" />
         </KuiFormRow>
         <KuiFormRow
           id="last"
           label="Last name with icon"
           icon="user"
         >
-          <KuiFormText id="last" name="first" placeholder="Some placeholder text" />
+          <KuiFieldText id="last" name="first" placeholder="Some placeholder text" />
         </KuiFormRow>
         <KuiFormRow
           id="pass"
           label="Password"
           icon="lock"
         >
-          <KuiFormPassword name="pass" id="pass" />
+          <KuiFieldPassword name="pass" id="pass" />
         </KuiFormRow>
         <KuiFormRow
           id="range"
           label="Range"
         >
-          <KuiFormRange min={0} max={100} name="range" id="range" />
+          <KuiRange min={0} max={100} name="range" id="range" />
         </KuiFormRow>
         <KuiFormRow
           id="search1"
           label="Search"
           icon="search"
         >
-          <KuiFormSearch label="Search" id="search1" name="search1" placeholder="Search..." />
+          <KuiFieldSearch label="Search" id="search1" name="search1" placeholder="Search..." />
         </KuiFormRow>
         <KuiFormRow
           id="dropdown"
@@ -102,21 +102,21 @@ export default class extends Component {
           icon="arrowDown"
           className="kuiFormRow--select"
         >
-          <KuiFormSelect options={formOptions} label="Dropdown" name="dropdown" id="dropdown"/>
+          <KuiSelect options={formOptions} label="Dropdown" name="dropdown" id="dropdown"/>
         </KuiFormRow>
         <KuiFormRow label="Textarea" id="textarea">
-          <KuiFormTextarea id="textarea" name="textarea"/>
+          <KuiTextArea id="textarea" name="textarea"/>
         </KuiFormRow>
         <KuiFormRow>
-          <KuiFormSwitch id="switch" name="switch" label="Should we do this?"/>
+          <KuiSwitch id="switch" name="switch" label="Should we do this?"/>
         </KuiFormRow>
         <KuiFormRow label="You should always use more than one checkbox">
-          <KuiFormCheckbox options={formOptions} />
+          <KuiCheckbox options={formOptions} />
         </KuiFormRow>
         <KuiFormRow label="Another error example" invalid>
-          <KuiFormCheckbox options={formOptions} />
+          <KuiCheckbox options={formOptions} />
         </KuiFormRow>
-        <KuiFormRadio />
+        <KuiRadio />
       </KuiForm>
     );
 
diff --git a/ui_framework/src/components/form/_index.scss b/ui_framework/src/components/form/_index.scss
index 6c090e894e4de..0e5c3264c6a27 100644
--- a/ui_framework/src/components/form/_index.scss
+++ b/ui_framework/src/components/form/_index.scss
@@ -1,7 +1,7 @@
 $kuiFormMaxWidth: 400px;
 $kuiFormBackgroundColor: tintOrShade($kuiColorLightestShade, 60%, 25%);
 
-@mixin kuiFormTextStyle {
+@mixin kuiFieldStyle {
   border: none;
   font-size: $kuiFontSizeS;
   font-family: $kuiFontFamily;
@@ -22,12 +22,12 @@ $kuiFormBackgroundColor: tintOrShade($kuiColorLightestShade, 60%, 25%);
 
 @import 'form';
 @import 'form_row/index';
-@import 'form_checkbox/index';
-@import 'form_password/index';
-@import 'form_range/index';
-@import 'form_search/index';
-@import 'form_select/index';
-@import 'form_switch/index';
-@import 'form_text/index';
-@import 'form_textarea/index';
-@import 'form_number/index';
+@import 'checkbox/index';
+@import 'field_number/index';
+@import 'field_password/index';
+@import 'field_search/index';
+@import 'field_text/index';
+@import 'range/index';
+@import 'select/index';
+@import 'switch/index';
+@import 'text_area/index';
diff --git a/ui_framework/src/components/form/form_checkbox/_form_checkbox.scss b/ui_framework/src/components/form/checkbox/_checkbox.scss
similarity index 74%
rename from ui_framework/src/components/form/form_checkbox/_form_checkbox.scss
rename to ui_framework/src/components/form/checkbox/_checkbox.scss
index 0a277e5ce3eb5..171c9a1e011a8 100644
--- a/ui_framework/src/components/form/form_checkbox/_form_checkbox.scss
+++ b/ui_framework/src/components/form/checkbox/_checkbox.scss
@@ -1,9 +1,9 @@
-.kuiFormCheckbox {
+.kuiCheckbox {
   position: relative;
   height: $kuiSizeL;
   margin-top: $kuiSizeS;
 
-  .kuiFormCheckbox__label {
+  .kuiCheckbox__label {
     position: absolute;
     padding-left: $kuiSizeXL;
     line-height: $kuiSizeL;
@@ -14,7 +14,7 @@
     cursor: pointer;
   }
 
-  .kuiFormCheckbox__square {
+  .kuiCheckbox__square {
     position: absolute;
     height: $kuiSizeL;
     width: $kuiSizeL;
@@ -24,26 +24,26 @@
     z-index: 0;
   }
 
-  .kuiFormCheckbox__check {
+  .kuiCheckbox__check {
     height: 100%;
     width: 100%;
   }
 
-  .kuiFormCheckbox__input {
+  .kuiCheckbox__input {
     position: absolute;
     opacity: 0;
 
-    &:checked ~ .kuiFormCheckbox__square .kuiFormCheckbox__check {
+    &:checked ~ .kuiCheckbox__square .kuiCheckbox__check {
       background-color: $kuiTextColor;
       mask: url('../src/components/icon/assets/check.svg') center center no-repeat;
     }
 
-    &:focus ~ .kuiFormCheckbox__square {
+    &:focus ~ .kuiCheckbox__square {
       background-color: $kuiFocusBackgroundColor;
       border-color: $kuiColorPrimary;
     }
 
-    &:checked:focus ~ .kuiFormCheckbox__square .kuiFormCheckbox__check {
+    &:checked:focus ~ .kuiCheckbox__square .kuiCheckbox__check {
       background-color: $kuiTextColor;
       mask: url('../src/components/icon/assets/check.svg') center center no-repeat;
     }
diff --git a/ui_framework/src/components/form/checkbox/_index.scss b/ui_framework/src/components/form/checkbox/_index.scss
new file mode 100644
index 0000000000000..e6e53eb712869
--- /dev/null
+++ b/ui_framework/src/components/form/checkbox/_index.scss
@@ -0,0 +1 @@
+@import 'checkbox';
diff --git a/ui_framework/src/components/form/checkbox/checkbox.js b/ui_framework/src/components/form/checkbox/checkbox.js
new file mode 100644
index 0000000000000..20bf2aaf0e535
--- /dev/null
+++ b/ui_framework/src/components/form/checkbox/checkbox.js
@@ -0,0 +1,28 @@
+import React, {
+  PropTypes,
+} from 'react';
+import classNames from 'classnames';
+
+export const KuiCheckbox = ({ options, className, ...rest }) => {
+  const classes = classNames('kuiCheckbox', className);
+
+  return (
+    <div>
+      {options.map(function (option, index) {
+        return (
+          <div className={classes} key={index} {...rest}>
+            <input className="kuiCheckbox__input" type="checkbox" id={index} />
+            <div className="kuiCheckbox__square">
+              <div className="kuiCheckbox__check" />
+            </div>
+            <label className="kuiCheckbox__label" htmlFor={index}>{option}</label>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+KuiCheckbox.propTypes = {
+  options: PropTypes.array.isRequired,
+};
diff --git a/ui_framework/src/components/form/form_range/form_range.test.js b/ui_framework/src/components/form/checkbox/checkbox.test.js
similarity index 50%
rename from ui_framework/src/components/form/form_range/form_range.test.js
rename to ui_framework/src/components/form/checkbox/checkbox.test.js
index ad2d5e8de675d..74479a5a2c408 100644
--- a/ui_framework/src/components/form/form_range/form_range.test.js
+++ b/ui_framework/src/components/form/checkbox/checkbox.test.js
@@ -1,13 +1,13 @@
 import React from 'react';
 import { render } from 'enzyme';
-import { requiredProps } from '../../test/required_props';
+import { requiredProps } from '../../../test/required_props';
 
-import { KuiFormRange } from './form_range';
+import { KuiCheckbox } from './checkbox';
 
-describe('KuiFormRange', () => {
+describe('KuiCheckbox', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiFormRange { ...requiredProps } />
+      <KuiCheckbox { ...requiredProps } />
     );
 
     expect(component)
diff --git a/ui_framework/src/components/form/checkbox/index.js b/ui_framework/src/components/form/checkbox/index.js
new file mode 100644
index 0000000000000..4551ccb9b4155
--- /dev/null
+++ b/ui_framework/src/components/form/checkbox/index.js
@@ -0,0 +1 @@
+export { KuiCheckbox } from './checkbox';
diff --git a/ui_framework/src/components/form/field_number/_field_number.scss b/ui_framework/src/components/form/field_number/_field_number.scss
new file mode 100644
index 0000000000000..4e7c4bcc0fd65
--- /dev/null
+++ b/ui_framework/src/components/form/field_number/_field_number.scss
@@ -0,0 +1,3 @@
+.kuiFieldNumber {
+  @include kuiFieldStyle;
+}
diff --git a/ui_framework/src/components/form/field_number/_index.scss b/ui_framework/src/components/form/field_number/_index.scss
new file mode 100644
index 0000000000000..497eee52289d4
--- /dev/null
+++ b/ui_framework/src/components/form/field_number/_index.scss
@@ -0,0 +1 @@
+@import 'field_number';
diff --git a/ui_framework/src/components/form/form_number/form_number.js b/ui_framework/src/components/form/field_number/field_number.js
similarity index 69%
rename from ui_framework/src/components/form/form_number/form_number.js
rename to ui_framework/src/components/form/field_number/field_number.js
index 3a6c5e50f8346..3a237d6cfa199 100644
--- a/ui_framework/src/components/form/form_number/form_number.js
+++ b/ui_framework/src/components/form/field_number/field_number.js
@@ -3,8 +3,8 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 
-export const KuiFormNumber = ({ className, id, placeholder, name, min, max, value, ...rest }) => {
-  const classes = classNames('kuiFormNumber', className);
+export const KuiFieldNumber = ({ className, id, placeholder, name, min, max, value, ...rest }) => {
+  const classes = classNames('kuiFieldNumber', className);
 
   return (
     <input
@@ -21,7 +21,7 @@ export const KuiFormNumber = ({ className, id, placeholder, name, min, max, valu
   );
 };
 
-KuiFormNumber.propTypes = {
+KuiFieldNumber.propTypes = {
   id: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   min: PropTypes.number,
@@ -30,7 +30,7 @@ KuiFormNumber.propTypes = {
   value: PropTypes.number,
 };
 
-KuiFormNumber.defaultProps = {
+KuiFieldNumber.defaultProps = {
   value: undefined,
 };
 
diff --git a/ui_framework/src/components/form/field_number/field_number.test.js b/ui_framework/src/components/form/field_number/field_number.test.js
new file mode 100644
index 0000000000000..2fb206e545c59
--- /dev/null
+++ b/ui_framework/src/components/form/field_number/field_number.test.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../../test/required_props';
+
+import { KuiFieldNumber } from './field_number';
+
+describe('KuiFieldNumber', () => {
+  test('is rendered', () => {
+    const component = render(
+      <KuiFieldNumber { ...requiredProps } />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+});
diff --git a/ui_framework/src/components/form/field_number/index.js b/ui_framework/src/components/form/field_number/index.js
new file mode 100644
index 0000000000000..5ae02c1c69034
--- /dev/null
+++ b/ui_framework/src/components/form/field_number/index.js
@@ -0,0 +1 @@
+export { KuiFieldNumber } from './field_number';
diff --git a/ui_framework/src/components/form/field_password/_field_password.scss b/ui_framework/src/components/form/field_password/_field_password.scss
new file mode 100644
index 0000000000000..6b511ea2298fb
--- /dev/null
+++ b/ui_framework/src/components/form/field_password/_field_password.scss
@@ -0,0 +1,3 @@
+.kuiFieldPassword {
+  @include kuiFieldStyle;
+}
diff --git a/ui_framework/src/components/form/field_password/_index.scss b/ui_framework/src/components/form/field_password/_index.scss
new file mode 100644
index 0000000000000..aab5cd9d3b3a2
--- /dev/null
+++ b/ui_framework/src/components/form/field_password/_index.scss
@@ -0,0 +1 @@
+@import 'field_password';
diff --git a/ui_framework/src/components/form/form_password/form_password.js b/ui_framework/src/components/form/field_password/field_password.js
similarity index 66%
rename from ui_framework/src/components/form/form_password/form_password.js
rename to ui_framework/src/components/form/field_password/field_password.js
index 4b95dbce1e845..c6d2c2ea47692 100644
--- a/ui_framework/src/components/form/form_password/form_password.js
+++ b/ui_framework/src/components/form/field_password/field_password.js
@@ -3,8 +3,8 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 
-export const KuiFormPassword = ({ className, id, name, placeholder, value, ...rest }) => {
-  const classes = classNames('kuiFormPassword', className);
+export const KuiFieldPassword = ({ className, id, name, placeholder, value, ...rest }) => {
+  const classes = classNames('kuiFieldPassword', className);
 
   return (
     <input
@@ -19,13 +19,13 @@ export const KuiFormPassword = ({ className, id, name, placeholder, value, ...re
   );
 };
 
-KuiFormPassword.propTypes = {
+KuiFieldPassword.propTypes = {
   name: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
   placeholder: PropTypes.string,
   value: PropTypes.string,
 };
 
-KuiFormPassword.defaultProps = {
+KuiFieldPassword.defaultProps = {
   value: undefined,
 };
diff --git a/ui_framework/src/components/form/field_password/field_password.test.js b/ui_framework/src/components/form/field_password/field_password.test.js
new file mode 100644
index 0000000000000..a70c135388164
--- /dev/null
+++ b/ui_framework/src/components/form/field_password/field_password.test.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../../test/required_props';
+
+import { KuiFieldPassword } from './field_password';
+
+describe('KuiFieldPassword', () => {
+  test('is rendered', () => {
+    const component = render(
+      <KuiFieldPassword { ...requiredProps } />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+});
diff --git a/ui_framework/src/components/form/field_password/index.js b/ui_framework/src/components/form/field_password/index.js
new file mode 100644
index 0000000000000..1596934c1917a
--- /dev/null
+++ b/ui_framework/src/components/form/field_password/index.js
@@ -0,0 +1 @@
+export { KuiFieldPassword } from './field_password';
diff --git a/ui_framework/src/components/form/field_search/_field_search.scss b/ui_framework/src/components/form/field_search/_field_search.scss
new file mode 100644
index 0000000000000..15530ebedc5c6
--- /dev/null
+++ b/ui_framework/src/components/form/field_search/_field_search.scss
@@ -0,0 +1,4 @@
+.kuiFieldSearch {
+  @include kuiFieldStyle;
+}
+
diff --git a/ui_framework/src/components/form/field_search/_index.scss b/ui_framework/src/components/form/field_search/_index.scss
new file mode 100644
index 0000000000000..b9652e5dde154
--- /dev/null
+++ b/ui_framework/src/components/form/field_search/_index.scss
@@ -0,0 +1 @@
+@import 'field_search';
diff --git a/ui_framework/src/components/form/form_search/form_search.js b/ui_framework/src/components/form/field_search/field_search.js
similarity index 67%
rename from ui_framework/src/components/form/form_search/form_search.js
rename to ui_framework/src/components/form/field_search/field_search.js
index b23bf6351078e..c2ae98da1436c 100644
--- a/ui_framework/src/components/form/form_search/form_search.js
+++ b/ui_framework/src/components/form/field_search/field_search.js
@@ -4,8 +4,8 @@ import React, {
 import classNames from 'classnames';
 
 
-export const KuiFormSearch = ({ className, id, name, placeholder, value, ...rest }) => {
-  const classes = classNames('kuiFormSearch', className);
+export const KuiFieldSearch = ({ className, id, name, placeholder, value, ...rest }) => {
+  const classes = classNames('kuiFieldSearch', className);
 
   return (
     <input
@@ -20,13 +20,13 @@ export const KuiFormSearch = ({ className, id, name, placeholder, value, ...rest
   );
 };
 
-KuiFormSearch.propTypes = {
+KuiFieldSearch.propTypes = {
   name: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
   placeholder: PropTypes.string,
   value: PropTypes.string,
 };
 
-KuiFormSearch.defaultProps = {
+KuiFieldSearch.defaultProps = {
   value: undefined,
 };
diff --git a/ui_framework/src/components/form/field_search/field_search.test.js b/ui_framework/src/components/form/field_search/field_search.test.js
new file mode 100644
index 0000000000000..bf703e790687d
--- /dev/null
+++ b/ui_framework/src/components/form/field_search/field_search.test.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../../test/required_props';
+
+import { KuiFieldSearch } from './field_search';
+
+describe('KuiFieldSearch', () => {
+  test('is rendered', () => {
+    const component = render(
+      <KuiFieldSearch { ...requiredProps } />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+});
diff --git a/ui_framework/src/components/form/field_search/index.js b/ui_framework/src/components/form/field_search/index.js
new file mode 100644
index 0000000000000..d91a57353e651
--- /dev/null
+++ b/ui_framework/src/components/form/field_search/index.js
@@ -0,0 +1 @@
+export { KuiFieldSearch } from './field_search';
diff --git a/ui_framework/src/components/form/field_text/_field_text.scss b/ui_framework/src/components/form/field_text/_field_text.scss
new file mode 100644
index 0000000000000..4b8afbedfb849
--- /dev/null
+++ b/ui_framework/src/components/form/field_text/_field_text.scss
@@ -0,0 +1,3 @@
+.kuiFieldText {
+  @include kuiFieldStyle;
+}
diff --git a/ui_framework/src/components/form/field_text/_index.scss b/ui_framework/src/components/form/field_text/_index.scss
new file mode 100644
index 0000000000000..937e44ac8d6e6
--- /dev/null
+++ b/ui_framework/src/components/form/field_text/_index.scss
@@ -0,0 +1 @@
+@import 'field_text';
diff --git a/ui_framework/src/components/form/form_text/form_text.js b/ui_framework/src/components/form/field_text/field_text.js
similarity index 67%
rename from ui_framework/src/components/form/form_text/form_text.js
rename to ui_framework/src/components/form/field_text/field_text.js
index daaf3b7459fc5..970e36e27447e 100644
--- a/ui_framework/src/components/form/form_text/form_text.js
+++ b/ui_framework/src/components/form/field_text/field_text.js
@@ -3,8 +3,8 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 
-export const KuiFormText = ({ id, name, placeholder, value, className, ...rest }) => {
-  const classes = classNames('kuiFormText', className);
+export const KuiFieldText = ({ id, name, placeholder, value, className, ...rest }) => {
+  const classes = classNames('kuiFieldText', className);
 
   return (
     <input
@@ -19,13 +19,13 @@ export const KuiFormText = ({ id, name, placeholder, value, className, ...rest }
   );
 };
 
-KuiFormText.propTypes = {
+KuiFieldText.propTypes = {
   name: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
   placeholder: PropTypes.string,
   value: PropTypes.string,
 };
 
-KuiFormText.defaultProps = {
+KuiFieldText.defaultProps = {
   value: undefined,
 };
diff --git a/ui_framework/src/components/form/form_search/form_search.test.js b/ui_framework/src/components/form/field_text/field_text.test.js
similarity index 50%
rename from ui_framework/src/components/form/form_search/form_search.test.js
rename to ui_framework/src/components/form/field_text/field_text.test.js
index 1bff1d0ab008e..f6061c3ec1c3c 100644
--- a/ui_framework/src/components/form/form_search/form_search.test.js
+++ b/ui_framework/src/components/form/field_text/field_text.test.js
@@ -1,13 +1,13 @@
 import React from 'react';
 import { render } from 'enzyme';
-import { requiredProps } from '../../test/required_props';
+import { requiredProps } from '../../../test/required_props';
 
-import { KuiFormSearch } from './form_search';
+import { KuiFieldText } from './field_text';
 
-describe('KuiFormSearch', () => {
+describe('KuiFieldText', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiFormSearch { ...requiredProps } />
+      <KuiFieldText { ...requiredProps } />
     );
 
     expect(component)
diff --git a/ui_framework/src/components/form/field_text/index.js b/ui_framework/src/components/form/field_text/index.js
new file mode 100644
index 0000000000000..ff6960d5f2af6
--- /dev/null
+++ b/ui_framework/src/components/form/field_text/index.js
@@ -0,0 +1 @@
+export { KuiFieldText } from './field_text';
diff --git a/ui_framework/src/components/form/form_checkbox/_index.scss b/ui_framework/src/components/form/form_checkbox/_index.scss
deleted file mode 100644
index 726bd1f78c6b1..0000000000000
--- a/ui_framework/src/components/form/form_checkbox/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'form_checkbox';
diff --git a/ui_framework/src/components/form/form_checkbox/form_checkbox.js b/ui_framework/src/components/form/form_checkbox/form_checkbox.js
deleted file mode 100644
index 3b95f226109a3..0000000000000
--- a/ui_framework/src/components/form/form_checkbox/form_checkbox.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React, {
-  PropTypes,
-} from 'react';
-import classNames from 'classnames';
-
-
-export const KuiFormCheckbox = ({ options, className, ...rest }) => {
-  const classes = classNames('kuiFormCheckbox', className);
-
-  return (
-    <div>
-      {options.map(function (option, index) {
-        return (
-          <div className={classes} key={index} {...rest}>
-            <input className="kuiFormCheckbox__input" type="checkbox" id={index} />
-            <div className="kuiFormCheckbox__square">
-              <div className="kuiFormCheckbox__check" />
-            </div>
-            <label className="kuiFormCheckbox__label" htmlFor={index}>{option}</label>
-          </div>
-        );
-      })}
-    </div>
-  );
-};
-
-KuiFormCheckbox.propTypes = {
-  options: PropTypes.array.isRequired,
-};
diff --git a/ui_framework/src/components/form/form_checkbox/form_checkbox.test.js b/ui_framework/src/components/form/form_checkbox/form_checkbox.test.js
deleted file mode 100644
index 27400c22d969e..0000000000000
--- a/ui_framework/src/components/form/form_checkbox/form_checkbox.test.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import { render } from 'enzyme';
-import { requiredProps } from '../../test/required_props';
-
-import { KuiFormCheckbox } from './form_checkbox';
-
-describe('KuiFormCheckbox', () => {
-  test('is rendered', () => {
-    const component = render(
-      <KuiFormCheckbox { ...requiredProps } />
-    );
-
-    expect(component)
-      .toMatchSnapshot();
-  });
-});
diff --git a/ui_framework/src/components/form/form_checkbox/index.js b/ui_framework/src/components/form/form_checkbox/index.js
deleted file mode 100644
index 80b29593e397e..0000000000000
--- a/ui_framework/src/components/form/form_checkbox/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { KuiFormCheckbox } from './form_checkbox';
diff --git a/ui_framework/src/components/form/form_number/_form_number.scss b/ui_framework/src/components/form/form_number/_form_number.scss
deleted file mode 100644
index 5a08f3048f2db..0000000000000
--- a/ui_framework/src/components/form/form_number/_form_number.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.kuiFormNumber {
-  @include kuiFormTextStyle;
-}
diff --git a/ui_framework/src/components/form/form_number/_index.scss b/ui_framework/src/components/form/form_number/_index.scss
deleted file mode 100644
index 26306395f5745..0000000000000
--- a/ui_framework/src/components/form/form_number/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'form_number';
diff --git a/ui_framework/src/components/form/form_number/form_number.test.js b/ui_framework/src/components/form/form_number/form_number.test.js
deleted file mode 100644
index 26b369763531b..0000000000000
--- a/ui_framework/src/components/form/form_number/form_number.test.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import { render } from 'enzyme';
-import { requiredProps } from '../../test/required_props';
-
-import { KuiFormNumber } from './form_number';
-
-describe('KuiFormNumber', () => {
-  test('is rendered', () => {
-    const component = render(
-      <KuiFormNumber { ...requiredProps } />
-    );
-
-    expect(component)
-      .toMatchSnapshot();
-  });
-});
diff --git a/ui_framework/src/components/form/form_number/index.js b/ui_framework/src/components/form/form_number/index.js
deleted file mode 100644
index ca184d569b51b..0000000000000
--- a/ui_framework/src/components/form/form_number/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { KuiFormNumber } from './form_number';
diff --git a/ui_framework/src/components/form/form_password/_form_password.scss b/ui_framework/src/components/form/form_password/_form_password.scss
deleted file mode 100644
index 95c32f4836d34..0000000000000
--- a/ui_framework/src/components/form/form_password/_form_password.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.kuiFormPassword {
-  @include kuiFormTextStyle;
-}
diff --git a/ui_framework/src/components/form/form_password/_index.scss b/ui_framework/src/components/form/form_password/_index.scss
deleted file mode 100644
index a23ac589b0639..0000000000000
--- a/ui_framework/src/components/form/form_password/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'form_password';
diff --git a/ui_framework/src/components/form/form_password/form_password.test.js b/ui_framework/src/components/form/form_password/form_password.test.js
deleted file mode 100644
index 8c3fecf10bbd8..0000000000000
--- a/ui_framework/src/components/form/form_password/form_password.test.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import { render } from 'enzyme';
-import { requiredProps } from '../../test/required_props';
-
-import { KuiFormPassword } from './form_password';
-
-describe('KuiFormPassword', () => {
-  test('is rendered', () => {
-    const component = render(
-      <KuiFormPassword { ...requiredProps } />
-    );
-
-    expect(component)
-      .toMatchSnapshot();
-  });
-});
diff --git a/ui_framework/src/components/form/form_password/index.js b/ui_framework/src/components/form/form_password/index.js
deleted file mode 100644
index 35863bb904332..0000000000000
--- a/ui_framework/src/components/form/form_password/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { KuiFormPassword } from './form_password';
diff --git a/ui_framework/src/components/form/form_radio/_form_radio.scss b/ui_framework/src/components/form/form_radio/_form_radio.scss
deleted file mode 100644
index 3da606080b4ba..0000000000000
--- a/ui_framework/src/components/form/form_radio/_form_radio.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@include component('kuiFormRadio') {
-
-}
diff --git a/ui_framework/src/components/form/form_radio/_index.scss b/ui_framework/src/components/form/form_radio/_index.scss
deleted file mode 100644
index bce208659143b..0000000000000
--- a/ui_framework/src/components/form/form_radio/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'form_radio';
diff --git a/ui_framework/src/components/form/form_radio/form_radio.js b/ui_framework/src/components/form/form_radio/form_radio.js
deleted file mode 100644
index cd6cee2dd36b1..0000000000000
--- a/ui_framework/src/components/form/form_radio/form_radio.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React, {
-  PropTypes,
-} from 'react';
-import classNames from 'classnames';
-
-export const KuiFormRadio = ({ children, className, ...rest }) => {
-  const classes = classNames('kuiFormRadio', className);
-
-  return (
-    <div
-      className={classes}
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-};
-
-KuiFormRadio.propTypes = {
-};
diff --git a/ui_framework/src/components/form/form_radio/index.js b/ui_framework/src/components/form/form_radio/index.js
deleted file mode 100644
index ad9c1b49287c0..0000000000000
--- a/ui_framework/src/components/form/form_radio/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { KuiFormRadio } from './form_radio';
diff --git a/ui_framework/src/components/form/form_range/index.js b/ui_framework/src/components/form/form_range/index.js
deleted file mode 100644
index d32fd6305d206..0000000000000
--- a/ui_framework/src/components/form/form_range/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { KuiFormRange } from './form_range';
diff --git a/ui_framework/src/components/form/form_row/form_row.test.js b/ui_framework/src/components/form/form_row/form_row.test.js
index 505021f7c77db..9f1d85f2586a6 100644
--- a/ui_framework/src/components/form/form_row/form_row.test.js
+++ b/ui_framework/src/components/form/form_row/form_row.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from 'enzyme';
-import { requiredProps } from '../../test/required_props';
+import { requiredProps } from '../../../test/required_props';
 
 import { KuiFormRow } from './form_row';
 
diff --git a/ui_framework/src/components/form/form_search/_form_search.scss b/ui_framework/src/components/form/form_search/_form_search.scss
deleted file mode 100644
index dffb17bd18da1..0000000000000
--- a/ui_framework/src/components/form/form_search/_form_search.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.kuiFormSearch {
-  @include kuiFormTextStyle;
-}
-
diff --git a/ui_framework/src/components/form/form_search/_index.scss b/ui_framework/src/components/form/form_search/_index.scss
deleted file mode 100644
index 587167cff3c32..0000000000000
--- a/ui_framework/src/components/form/form_search/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'form_search';
diff --git a/ui_framework/src/components/form/form_search/index.js b/ui_framework/src/components/form/form_search/index.js
deleted file mode 100644
index cf022840b948a..0000000000000
--- a/ui_framework/src/components/form/form_search/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { KuiFormSearch } from './form_search';
diff --git a/ui_framework/src/components/form/form_select/_form_select.scss b/ui_framework/src/components/form/form_select/_form_select.scss
deleted file mode 100644
index cca3b4333c784..0000000000000
--- a/ui_framework/src/components/form/form_select/_form_select.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.kuiFormSelect {
-  appearance: none;
-  @include kuiFormTextStyle;
-}
-
-.kuiFormSelect::-ms-expand {
-  display: none;
-}
-
diff --git a/ui_framework/src/components/form/form_select/_index.scss b/ui_framework/src/components/form/form_select/_index.scss
deleted file mode 100644
index d24a6c02fd319..0000000000000
--- a/ui_framework/src/components/form/form_select/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'form_select';
diff --git a/ui_framework/src/components/form/form_select/form_select.test.js b/ui_framework/src/components/form/form_select/form_select.test.js
deleted file mode 100644
index b23deb9ed0684..0000000000000
--- a/ui_framework/src/components/form/form_select/form_select.test.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import { render } from 'enzyme';
-import { requiredProps } from '../../test/required_props';
-
-import { KuiFormSelect } from './form_select';
-
-describe('KuiFormSelect', () => {
-  test('is rendered', () => {
-    const component = render(
-      <KuiFormSelect { ...requiredProps } />
-    );
-
-    expect(component)
-      .toMatchSnapshot();
-  });
-});
diff --git a/ui_framework/src/components/form/form_select/index.js b/ui_framework/src/components/form/form_select/index.js
deleted file mode 100644
index 178c117489fd3..0000000000000
--- a/ui_framework/src/components/form/form_select/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { KuiFormSelect } from './form_select';
diff --git a/ui_framework/src/components/form/form_switch/_index.scss b/ui_framework/src/components/form/form_switch/_index.scss
deleted file mode 100644
index 2a244a2b07053..0000000000000
--- a/ui_framework/src/components/form/form_switch/_index.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-$kuiFormSwitchHeight: $kuiSizeL;
-$kuiFormSwitchWidth: ($kuiSizeL * 2) + $kuiSizeXS;
-$kuiFormSwitchThumbSize: $kuiSizeL;
-
-@import 'form_switch';
diff --git a/ui_framework/src/components/form/form_switch/form_switch.js b/ui_framework/src/components/form/form_switch/form_switch.js
deleted file mode 100644
index faf8ff105bc7e..0000000000000
--- a/ui_framework/src/components/form/form_switch/form_switch.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, {
-  PropTypes,
-} from 'react';
-import classNames from 'classnames';
-
-export const KuiFormSwitch = ({ label, id, name, defaultChecked, className, ...rest }) => {
-  const classes = classNames('kuiFormSwitch', className);
-
-  return (
-    <div className={classes} {...rest}>
-      <input className="kuiFormSwitch__input" name={name} id={id} type="checkbox" defaultChecked={defaultChecked} />
-      <span className="kuiFormSwitch__body">
-        <span className="kuiFormSwitch__thumb" />
-        <span className="kuiFormSwitch__track">
-          <span className="kuiFormSwitch__icon" />
-          <span className="kuiFormSwitch__icon kuiFormSwitch__icon--checked" />
-        </span>
-      </span>
-      <label className="kuiFormSwitch__label" htmlFor={id}>{label}</label>
-    </div>
-  );
-};
-
-KuiFormSwitch.propTypes = {
-  name: PropTypes.string.isRequired,
-  id: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  checked: PropTypes.bool,
-};
-
-KuiFormSwitch.defaultProps = {
-  defaultChecked: false,
-};
diff --git a/ui_framework/src/components/form/form_switch/form_switch.test.js b/ui_framework/src/components/form/form_switch/form_switch.test.js
deleted file mode 100644
index 718903049f190..0000000000000
--- a/ui_framework/src/components/form/form_switch/form_switch.test.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import { render } from 'enzyme';
-import { requiredProps } from '../../test/required_props';
-
-import { KuiFormSwitch } from './form_switch';
-
-describe('KuiFormSwitch', () => {
-  test('is rendered', () => {
-    const component = render(
-      <KuiFormSwitch { ...requiredProps } />
-    );
-
-    expect(component)
-      .toMatchSnapshot();
-  });
-});
diff --git a/ui_framework/src/components/form/form_switch/index.js b/ui_framework/src/components/form/form_switch/index.js
deleted file mode 100644
index b56ca129d863d..0000000000000
--- a/ui_framework/src/components/form/form_switch/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { KuiFormSwitch } from './form_switch';
diff --git a/ui_framework/src/components/form/form_text/_form_text.scss b/ui_framework/src/components/form/form_text/_form_text.scss
deleted file mode 100644
index 5fc42c441f3a0..0000000000000
--- a/ui_framework/src/components/form/form_text/_form_text.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.kuiFormText {
-  @include kuiFormTextStyle;
-}
diff --git a/ui_framework/src/components/form/form_text/_index.scss b/ui_framework/src/components/form/form_text/_index.scss
deleted file mode 100644
index 9d14b0f1aaba7..0000000000000
--- a/ui_framework/src/components/form/form_text/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'form_text';
diff --git a/ui_framework/src/components/form/form_text/index.js b/ui_framework/src/components/form/form_text/index.js
deleted file mode 100644
index e23819bb8d33f..0000000000000
--- a/ui_framework/src/components/form/form_text/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { KuiFormText } from './form_text';
diff --git a/ui_framework/src/components/form/form_textarea/_form_textarea.scss b/ui_framework/src/components/form/form_textarea/_form_textarea.scss
deleted file mode 100644
index 96229da237d0c..0000000000000
--- a/ui_framework/src/components/form/form_textarea/_form_textarea.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.kuiFormTextarea {
-  @include kuiFormTextStyle;
-}
diff --git a/ui_framework/src/components/form/form_textarea/_index.scss b/ui_framework/src/components/form/form_textarea/_index.scss
deleted file mode 100644
index c602392349ed7..0000000000000
--- a/ui_framework/src/components/form/form_textarea/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'form_textarea';
diff --git a/ui_framework/src/components/form/form_textarea/form_textarea.test.js b/ui_framework/src/components/form/form_textarea/form_textarea.test.js
deleted file mode 100644
index 194524ce42429..0000000000000
--- a/ui_framework/src/components/form/form_textarea/form_textarea.test.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import { render } from 'enzyme';
-import { requiredProps } from '../../test/required_props';
-
-import { KuiFormTextarea } from './form_textarea';
-
-describe('KuiFormTextarea', () => {
-  test('is rendered', () => {
-    const component = render(
-      <KuiFormTextarea { ...requiredProps } />
-    );
-
-    expect(component)
-      .toMatchSnapshot();
-  });
-});
diff --git a/ui_framework/src/components/form/form_textarea/index.js b/ui_framework/src/components/form/form_textarea/index.js
deleted file mode 100644
index 6dac858e963ec..0000000000000
--- a/ui_framework/src/components/form/form_textarea/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { KuiFormTextarea } from './form_textarea';
diff --git a/ui_framework/src/components/form/index.js b/ui_framework/src/components/form/index.js
index 24d31b49f5b1a..7c125de1ab317 100644
--- a/ui_framework/src/components/form/index.js
+++ b/ui_framework/src/components/form/index.js
@@ -1,12 +1,12 @@
 export { KuiForm } from './form';
-export { KuiFormCheckbox } from './form_checkbox';
-export { KuiFormNumber } from './form_number';
-export { KuiFormPassword } from './form_password';
-export { KuiFormRadio } from './form_radio';
-export { KuiFormRange } from './form_range';
+export { KuiCheckbox } from './checkbox';
+export { KuiFieldNumber } from './field_number';
+export { KuiFieldPassword } from './field_password';
+export { KuiRadio } from './radio';
+export { KuiRange } from './range';
 export { KuiFormRow } from './form_row';
-export { KuiFormSearch } from './form_search';
-export { KuiFormSelect } from './form_select';
-export { KuiFormSwitch } from './form_switch';
-export { KuiFormText } from './form_text';
-export { KuiFormTextarea } from './form_textarea';
+export { KuiFieldSearch } from './field_search';
+export { KuiSelect } from './select';
+export { KuiSwitch } from './switch';
+export { KuiFieldText } from './field_text';
+export { KuiTextArea } from './text_area';
diff --git a/ui_framework/src/components/form/radio/_index.scss b/ui_framework/src/components/form/radio/_index.scss
new file mode 100644
index 0000000000000..267661b572b02
--- /dev/null
+++ b/ui_framework/src/components/form/radio/_index.scss
@@ -0,0 +1 @@
+@import 'radio';
diff --git a/ui_framework/src/components/form/radio/_radio.scss b/ui_framework/src/components/form/radio/_radio.scss
new file mode 100644
index 0000000000000..87911ca2e3923
--- /dev/null
+++ b/ui_framework/src/components/form/radio/_radio.scss
@@ -0,0 +1,3 @@
+@include component('kuiRadio') {
+
+}
diff --git a/ui_framework/src/components/form/radio/index.js b/ui_framework/src/components/form/radio/index.js
new file mode 100644
index 0000000000000..0b0793ccd7a5c
--- /dev/null
+++ b/ui_framework/src/components/form/radio/index.js
@@ -0,0 +1 @@
+export { KuiRadio } from './radio';
diff --git a/ui_framework/src/components/form/radio/radio.js b/ui_framework/src/components/form/radio/radio.js
new file mode 100644
index 0000000000000..c4eebf6e90ca5
--- /dev/null
+++ b/ui_framework/src/components/form/radio/radio.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export const KuiRadio = ({ children, className, ...rest }) => {
+  const classes = classNames('kuiRadio', className);
+
+  return (
+    <div
+      className={classes}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+};
diff --git a/ui_framework/src/components/form/form_text/form_text.test.js b/ui_framework/src/components/form/radio/radio.test.js
similarity index 51%
rename from ui_framework/src/components/form/form_text/form_text.test.js
rename to ui_framework/src/components/form/radio/radio.test.js
index 2d320df0566bf..2af19929c0857 100644
--- a/ui_framework/src/components/form/form_text/form_text.test.js
+++ b/ui_framework/src/components/form/radio/radio.test.js
@@ -1,13 +1,13 @@
 import React from 'react';
 import { render } from 'enzyme';
-import { requiredProps } from '../../test/required_props';
+import { requiredProps } from '../../../test/required_props';
 
-import { KuiFormText } from './form_text';
+import { KuiRadio } from './radio';
 
-describe('KuiFormText', () => {
+describe('KuiRadio', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiFormText { ...requiredProps } />
+      <KuiRadio { ...requiredProps } />
     );
 
     expect(component)
diff --git a/ui_framework/src/components/form/form_range/_index.scss b/ui_framework/src/components/form/range/_index.scss
similarity index 97%
rename from ui_framework/src/components/form/form_range/_index.scss
rename to ui_framework/src/components/form/range/_index.scss
index ea15daa7209a9..a025511bb5fa0 100644
--- a/ui_framework/src/components/form/form_range/_index.scss
+++ b/ui_framework/src/components/form/range/_index.scss
@@ -29,4 +29,4 @@ $kuiRangeTrackRadius: $kuiBorderRadius !default;
   width: $kuiRangeThumbWidth;
 }
 
-@import 'form_range';
+@import 'range';
diff --git a/ui_framework/src/components/form/form_range/_form_range.scss b/ui_framework/src/components/form/range/_range.scss
similarity index 99%
rename from ui_framework/src/components/form/form_range/_form_range.scss
rename to ui_framework/src/components/form/range/_range.scss
index ea1e683aa137d..1b4932e4be8bc 100644
--- a/ui_framework/src/components/form/form_range/_form_range.scss
+++ b/ui_framework/src/components/form/range/_range.scss
@@ -8,7 +8,7 @@
 // It has been modified to fit the styling patterns of Kibana and
 // to be more easily maintained / themable going forward.
 
-.kuiFormRange {
+.kuiRange {
   -webkit-appearance: none;
   margin: $kuiRangeThumbHeight / 2 0;
   width: $kuiRangeTrackWidth;
diff --git a/ui_framework/src/components/form/range/index.js b/ui_framework/src/components/form/range/index.js
new file mode 100644
index 0000000000000..ffb6d6bf2097e
--- /dev/null
+++ b/ui_framework/src/components/form/range/index.js
@@ -0,0 +1 @@
+export { KuiRange } from './range';
diff --git a/ui_framework/src/components/form/form_range/form_range.js b/ui_framework/src/components/form/range/range.js
similarity index 71%
rename from ui_framework/src/components/form/form_range/form_range.js
rename to ui_framework/src/components/form/range/range.js
index 3ea4bb136e0e7..f9f5bca670136 100644
--- a/ui_framework/src/components/form/form_range/form_range.js
+++ b/ui_framework/src/components/form/range/range.js
@@ -3,8 +3,8 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 
-export const KuiFormRange = ({ className, id, name, min, max, value, ...rest }) => {
-  const classes = classNames('kuiFormRange', className);
+export const KuiRange = ({ className, id, name, min, max, value, ...rest }) => {
+  const classes = classNames('kuiRange', className);
 
   return (
     <input
@@ -20,7 +20,7 @@ export const KuiFormRange = ({ className, id, name, min, max, value, ...rest })
   );
 };
 
-KuiFormRange.propTypes = {
+KuiRange.propTypes = {
   name: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
   min: PropTypes.number.isRequired,
@@ -28,7 +28,7 @@ KuiFormRange.propTypes = {
   value: PropTypes.string,
 };
 
-KuiFormRange.defaultProps = {
+KuiRange.defaultProps = {
   value: undefined,
   min: 1,
   max: 100,
diff --git a/ui_framework/src/components/form/form_radio/form_radio.test.js b/ui_framework/src/components/form/range/range.test.js
similarity index 50%
rename from ui_framework/src/components/form/form_radio/form_radio.test.js
rename to ui_framework/src/components/form/range/range.test.js
index c0fe38583b9ee..5641e202ad207 100644
--- a/ui_framework/src/components/form/form_radio/form_radio.test.js
+++ b/ui_framework/src/components/form/range/range.test.js
@@ -1,13 +1,13 @@
 import React from 'react';
 import { render } from 'enzyme';
-import { requiredProps } from '../../test/required_props';
+import { requiredProps } from '../../../test/required_props';
 
-import { KuiFormRadio } from './form_radio';
+import { KuiRange } from './range';
 
-describe('KuiFormRadio', () => {
+describe('KuiRange', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiFormRadio { ...requiredProps } />
+      <KuiRange { ...requiredProps } />
     );
 
     expect(component)
diff --git a/ui_framework/src/components/form/select/_index.scss b/ui_framework/src/components/form/select/_index.scss
new file mode 100644
index 0000000000000..e16bb999b26fd
--- /dev/null
+++ b/ui_framework/src/components/form/select/_index.scss
@@ -0,0 +1 @@
+@import 'select';
diff --git a/ui_framework/src/components/form/select/_select.scss b/ui_framework/src/components/form/select/_select.scss
new file mode 100644
index 0000000000000..cb748c128cb7c
--- /dev/null
+++ b/ui_framework/src/components/form/select/_select.scss
@@ -0,0 +1,9 @@
+.kuiSelect {
+  appearance: none;
+  @include kuiFieldStyle;
+}
+
+.kuiSelect::-ms-expand {
+  display: none;
+}
+
diff --git a/ui_framework/src/components/form/select/index.js b/ui_framework/src/components/form/select/index.js
new file mode 100644
index 0000000000000..b006942416d67
--- /dev/null
+++ b/ui_framework/src/components/form/select/index.js
@@ -0,0 +1 @@
+export { KuiSelect } from './select';
diff --git a/ui_framework/src/components/form/form_select/form_select.js b/ui_framework/src/components/form/select/select.js
similarity index 73%
rename from ui_framework/src/components/form/form_select/form_select.js
rename to ui_framework/src/components/form/select/select.js
index d4d9672dbb371..eee234619ea6b 100644
--- a/ui_framework/src/components/form/form_select/form_select.js
+++ b/ui_framework/src/components/form/select/select.js
@@ -3,8 +3,8 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 
-export const KuiFormSelect = ({ className, options, id, name, ...rest }) => {
-  const classes = classNames('kuiFormSelect', className);
+export const KuiSelect = ({ className, options, id, name, ...rest }) => {
+  const classes = classNames('kuiSelect', className);
 
   return (
     <select
@@ -20,7 +20,7 @@ export const KuiFormSelect = ({ className, options, id, name, ...rest }) => {
   );
 };
 
-KuiFormSelect.propTypes = {
+KuiSelect.propTypes = {
   name: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
   options: PropTypes.array.isRequired,
diff --git a/ui_framework/src/components/form/select/select.test.js b/ui_framework/src/components/form/select/select.test.js
new file mode 100644
index 0000000000000..755d95488561c
--- /dev/null
+++ b/ui_framework/src/components/form/select/select.test.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../../test/required_props';
+
+import { KuiSelect } from './select';
+
+describe('KuiSelect', () => {
+  test('is rendered', () => {
+    const component = render(
+      <KuiSelect { ...requiredProps } />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+});
diff --git a/ui_framework/src/components/form/switch/_index.scss b/ui_framework/src/components/form/switch/_index.scss
new file mode 100644
index 0000000000000..d77dd0ef13e79
--- /dev/null
+++ b/ui_framework/src/components/form/switch/_index.scss
@@ -0,0 +1,5 @@
+$kuiSwitchHeight: $kuiSizeL;
+$kuiSwitchWidth: ($kuiSizeL * 2) + $kuiSizeXS;
+$kuiSwitchThumbSize: $kuiSizeL;
+
+@import 'switch';
diff --git a/ui_framework/src/components/form/form_switch/_form_switch.scss b/ui_framework/src/components/form/switch/_switch.scss
similarity index 66%
rename from ui_framework/src/components/form/form_switch/_form_switch.scss
rename to ui_framework/src/components/form/switch/_switch.scss
index a0b2d9cec9267..c98ad07f972cc 100644
--- a/ui_framework/src/components/form/form_switch/_form_switch.scss
+++ b/ui_framework/src/components/form/switch/_switch.scss
@@ -1,18 +1,18 @@
-.kuiFormSwitch {
+.kuiSwitch {
   position: relative;
   display: inline-block;
-  height: $kuiFormSwitchHeight;
+  height: $kuiSwitchHeight;
   cursor: pointer;
 
   /**
    * 1. The label is our main clickable area. It sits above the actual switch.
    */
-  .kuiFormSwitch__label {
+  .kuiSwitch__label {
     position: absolute;
     left: 0;
-    padding-left: $kuiFormSwitchWidth + $kuiSizeS; // 1
+    padding-left: $kuiSwitchWidth + $kuiSizeS; // 1
     z-index: 2; // 1
-    line-height: $kuiFormSwitchHeight;
+    line-height: $kuiSwitchHeight;
     font-size: $kuiFontSizeS;
     cursor: pointer;
   }
@@ -20,42 +20,42 @@
   /**
    * 1. The input is "hidden" but still focusable.
    */
-  .kuiFormSwitch__input {
+  .kuiSwitch__input {
     position: absolute;
     opacity: 0; // 1
     z-index: -1; // 1
   }
 
-  .kuiFormSwitch__input:focus + .kuiFormSwitch__body {
+  .kuiSwitch__input:focus + .kuiSwitch__body {
     background: $kuiColorEmptyShade;
 
-    .kuiFormSwitch__thumb {
+    .kuiSwitch__thumb {
       border-color: $kuiColorPrimary;
       background-color: $kuiColorPrimary;
     }
   }
 
-  .kuiFormSwitch__body {
-    width: $kuiFormSwitchWidth;
-    height: $kuiFormSwitchHeight;
+  .kuiSwitch__body {
+    width: $kuiSwitchWidth;
+    height: $kuiSwitchHeight;
     background: $kuiFormBackgroundColor;
     border: $kuiBorderThin;
     display: inline-block;
     position: relative;
-    border-radius: $kuiFormSwitchHeight;
+    border-radius: $kuiSwitchHeight;
     vertical-align: middle;
   }
 
   /**
    * 1. Accounts for the border on the body.
    */
-  .kuiFormSwitch__thumb {
+  .kuiSwitch__thumb {
     position: absolute;
-    width: $kuiFormSwitchHeight;
-    height: $kuiFormSwitchHeight;
+    width: $kuiSwitchHeight;
+    height: $kuiSwitchHeight;
     display: inline-block;
     background-color: $kuiColorEmptyShade;
-    left: $kuiFormSwitchWidth - $kuiFormSwitchThumbSize;
+    left: $kuiSwitchWidth - $kuiSwitchThumbSize;
     top: -1px; // 1
     border-radius: 50%;
     border: $kuiBorderThin;
@@ -63,31 +63,31 @@
     z-index: 1;
   }
 
-  .kuiFormSwitch__track {
+  .kuiSwitch__track {
     position: absolute;
     left: 0;
     top: 0;
     right: 0;
     bottom: 0;
     overflow: hidden;
-    border-radius: $kuiFormSwitchHeight;
+    border-radius: $kuiSwitchHeight;
   }
 
   /**
    * 1. Mask is used to color the svg. Text color is used so works regardless of theme.
    */
-  .kuiFormSwitch__icon {
+  .kuiSwitch__icon {
     position: absolute;
-    right: -($kuiFormSwitchWidth - ($kuiFormSwitchThumbSize / 2));
+    right: -($kuiSwitchWidth - ($kuiSwitchThumbSize / 2));
     top: 0;
     bottom: 0;
-    width: $kuiFormSwitchWidth - ($kuiFormSwitchThumbSize / 2) + $kuiSizeS;
+    width: $kuiSwitchWidth - ($kuiSwitchThumbSize / 2) + $kuiSizeS;
     transition: left $kuiAnimSpeedNormal $kuiAnimSlightBounce, right $kuiAnimSpeedNormal $kuiAnimSlightBounce;
     mask: url('../src/components/icon/assets/cross.svg') center center no-repeat; // 1
     background-color: $kuiTextColor; // 1
   }
 
-  .kuiFormSwitch__icon--checked {
+  .kuiSwitch__icon--checked {
     right: auto;
     left: -$kuiSizeS;
     background-color: $kuiTextColor;
@@ -98,13 +98,13 @@
    * The thumb is slightly scaled when in use.
    */
   &:hover {
-    .kuiFormSwitch__thumb {
+    .kuiSwitch__thumb {
       transform: scale(1.05);
     }
   }
 
   &:active {
-    .kuiFormSwitch__thumb {
+    .kuiSwitch__thumb {
       transform: scale(.95);
     }
   }
@@ -112,18 +112,18 @@
   /**
    * When input is not checked, we shift around the positioning of sibling/child selectors.
    */
-  .kuiFormSwitch__input:not(:checked) ~ .kuiFormSwitch__body {
+  .kuiSwitch__input:not(:checked) ~ .kuiSwitch__body {
 
-    .kuiFormSwitch__thumb {
+    .kuiSwitch__thumb {
       left: -1px;
     }
 
-    .kuiFormSwitch__icon {
+    .kuiSwitch__icon {
       right: -$kuiSizeS;
 
-      &.kuiFormSwitch__icon--checked {
+      &.kuiSwitch__icon--checked {
         right: auto;
-        left: -($kuiFormSwitchWidth - ($kuiFormSwitchThumbSize / 2));
+        left: -($kuiSwitchWidth - ($kuiSwitchThumbSize / 2));
       }
     }
   }
diff --git a/ui_framework/src/components/form/switch/index.js b/ui_framework/src/components/form/switch/index.js
new file mode 100644
index 0000000000000..5d52adb1d6c7c
--- /dev/null
+++ b/ui_framework/src/components/form/switch/index.js
@@ -0,0 +1 @@
+export { KuiSwitch } from './switch';
diff --git a/ui_framework/src/components/form/switch/switch.js b/ui_framework/src/components/form/switch/switch.js
new file mode 100644
index 0000000000000..0043225ac636d
--- /dev/null
+++ b/ui_framework/src/components/form/switch/switch.js
@@ -0,0 +1,33 @@
+import React, {
+  PropTypes,
+} from 'react';
+import classNames from 'classnames';
+
+export const KuiSwitch = ({ label, id, name, defaultChecked, className, ...rest }) => {
+  const classes = classNames('kuiSwitch', className);
+
+  return (
+    <div className={classes} {...rest}>
+      <input className="kuiSwitch__input" name={name} id={id} type="checkbox" defaultChecked={defaultChecked} />
+      <span className="kuiSwitch__body">
+        <span className="kuiSwitch__thumb" />
+        <span className="kuiSwitch__track">
+          <span className="kuiSwitch__icon" />
+          <span className="kuiSwitch__icon kuiSwitch__icon--checked" />
+        </span>
+      </span>
+      <label className="kuiSwitch__label" htmlFor={id}>{label}</label>
+    </div>
+  );
+};
+
+KuiSwitch.propTypes = {
+  name: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  checked: PropTypes.bool,
+};
+
+KuiSwitch.defaultProps = {
+  defaultChecked: false,
+};
diff --git a/ui_framework/src/components/form/switch/switch.test.js b/ui_framework/src/components/form/switch/switch.test.js
new file mode 100644
index 0000000000000..79bb53b29ac98
--- /dev/null
+++ b/ui_framework/src/components/form/switch/switch.test.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../../test/required_props';
+
+import { KuiSwitch } from './switch';
+
+describe('KuiSwitch', () => {
+  test('is rendered', () => {
+    const component = render(
+      <KuiSwitch { ...requiredProps } />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+});
diff --git a/ui_framework/src/components/form/text_area/_index.scss b/ui_framework/src/components/form/text_area/_index.scss
new file mode 100644
index 0000000000000..f14b87660661e
--- /dev/null
+++ b/ui_framework/src/components/form/text_area/_index.scss
@@ -0,0 +1 @@
+@import 'text_area';
diff --git a/ui_framework/src/components/form/text_area/_text_area.scss b/ui_framework/src/components/form/text_area/_text_area.scss
new file mode 100644
index 0000000000000..97320031ead3f
--- /dev/null
+++ b/ui_framework/src/components/form/text_area/_text_area.scss
@@ -0,0 +1,3 @@
+.kuiTextArea {
+  @include kuiFieldStyle;
+}
diff --git a/ui_framework/src/components/form/text_area/index.js b/ui_framework/src/components/form/text_area/index.js
new file mode 100644
index 0000000000000..6d9dfe10b23dc
--- /dev/null
+++ b/ui_framework/src/components/form/text_area/index.js
@@ -0,0 +1 @@
+export { KuiTextArea } from './text_area';
diff --git a/ui_framework/src/components/form/form_textarea/form_textarea.js b/ui_framework/src/components/form/text_area/text_area.js
similarity index 65%
rename from ui_framework/src/components/form/form_textarea/form_textarea.js
rename to ui_framework/src/components/form/text_area/text_area.js
index 71848e3fc1a12..0aa29863aae79 100644
--- a/ui_framework/src/components/form/form_textarea/form_textarea.js
+++ b/ui_framework/src/components/form/text_area/text_area.js
@@ -3,8 +3,8 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 
-export const KuiFormTextarea = ({ children, rows, name, id, placeholder, className, ...rest }) => {
-  const classes = classNames('kuiFormTextarea', className);
+export const KuiTextArea = ({ children, rows, name, id, placeholder, className, ...rest }) => {
+  const classes = classNames('kuiTextArea', className);
 
   return (
     <textarea
@@ -20,14 +20,14 @@ export const KuiFormTextarea = ({ children, rows, name, id, placeholder, classNa
   );
 };
 
-KuiFormTextarea.propTypes = {
+KuiTextArea.propTypes = {
   name: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
   placeholder: PropTypes.string,
   rows: PropTypes.number,
 };
 
-KuiFormTextarea.defaultProps = {
+KuiTextArea.defaultProps = {
   rows: 6,
 };
 
diff --git a/ui_framework/src/components/form/text_area/text_area.test.js b/ui_framework/src/components/form/text_area/text_area.test.js
new file mode 100644
index 0000000000000..4014c2c8d412e
--- /dev/null
+++ b/ui_framework/src/components/form/text_area/text_area.test.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../../test/required_props';
+
+import { KuiTextArea } from './text_area';
+
+describe('KuiTextArea', () => {
+  test('is rendered', () => {
+    const component = render(
+      <KuiTextArea { ...requiredProps } />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+});
diff --git a/ui_framework/src/components/index.js b/ui_framework/src/components/index.js
index c36cd02cb0a82..23cb80f7708fc 100644
--- a/ui_framework/src/components/index.js
+++ b/ui_framework/src/components/index.js
@@ -12,17 +12,17 @@ export {
 
 export {
   KuiForm,
-  KuiFormCheckbox,
-  KuiFormNumber,
-  KuiFormPassword,
-  KuiFormRadio,
-  KuiFormRange,
+  KuiCheckbox,
+  KuiFieldNumber,
+  KuiFieldPassword,
+  KuiRadio,
+  KuiRange,
   KuiFormRow,
-  KuiFormSearch,
-  KuiFormSelect,
-  KuiFormSwitch,
-  KuiFormText,
-  KuiFormTextarea,
+  KuiFieldSearch,
+  KuiSelect,
+  KuiSwitch,
+  KuiFieldText,
+  KuiTextArea,
 } from './form';
 
 export {