diff --git a/src-docs/src/views/form_controls/field_number.js b/src-docs/src/views/form_controls/field_number.js
index ebfc39dfd18..eb675fbb87a 100644
--- a/src-docs/src/views/form_controls/field_number.js
+++ b/src-docs/src/views/form_controls/field_number.js
@@ -8,6 +8,7 @@ export default class extends Component {
 
     this.state = {
       value: '',
+      rangeValue: undefined,
     };
   }
 
@@ -18,10 +19,17 @@ export default class extends Component {
     });
   };
 
+  onRangeChange = value => {
+    this.setState({
+      rangeValue: value,
+    });
+  };
+
   render() {
     return (
       <Fragment>
         <EuiFieldNumber
+          compressed
           placeholder="Placeholder text"
           value={this.state.value}
           onChange={this.onChange}
@@ -31,6 +39,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiFieldNumber
+          compressed
           placeholder="Disabled"
           value={this.state.value}
           onChange={this.onChange}
@@ -41,6 +50,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiFieldNumber
+          compressed
           placeholder="Loading"
           value={this.state.value}
           onChange={this.onChange}
@@ -51,6 +61,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiFieldNumber
+          compressed
           placeholder="Loading and disabled"
           value={this.state.value}
           onChange={this.onChange}
@@ -62,6 +73,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiFieldNumber
+          compressed
           placeholder="Read-only"
           value={this.state.value}
           onChange={this.onChange}
@@ -76,11 +88,14 @@ export default class extends Component {
           value={this.state.value}
           onChange={this.onChange}
           compressed
+          isInvalid
+          fullWidth
         />
 
         <EuiSpacer size="m" />
 
         <EuiFieldNumber
+          compressed
           style={{ textAlign: 'right' }}
           append={
             <EuiText size="xs">
diff --git a/src-docs/src/views/form_controls/field_password.js b/src-docs/src/views/form_controls/field_password.js
index 89ef106d4ba..da850a3ee41 100644
--- a/src-docs/src/views/form_controls/field_password.js
+++ b/src-docs/src/views/form_controls/field_password.js
@@ -7,7 +7,7 @@ export default class extends Component {
     super(props);
 
     this.state = {
-      value: '',
+      value: 'password',
     };
   }
 
@@ -21,6 +21,7 @@ export default class extends Component {
     return (
       <Fragment>
         <EuiFieldPassword
+          compressed
           placeholder="Placeholder text"
           value={this.state.value}
           onChange={this.onChange}
@@ -34,6 +35,7 @@ export default class extends Component {
           value={this.state.value}
           onChange={this.onChange}
           disabled
+          compressed
           aria-label="Use aria labels when no actual label is in use"
         />
 
@@ -44,6 +46,7 @@ export default class extends Component {
           value={this.state.value}
           onChange={this.onChange}
           isLoading
+          compressed
           aria-label="Use aria labels when no actual label is in use"
         />
 
@@ -55,6 +58,7 @@ export default class extends Component {
           onChange={this.onChange}
           isLoading
           disabled
+          compressed
           aria-label="Use aria labels when no actual label is in use"
         />
 
@@ -65,6 +69,7 @@ export default class extends Component {
           value={this.state.value}
           onChange={this.onChange}
           compressed
+          readOnly
         />
 
         <EuiSpacer size="m" />
@@ -73,7 +78,8 @@ export default class extends Component {
           placeholder="Compressed and loading"
           value={this.state.value}
           onChange={this.onChange}
-          isLoading
+          isInvalid
+          fullWidth
           compressed
         />
       </Fragment>
diff --git a/src-docs/src/views/form_controls/field_search.js b/src-docs/src/views/form_controls/field_search.js
index 2224b22e9a1..8c3f4a9b247 100644
--- a/src-docs/src/views/form_controls/field_search.js
+++ b/src-docs/src/views/form_controls/field_search.js
@@ -21,6 +21,7 @@ export default class extends Component {
     return (
       <Fragment>
         <EuiFieldSearch
+          compressed
           placeholder="Placeholder text"
           value={this.state.value}
           onChange={this.onChange}
@@ -30,6 +31,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiFieldSearch
+          compressed
           placeholder="Disabled"
           value={this.state.value}
           onChange={this.onChange}
@@ -40,6 +42,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiFieldSearch
+          compressed
           placeholder="Loading"
           value={this.state.value}
           onChange={this.onChange}
@@ -50,6 +53,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiFieldSearch
+          compressed
           placeholder="Loading and disabled"
           value={this.state.value}
           onChange={this.onChange}
@@ -61,6 +65,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiFieldSearch
+          compressed
           placeholder="Read-only"
           value={this.state.value}
           onChange={this.onChange}
@@ -75,6 +80,8 @@ export default class extends Component {
           value={this.state.value}
           onChange={this.onChange}
           compressed
+          isInvalid
+          fullWidth
         />
       </Fragment>
     );
diff --git a/src-docs/src/views/form_controls/field_text.js b/src-docs/src/views/form_controls/field_text.js
index 125dc557928..00d475f3628 100644
--- a/src-docs/src/views/form_controls/field_text.js
+++ b/src-docs/src/views/form_controls/field_text.js
@@ -1,6 +1,13 @@
 import React, { Component, Fragment } from 'react';
 
-import { EuiFieldText, EuiSpacer } from '../../../../src/components';
+import {
+  EuiFieldText,
+  EuiSpacer,
+  EuiFormLabel,
+  EuiButtonEmpty,
+  EuiButtonIcon,
+} from '../../../../src/components';
+import { EuiIcon } from '../../../../src/components/icon';
 
 export default class extends Component {
   constructor(props) {
@@ -21,6 +28,7 @@ export default class extends Component {
     return (
       <Fragment>
         <EuiFieldText
+          compressed
           placeholder="Placeholder text"
           value={this.state.value}
           onChange={this.onChange}
@@ -30,6 +38,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiFieldText
+          compressed
           placeholder="Disabled"
           value={this.state.value}
           onChange={this.onChange}
@@ -40,6 +49,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiFieldText
+          compressed
           placeholder="Loading"
           value={this.state.value}
           onChange={this.onChange}
@@ -50,6 +60,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiFieldText
+          compressed
           placeholder="Loading and disabled"
           value={this.state.value}
           onChange={this.onChange}
@@ -61,6 +72,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiFieldText
+          compressed
           placeholder="Read-only"
           value={this.state.value}
           onChange={this.onChange}
@@ -75,6 +87,104 @@ export default class extends Component {
           value={this.state.value}
           onChange={this.onChange}
           compressed
+          isInvalid
+          fullWidth
+        />
+
+        <EuiSpacer size="m" />
+
+        <EuiFieldText
+          compressed
+          placeholder="Prepend"
+          value={this.state.value}
+          onChange={this.onChange}
+          prepend={<EuiFormLabel>Label</EuiFormLabel>}
+        />
+
+        <EuiSpacer size="m" />
+
+        <EuiFieldText
+          compressed
+          placeholder="Prepend"
+          value={this.state.value}
+          onChange={this.onChange}
+          prepend={<EuiIcon type="vector" />}
+        />
+
+        <EuiSpacer size="m" />
+
+        <EuiFieldText
+          placeholder="Append"
+          value={this.state.value}
+          onChange={this.onChange}
+          compressed
+          append={<EuiFormLabel>px square</EuiFormLabel>}
+        />
+
+        <EuiSpacer size="m" />
+
+        <EuiFieldText
+          placeholder="Append"
+          value={this.state.value}
+          onChange={this.onChange}
+          compressed
+          append={<EuiIcon type="vector" />}
+        />
+
+        <EuiSpacer size="m" />
+
+        <EuiFieldText
+          placeholder="Prepend & Append"
+          value={this.state.value}
+          onChange={this.onChange}
+          compressed
+          prepend={<EuiIcon type="vector" />}
+          append={<EuiFormLabel>px square</EuiFormLabel>}
+        />
+
+        <EuiSpacer size="m" />
+
+        <EuiFieldText
+          placeholder="Prepend & Append button"
+          value={this.state.value}
+          onChange={this.onChange}
+          compressed
+          prepend={
+            <EuiButtonEmpty size="xs" iconType="arrowDown" iconSide="right">
+              Button
+            </EuiButtonEmpty>
+          }
+          append={
+            <EuiButtonEmpty size="xs" iconType="arrowDown" iconSide="right">
+              Button
+            </EuiButtonEmpty>
+          }
+        />
+
+        <EuiSpacer size="m" />
+
+        <EuiFieldText
+          placeholder="Icon button and label in prepend"
+          value={this.state.value}
+          onChange={this.onChange}
+          compressed
+          prepend={[
+            <EuiButtonIcon iconType="magnet" />,
+            <EuiFormLabel>field.name</EuiFormLabel>,
+          ]}
+        />
+
+        <EuiSpacer size="m" />
+
+        <EuiFieldText
+          placeholder="Icon button and label in append"
+          value={this.state.value}
+          onChange={this.onChange}
+          compressed
+          append={[
+            <EuiFormLabel>field.name</EuiFormLabel>,
+            <EuiButtonIcon iconType="magnet" />,
+          ]}
         />
       </Fragment>
     );
diff --git a/src-docs/src/views/form_controls/file_picker.js b/src-docs/src/views/form_controls/file_picker.js
index 68f7acd2799..18749fcd4b3 100644
--- a/src-docs/src/views/form_controls/file_picker.js
+++ b/src-docs/src/views/form_controls/file_picker.js
@@ -49,6 +49,7 @@ export class FilePicker extends Component {
             <EuiFilePicker
               id="asdf2"
               multiple
+              compressed
               initialPromptText="Select or drag and drop multiple files"
               onChange={files => {
                 this.onChange(files);
@@ -65,13 +66,14 @@ export class FilePicker extends Component {
 
         <EuiSpacer size="m" />
 
-        <EuiFilePicker disabled initialPromptText="Disabled" />
+        <EuiFilePicker disabled compressed initialPromptText="Disabled" />
 
         <EuiSpacer size="m" />
 
         <EuiFilePicker
           display="default"
           initialPromptText="Select some files"
+          compressed
           onChange={files => {
             this.onChange(files);
           }}
@@ -80,8 +82,12 @@ export class FilePicker extends Component {
         <EuiSpacer size="m" />
 
         <EuiFilePicker
+          id="asdf4"
           compressed
-          initialPromptText="Select some files"
+          display="default"
+          isInvalid
+          fullWidth
+          initialPromptText="Select a file"
           onChange={files => {
             this.onChange(files);
           }}
diff --git a/src-docs/src/views/form_controls/form_control_layout.js b/src-docs/src/views/form_controls/form_control_layout.js
index e79feedb1b7..50c89bbbb7c 100644
--- a/src-docs/src/views/form_controls/form_control_layout.js
+++ b/src-docs/src/views/form_controls/form_control_layout.js
@@ -10,78 +10,95 @@ import {
 
 export default () => (
   <Fragment>
-    <EuiFormControlLayout icon="search">
-      <input type="text" className="euiFieldText" />
+    <EuiFormControlLayout icon="search" compressed>
+      <input type="text" className="euiFieldText euiFieldText--compressed" />
     </EuiFormControlLayout>
 
     <EuiSpacer size="m" />
 
-    <EuiFormControlLayout isLoading>
-      <input type="text" className="euiFieldText" />
+    <EuiFormControlLayout isLoading compressed>
+      <input type="text" className="euiFieldText euiFieldText--compressed" />
     </EuiFormControlLayout>
 
     <EuiSpacer size="m" />
 
-    <EuiFormControlLayout clear={{ onClick: () => {} }}>
-      <input type="text" className="euiFieldText" />
+    <EuiFormControlLayout clear={{ onClick: () => {} }} compressed>
+      <input type="text" className="euiFieldText euiFieldText--compressed" />
     </EuiFormControlLayout>
 
     <EuiSpacer size="m" />
 
-    <EuiFormControlLayout isLoading clear={{ onClick: () => {} }}>
-      <input type="text" className="euiFieldText" />
+    <EuiFormControlLayout isLoading clear={{ onClick: () => {} }} compressed>
+      <input type="text" className="euiFieldText euiFieldText--compressed" />
     </EuiFormControlLayout>
 
     <EuiSpacer size="m" />
 
-    <EuiFormControlLayout isLoading icon="search">
-      <input type="text" className="euiFieldText" />
+    <EuiFormControlLayout isLoading icon="search" compressed>
+      <input type="text" className="euiFieldText euiFieldText--compressed" />
     </EuiFormControlLayout>
 
     <EuiSpacer size="m" />
 
-    <EuiFormControlLayout isLoading icon={{ type: 'arrowDown', side: 'right' }}>
-      <input type="text" className="euiFieldText" />
+    <EuiFormControlLayout
+      isLoading
+      icon={{ type: 'arrowDown', side: 'right' }}
+      compressed>
+      <input type="text" className="euiFieldText euiFieldText--compressed" />
     </EuiFormControlLayout>
 
     <EuiSpacer size="m" />
 
-    <EuiFormControlLayout clear={{ onClick: () => {} }} icon="search">
-      <input type="text" className="euiFieldText" />
+    <EuiFormControlLayout
+      clear={{ onClick: () => {} }}
+      icon="search"
+      compressed>
+      <input type="text" className="euiFieldText euiFieldText--compressed" />
     </EuiFormControlLayout>
 
     <EuiSpacer size="m" />
 
     <EuiFormControlLayout
       clear={{ onClick: () => {} }}
-      icon={{ type: 'arrowDown', side: 'right' }}>
-      <input type="text" className="euiFieldText" />
+      icon={{ type: 'arrowDown', side: 'right' }}
+      compressed>
+      <input type="text" className="euiFieldText euiFieldText--compressed" />
     </EuiFormControlLayout>
 
     <EuiSpacer size="m" />
 
-    <EuiFormControlLayout isLoading clear={{ onClick: () => {} }} icon="search">
-      <input type="text" className="euiFieldText" />
+    <EuiFormControlLayout
+      isLoading
+      clear={{ onClick: () => {} }}
+      icon="search"
+      compressed>
+      <input type="text" className="euiFieldText euiFieldText--compressed" />
     </EuiFormControlLayout>
 
     <EuiSpacer size="m" />
 
     <EuiFormControlLayout
       isLoading
+      compressed
       clear={{ onClick: () => {} }}
       icon={{ type: 'arrowDown', side: 'right' }}>
-      <input type="text" className="euiFieldText" />
+      <input type="text" className="euiFieldText euiFieldText--compressed" />
     </EuiFormControlLayout>
 
     <EuiSpacer size="m" />
 
-    <EuiFormControlLayout isLoading clear={{ onClick: () => {} }} icon="search">
-      <input type="text" className="euiFieldText" />
+    <EuiFormControlLayout
+      isLoading
+      clear={{ onClick: () => {} }}
+      icon="search"
+      compressed>
+      <input type="text" className="euiFieldText euiFieldText--compressed" />
     </EuiFormControlLayout>
 
     <EuiSpacer size="m" />
 
     <EuiFormControlLayout
+      compressed
       prepend={<EuiFormLabel htmlFor="textField19">Label</EuiFormLabel>}>
       <input
         type="text"
@@ -93,6 +110,7 @@ export default () => (
     <EuiSpacer size="m" />
 
     <EuiFormControlLayout
+      compressed
       readOnly
       prepend={<EuiFormLabel htmlFor="textField19a">Read only</EuiFormLabel>}>
       <input
@@ -106,6 +124,7 @@ export default () => (
     <EuiSpacer size="m" />
 
     <EuiFormControlLayout
+      compressed
       append={
         <EuiText size="xs">
           <strong>%</strong>
@@ -117,6 +136,7 @@ export default () => (
     <EuiSpacer size="m" />
 
     <EuiFormControlLayout
+      compressed
       isLoading
       clear={{ onClick: () => {} }}
       prepend={
diff --git a/src-docs/src/views/form_controls/form_control_layout_range.js b/src-docs/src/views/form_controls/form_control_layout_range.js
index a11d465fc05..06a35ee14a2 100644
--- a/src-docs/src/views/form_controls/form_control_layout_range.js
+++ b/src-docs/src/views/form_controls/form_control_layout_range.js
@@ -10,6 +10,7 @@ import {
 export default () => (
   <Fragment>
     <EuiFormControlLayoutDelimited
+      compressed
       startControl={
         <input type="number" placeholder="0" className="euiFieldNumber" />
       }
@@ -20,6 +21,7 @@ export default () => (
 
     <EuiSpacer size="m" />
     <EuiFormControlLayoutDelimited
+      compressed
       append={<EuiFormLabel>px</EuiFormLabel>}
       startControl={
         <input type="number" placeholder="0" className="euiFieldNumber" />
@@ -31,6 +33,7 @@ export default () => (
 
     <EuiSpacer size="m" />
     <EuiFormControlLayoutDelimited
+      compressed
       icon="vector"
       startControl={
         <input type="number" placeholder="0" className="euiFieldNumber" />
@@ -42,6 +45,7 @@ export default () => (
 
     <EuiSpacer size="m" />
     <EuiFormControlLayoutDelimited
+      compressed
       clear={{ onClick: () => {} }}
       isLoading
       startControl={
@@ -55,6 +59,7 @@ export default () => (
     <EuiSpacer size="m" />
     <EuiFormControlLayoutDelimited
       fullWidth
+      compressed
       startControl={
         <input type="number" placeholder="0" className="euiFieldNumber" />
       }
@@ -65,6 +70,7 @@ export default () => (
 
     <EuiSpacer size="m" />
     <EuiFormControlLayoutDelimited
+      compressed
       isLoading
       startControl={
         <input type="number" placeholder="0" className="euiFieldNumber" />
@@ -88,6 +94,7 @@ export default () => (
     <EuiSpacer size="m" />
 
     <EuiFormControlLayoutDelimited
+      compressed
       prepend={<EuiFormLabel>Add</EuiFormLabel>}
       startControl={
         <input type="number" placeholder="0" className="euiFieldNumber" />
@@ -101,6 +108,7 @@ export default () => (
     <EuiSpacer size="m" />
 
     <EuiFormControlLayoutDelimited
+      compressed
       prepend={<EuiFormLabel>Merge</EuiFormLabel>}
       startControl={
         <input type="number" placeholder="0" className="euiFieldNumber" />
@@ -114,6 +122,7 @@ export default () => (
     <EuiSpacer size="m" />
 
     <EuiFormControlLayoutDelimited
+      compressed
       readOnly
       prepend={<EuiFormLabel>Read only</EuiFormLabel>}
       startControl={
diff --git a/src-docs/src/views/form_controls/select.js b/src-docs/src/views/form_controls/select.js
index 1c7774d55c5..1a0830236c8 100644
--- a/src-docs/src/views/form_controls/select.js
+++ b/src-docs/src/views/form_controls/select.js
@@ -27,6 +27,7 @@ export default class extends Component {
     return (
       <Fragment>
         <EuiSelect
+          compressed
           options={this.options}
           value={this.state.value}
           onChange={this.onChange}
@@ -36,6 +37,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiSelect
+          compressed
           options={this.options}
           value={this.state.value}
           onChange={this.onChange}
@@ -46,6 +48,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiSelect
+          compressed
           options={this.options}
           value={this.state.value}
           onChange={this.onChange}
@@ -56,6 +59,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiSelect
+          compressed
           options={this.options}
           value={this.state.value}
           onChange={this.onChange}
@@ -68,9 +72,12 @@ export default class extends Component {
 
         <EuiSelect
           options={this.options}
-          value={this.state.value}
+          // value={this.state.value}
           onChange={this.onChange}
           compressed
+          isInvalid
+          fullWidth
+          hasNoInitialSelection
         />
       </Fragment>
     );
diff --git a/src-docs/src/views/form_controls/text_area.js b/src-docs/src/views/form_controls/text_area.js
index 43f04395d50..09509895ccc 100644
--- a/src-docs/src/views/form_controls/text_area.js
+++ b/src-docs/src/views/form_controls/text_area.js
@@ -21,6 +21,7 @@ export default class extends Component {
     return (
       <Fragment>
         <EuiTextArea
+          compressed
           placeholder="Placeholder text"
           aria-label="Use aria labels when no actual label is in use"
           value={this.state.value}
@@ -35,6 +36,7 @@ export default class extends Component {
           value={this.state.value}
           onChange={this.onChange}
           disabled
+          compressed
         />
 
         <EuiSpacer size="m" />
@@ -45,6 +47,7 @@ export default class extends Component {
           value={this.state.value}
           onChange={this.onChange}
           readOnly
+          compressed
         />
 
         <EuiSpacer size="m" />
@@ -54,6 +57,8 @@ export default class extends Component {
           value={this.state.value}
           onChange={this.onChange}
           compressed
+          isInvalid
+          fullWidth
         />
       </Fragment>
     );
diff --git a/src-docs/src/views/super_select/super_select.js b/src-docs/src/views/super_select/super_select.js
index b356b870072..86ab6254754 100644
--- a/src-docs/src/views/super_select/super_select.js
+++ b/src-docs/src/views/super_select/super_select.js
@@ -42,6 +42,7 @@ export default class extends Component {
     return (
       <Fragment>
         <EuiSuperSelect
+          compressed
           options={this.options}
           valueOfSelected={this.state.value}
           onChange={this.onChange}
@@ -50,6 +51,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiSuperSelect
+          compressed
           options={this.options}
           valueOfSelected={this.state.value}
           onChange={this.onChange}
@@ -59,6 +61,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiSuperSelect
+          compressed
           options={this.options}
           valueOfSelected={this.state.value}
           onChange={this.onChange}
@@ -68,6 +71,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiSuperSelect
+          compressed
           options={this.options}
           valueOfSelected={this.state.value}
           onChange={this.onChange}
@@ -87,6 +91,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiSuperSelect
+          compressed
           options={this.options}
           valueOfSelected={this.state.value}
           onChange={this.onChange}
@@ -96,6 +101,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiSuperSelect
+          compressed
           options={this.options}
           valueOfSelected={this.state.value}
           onChange={this.onChange}