diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index cae05f5..a766be0 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,6 +1,7 @@
 <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 <style>
   body {
     font-family: 'Roboto', sans-serif;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/ChipInput.js b/src/ChipInput.js
index e23c965..6f33980 100644
--- a/src/ChipInput.js
+++ b/src/ChipInput.js
@@ -8,6 +8,7 @@ import PropTypes from 'prop-types'
 import Input from '@material-ui/core/Input'
 import FilledInput from '@material-ui/core/FilledInput/FilledInput'
 import OutlinedInput from '@material-ui/core/OutlinedInput'
+import InputAdornment from '@material-ui/core/InputAdornment'
 import InputLabel from '@material-ui/core/InputLabel'
 import Chip from '@material-ui/core/Chip'
 import withStyles from '@material-ui/core/styles/withStyles'
@@ -35,10 +36,29 @@ const styles = (theme) => {
         boxSizing: 'border-box'
       },
       '&$outlined': {
-        paddingTop: 14
+        paddingTop: 8
       },
       '&$filled': {
-        paddingTop: 28
+        paddingTop: 22,
+        '&$hasChips': {
+          paddingTop: 16
+        }
+      },
+
+      '&:not($adornmentRoot)': {
+        flexGrow: 1,
+        display: 'flex',
+        alignContent: 'center',
+        flexWrap: 'wrap',
+        '& > *': {
+          '&:not($chip)': {
+            flex: '1 0'
+          }
+        },
+        '& > div + input': {
+          paddingBottom: '7px',
+          minWidth: 88
+        }
       }
     },
     input: {
@@ -46,14 +66,29 @@ const styles = (theme) => {
       appearance: 'none', // Remove border in Safari, doesn't seem to break anything in other browsers
       WebkitTapHighlightColor: 'rgba(0,0,0,0)', // Remove mobile color flashing (deprecated style).
       float: 'left',
-      '&:not($standard)': {
-        paddingTop: 0
+      minWidth: 'min-content',
+      paddingTop: 0,
+      '&$outlined': {
+        paddingTop: 6,
+        paddingBottom: 15,
+        '&$hasChips': {
+          paddingTop: 0,
+          paddingBottom: 7
+        }
+      },
+      '&$filled': {
+        paddingBottom: 15,
+        '&$hasChips': {
+          paddingBottom: 10
+        }
       }
     },
+    hasChips: {},
     chipContainer: {
       cursor: 'text',
       marginBottom: -2,
       minHeight: 40,
+      display: 'flex',
       '&$labeled&$standard': {
         marginTop: 18
       }
@@ -65,14 +100,30 @@ const styles = (theme) => {
     label: {
       top: 4,
       '&$outlined&:not($labelShrink)': {
-        top: -4
+        top: -6
       },
       '&$filled&:not($labelShrink)': {
         top: 0
+      },
+      '&$adornedStart': {
+        left: 24
       }
     },
     labelShrink: {
-      top: 0
+      top: 0,
+      '&$filled': {
+        marginTop: -8,
+        '&$adornedStart': {
+          marginLeft: -8
+        }
+      },
+      '&$adornedStart': {
+        left: 0,
+        '&$outlined': {
+          marginLeft: -8,
+          marginTop: -4
+        }
+      }
     },
     helperText: {
       marginBottom: -20
@@ -137,6 +188,35 @@ const styles = (theme) => {
     chip: {
       margin: '0 8px 8px 0',
       float: 'left'
+    },
+    adornedStart: {},
+    adornedEnd: {},
+    adornmentRoot: {
+      '&$standard': {
+        marginTop: '8px'
+      },
+      '&$outlined': {
+        paddingTop: '14px',
+        paddingBottom: 0
+      },
+      '&$filled': {
+        paddingTop: '22px'
+      },
+      '& > *:first-child': {
+        marginTop: '-3.5px'
+      }
+    },
+    inputAdornedStart: {
+      '&:not($standard)': {
+        paddingLeft: 34,
+        marginLeft: -38
+      }
+    },
+    inputAdornedEnd: {
+      '&:not($standard)': {
+        paddingRight: 30,
+        marginRight: -38
+      }
     }
   }
 }
@@ -412,12 +492,14 @@ class ChipInput extends React.Component {
       chipRenderer = defaultChipRenderer,
       classes,
       className,
+      color,
       clearInputValueOnChange,
       defaultValue,
       dataSource,
       dataSourceConfig,
       disabled,
       disableUnderline,
+      endAdornment,
       error,
       filter,
       FormHelperTextProps,
@@ -426,6 +508,7 @@ class ChipInput extends React.Component {
       helperText,
       id,
       InputProps = {},
+      inputAdornmentRenderer = defaultInputAdornmentRenderer,
       inputRef,
       InputLabelProps = {},
       inputValue,
@@ -444,15 +527,17 @@ class ChipInput extends React.Component {
       placeholder,
       required,
       rootRef,
+      startAdornment,
       value,
       variant,
       ...other
     } = this.props
 
     const chips = value || this.state.chips
-    const actualInputValue = inputValue != null ? inputValue : this.state.inputValue
+    const actualInputValue = inputValue || this.state.inputValue
 
-    const hasInput = (this.props.value || actualInputValue).length > 0 || actualInputValue.length > 0
+    const hasInput = (value || chips).length > 0 || actualInputValue.length > 0
+    const hasChips = chips.length > 0
     const shrinkFloatingLabel = InputLabelProps.shrink != null
       ? InputLabelProps.shrink
       : (label != null && (hasInput || this.state.isFocused))
@@ -468,7 +553,8 @@ class ChipInput extends React.Component {
           isFocused: this.state.focusedChip === i,
           handleClick: () => this.setState({ focusedChip: i }),
           handleDelete: () => this.handleDeleteChip(value, i),
-          className: classes.chip
+          className: classes.chip,
+          color: color
         },
         i
       )
@@ -485,15 +571,27 @@ class ChipInput extends React.Component {
         0
     }
 
-    if (variant !== 'standard') {
-      InputMore.startAdornment = (
-        <React.Fragment>{chipComponents}</React.Fragment>
-      )
-    } else {
+    if (variant === 'standard') {
       InputProps.disableUnderline = true
     }
+    InputMore.startAdornment = (
+      <React.Fragment>{chipComponents}</React.Fragment>
+    )
+    InputMore.endAdornment = null
 
     const InputComponent = variantComponent[variant]
+    const hasAdornment = !!InputProps.startAdornment || startAdornment || InputProps.endAdornment || endAdornment
+    const adornmentClasses = {
+      root: cx(
+        classes.inputRoot,
+        classes[variant],
+        {
+          [classes.adornmentRoot]: hasAdornment
+        }
+      )
+    }
+    const renderedStartAdornment = (InputProps.startAdornment || startAdornment) ? inputAdornmentRenderer(InputProps.startAdornment || startAdornment, adornmentClasses) : null
+    const renderedEndAdornment = (InputProps.endAdornment || endAdornment) ? inputAdornmentRenderer(InputProps.endAdornment || endAdornment, adornmentClasses) : null
 
     return (
       <FormControl
@@ -510,7 +608,14 @@ class ChipInput extends React.Component {
         {label && (
           <InputLabel
             htmlFor={id}
-            classes={{root: cx(classes[variant], classes.label), shrink: classes.labelShrink}}
+            classes={{
+              root: cx(
+                classes[variant],
+                classes.label,
+                {
+                  [classes.adornedStart]: renderedStartAdornment
+                }),
+              shrink: classes.labelShrink}}
             shrink={shrinkFloatingLabel}
             focused={this.state.isFocused}
             variant={variant}
@@ -530,15 +635,25 @@ class ChipInput extends React.Component {
               [classes.underline]: !disableUnderline && variant === 'standard',
               [classes.disabled]: disabled,
               [classes.labeled]: label != null,
-              [classes.error]: error
+              [classes.error]: error,
+              [classes.adornedStart]: renderedStartAdornment,
+              [classes.adornedEnd]: renderedEndAdornment
             })}
         >
-          {variant === 'standard' && chipComponents}
+          {renderedStartAdornment}
           <InputComponent
             ref={this.input}
             classes={{
-              input: cx(classes.input, classes[variant]),
-              root: cx(classes.inputRoot, classes[variant])
+              input: cx(classes.input, classes[variant],
+                {
+                  [classes.hasChips]: hasChips
+                }),
+              root: cx(classes.inputRoot, classes[variant],
+                {
+                  [classes.inputAdornedStart]: renderedStartAdornment,
+                  [classes.inputAdornedEnd]: renderedEndAdornment,
+                  [classes.hasChips]: hasChips
+                })
             }}
             id={id}
             value={actualInputValue}
@@ -555,6 +670,7 @@ class ChipInput extends React.Component {
             {...InputProps}
             {...InputMore}
           />
+          {renderedEndAdornment}
         </div>
         {helperText && (
           <FormHelperText
@@ -580,6 +696,8 @@ ChipInput.propTypes = {
   chipRenderer: PropTypes.func,
   /** Whether the input value should be cleared if the `value` prop is changed. */
   clearInputValueOnChange: PropTypes.bool,
+  /** The color to render the chip based on the color palette **/
+  color: PropTypes.oneOf(['default', 'primary', 'secondary']),
   /** Data source for auto complete. This should be an array of strings or objects. */
   dataSource: PropTypes.array,
   /** Config for objects list dataSource, e.g. `{ text: 'text', value: 'value' }`. If not specified, the `dataSource` must be a flat array of strings or a custom `chipRenderer` must be set to handle the objects. */
@@ -593,6 +711,8 @@ ChipInput.propTypes = {
   disabled: PropTypes.bool,
   /** Disable the input underline. Only valid for 'standard' variant */
   disableUnderline: PropTypes.bool,
+  /** End `InputAdornment` for this component. */
+  endAdornment: PropTypes.node,
   /** Props to pass through to the `FormHelperText` component. */
   FormHelperTextProps: PropTypes.object,
   /** If true, the chip input will fill the available width. */
@@ -601,6 +721,8 @@ ChipInput.propTypes = {
   fullWidthInput: PropTypes.bool,
   /** Helper text that is displayed below the input. */
   helperText: PropTypes.node,
+  /** A function of the type `({ inputAdornment, additionalClasses }) => node` that returns an Input Adornment to render within the input. This can be used to overwrite the default element used to wrap the input adornment or to overwrite how the styles are applied to the input adornment. */
+  inputAdornmentRenderer: PropTypes.func,
   /** Props to pass through to the `InputLabel`. */
   InputLabelProps: PropTypes.object,
   /** Props to pass through to the `Input`. */
@@ -625,6 +747,8 @@ ChipInput.propTypes = {
   onUpdateInput: PropTypes.func,
   /** A placeholder that is displayed if the input has no values. */
   placeholder: PropTypes.string,
+  /** Start `InputAdornment` for this component. */
+  startAdornment: PropTypes.node,
   /** The chips to display (enables controlled mode if set). */
   value: PropTypes.array,
   /** The variant of the Input component */
@@ -635,6 +759,7 @@ ChipInput.defaultProps = {
   allowDuplicates: false,
   blurBehavior: 'clear',
   clearInputValueOnChange: false,
+  color: 'default',
   disableUnderline: false,
   newChipKeyCodes: [13],
   variant: 'standard'
@@ -642,7 +767,7 @@ ChipInput.defaultProps = {
 
 export default withStyles(styles)(ChipInput)
 
-export const defaultChipRenderer = ({ value, text, isFocused, isDisabled, handleClick, handleDelete, className }, key) => (
+export const defaultChipRenderer = ({ value, text, isFocused, isDisabled, handleClick, handleDelete, className, color }, key) => (
   <Chip
     key={key}
     className={className}
@@ -650,5 +775,17 @@ export const defaultChipRenderer = ({ value, text, isFocused, isDisabled, handle
     onClick={handleClick}
     onDelete={handleDelete}
     label={text}
+    color={color || 'default'}
   />
 )
+
+export const defaultInputAdornmentRenderer = (inputAdornment, additionalClasses) => {
+  const classes = inputAdornment.props.classes || {}
+  const rootClass = cx(additionalClasses.root, classes.root)
+  const filled = cx(additionalClasses.filled, classes.filled)
+  const positionStart = cx(additionalClasses.positionStart, classes.positionStart)
+  const positionEnd = cx(additionalClasses.positionEnd, classes.positionEnd)
+  return (
+    <InputAdornment {...inputAdornment.props} classes={{root: rootClass, filled: filled, positionStart: positionStart, positionEnd: positionEnd}} />
+  )
+}
diff --git a/src/ChipInput.spec.js b/src/ChipInput.spec.js
index dfbfedc..18301cf 100644
--- a/src/ChipInput.spec.js
+++ b/src/ChipInput.spec.js
@@ -345,6 +345,7 @@ describe('custom chips', () => {
       text: 'a',
       chip: 'a',
       className: expect.any(String),
+      color: 'default',
       isDisabled: false,
       isFocused: false,
       handleClick: expect.any(Function),
diff --git a/src/__snapshots__/ChipInput.spec.js.snap b/src/__snapshots__/ChipInput.spec.js.snap
index a618bf3..3476083 100644
--- a/src/__snapshots__/ChipInput.spec.js.snap
+++ b/src/__snapshots__/ChipInput.spec.js.snap
@@ -14,26 +14,33 @@ exports[`uncontrolled mode matches the snapshot 1`] = `
     blurBehavior="clear"
     classes={
       Object {
-        "chip": "ChipInput-chip-17",
-        "chipContainer": "ChipInput-chipContainer-4",
-        "disabled": "ChipInput-disabled-14",
-        "error": "ChipInput-error-16",
-        "filled": "ChipInput-filled-7",
-        "focused": "ChipInput-focused-13",
-        "helperText": "ChipInput-helperText-11",
-        "inkbar": "ChipInput-inkbar-12",
+        "adornedEnd": "ChipInput-adornedEnd-20",
+        "adornedStart": "ChipInput-adornedStart-19",
+        "adornmentRoot": "ChipInput-adornmentRoot-21",
+        "chip": "ChipInput-chip-18",
+        "chipContainer": "ChipInput-chipContainer-5",
+        "disabled": "ChipInput-disabled-15",
+        "error": "ChipInput-error-17",
+        "filled": "ChipInput-filled-8",
+        "focused": "ChipInput-focused-14",
+        "hasChips": "ChipInput-hasChips-4",
+        "helperText": "ChipInput-helperText-12",
+        "inkbar": "ChipInput-inkbar-13",
         "input": "ChipInput-input-3",
+        "inputAdornedEnd": "ChipInput-inputAdornedEnd-23",
+        "inputAdornedStart": "ChipInput-inputAdornedStart-22",
         "inputRoot": "ChipInput-inputRoot-2",
-        "label": "ChipInput-label-9",
-        "labelShrink": "ChipInput-labelShrink-10",
-        "labeled": "ChipInput-labeled-8",
-        "outlined": "ChipInput-outlined-5",
+        "label": "ChipInput-label-10",
+        "labelShrink": "ChipInput-labelShrink-11",
+        "labeled": "ChipInput-labeled-9",
+        "outlined": "ChipInput-outlined-6",
         "root": "ChipInput-root-1",
-        "standard": "ChipInput-standard-6",
-        "underline": "ChipInput-underline-15",
+        "standard": "ChipInput-standard-7",
+        "underline": "ChipInput-underline-16",
       }
     }
     clearInputValueOnChange={false}
+    color="default"
     defaultValue={
       Array [
         "foo",
@@ -57,10 +64,10 @@ exports[`uncontrolled mode matches the snapshot 1`] = `
         className="ChipInput-root-1"
         classes={
           Object {
-            "fullWidth": "MuiFormControl-fullWidth-21",
-            "marginDense": "MuiFormControl-marginDense-20",
-            "marginNormal": "MuiFormControl-marginNormal-19",
-            "root": "MuiFormControl-root-18",
+            "fullWidth": "MuiFormControl-fullWidth-27",
+            "marginDense": "MuiFormControl-marginDense-26",
+            "marginNormal": "MuiFormControl-marginNormal-25",
+            "root": "MuiFormControl-root-24",
           }
         }
         component="div"
@@ -73,276 +80,21 @@ exports[`uncontrolled mode matches the snapshot 1`] = `
         variant="standard"
       >
         <div
-          className="MuiFormControl-root-18 ChipInput-root-1"
+          className="MuiFormControl-root-24 ChipInput-root-1"
           onClick={[Function]}
         >
           <div
-            className="ChipInput-standard-6 ChipInput-chipContainer-4 ChipInput-inkbar-12 ChipInput-underline-15"
+            className="ChipInput-standard-7 ChipInput-chipContainer-5 ChipInput-inkbar-13 ChipInput-underline-16"
           >
-            <WithStyles(Chip)
-              className="ChipInput-chip-17"
-              key="0"
-              label="foo"
-              onClick={[Function]}
-              onDelete={[Function]}
-              style={
-                Object {
-                  "backgroundColor": undefined,
-                  "pointerEvents": undefined,
-                }
-              }
-            >
-              <Chip
-                className="ChipInput-chip-17"
-                classes={
-                  Object {
-                    "avatar": "MuiChip-avatar-34",
-                    "avatarChildren": "MuiChip-avatarChildren-37",
-                    "avatarColorPrimary": "MuiChip-avatarColorPrimary-35",
-                    "avatarColorSecondary": "MuiChip-avatarColorSecondary-36",
-                    "clickable": "MuiChip-clickable-25",
-                    "clickableColorPrimary": "MuiChip-clickableColorPrimary-26",
-                    "clickableColorSecondary": "MuiChip-clickableColorSecondary-27",
-                    "colorPrimary": "MuiChip-colorPrimary-23",
-                    "colorSecondary": "MuiChip-colorSecondary-24",
-                    "deletable": "MuiChip-deletable-28",
-                    "deletableColorPrimary": "MuiChip-deletableColorPrimary-29",
-                    "deletableColorSecondary": "MuiChip-deletableColorSecondary-30",
-                    "deleteIcon": "MuiChip-deleteIcon-42",
-                    "deleteIconColorPrimary": "MuiChip-deleteIconColorPrimary-43",
-                    "deleteIconColorSecondary": "MuiChip-deleteIconColorSecondary-44",
-                    "deleteIconOutlinedColorPrimary": "MuiChip-deleteIconOutlinedColorPrimary-45",
-                    "deleteIconOutlinedColorSecondary": "MuiChip-deleteIconOutlinedColorSecondary-46",
-                    "icon": "MuiChip-icon-38",
-                    "iconColorPrimary": "MuiChip-iconColorPrimary-39",
-                    "iconColorSecondary": "MuiChip-iconColorSecondary-40",
-                    "label": "MuiChip-label-41",
-                    "outlined": "MuiChip-outlined-31",
-                    "outlinedPrimary": "MuiChip-outlinedPrimary-32",
-                    "outlinedSecondary": "MuiChip-outlinedSecondary-33",
-                    "root": "MuiChip-root-22",
-                  }
-                }
-                color="default"
-                component="div"
-                label="foo"
-                onClick={[Function]}
-                onDelete={[Function]}
-                style={
-                  Object {
-                    "backgroundColor": undefined,
-                    "pointerEvents": undefined,
-                  }
-                }
-                variant="default"
-              >
-                <div
-                  className="MuiChip-root-22 MuiChip-clickable-25 MuiChip-deletable-28 ChipInput-chip-17"
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  onKeyUp={[Function]}
-                  role="button"
-                  style={
-                    Object {
-                      "backgroundColor": undefined,
-                      "pointerEvents": undefined,
-                    }
-                  }
-                  tabIndex={0}
-                >
-                  <span
-                    className="MuiChip-label-41"
-                  >
-                    foo
-                  </span>
-                  <pure(Cancel)
-                    className="MuiChip-deleteIcon-42"
-                    onClick={[Function]}
-                  >
-                    <Cancel
-                      className="MuiChip-deleteIcon-42"
-                      onClick={[Function]}
-                    >
-                      <WithStyles(SvgIcon)
-                        className="MuiChip-deleteIcon-42"
-                        onClick={[Function]}
-                      >
-                        <SvgIcon
-                          className="MuiChip-deleteIcon-42"
-                          classes={
-                            Object {
-                              "colorAction": "MuiSvgIcon-colorAction-50",
-                              "colorDisabled": "MuiSvgIcon-colorDisabled-52",
-                              "colorError": "MuiSvgIcon-colorError-51",
-                              "colorPrimary": "MuiSvgIcon-colorPrimary-48",
-                              "colorSecondary": "MuiSvgIcon-colorSecondary-49",
-                              "fontSizeInherit": "MuiSvgIcon-fontSizeInherit-53",
-                              "fontSizeLarge": "MuiSvgIcon-fontSizeLarge-55",
-                              "fontSizeSmall": "MuiSvgIcon-fontSizeSmall-54",
-                              "root": "MuiSvgIcon-root-47",
-                            }
-                          }
-                          color="inherit"
-                          component="svg"
-                          fontSize="default"
-                          onClick={[Function]}
-                          viewBox="0 0 24 24"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            className="MuiSvgIcon-root-47 MuiChip-deleteIcon-42"
-                            focusable="false"
-                            onClick={[Function]}
-                            role="presentation"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
-                            />
-                          </svg>
-                        </SvgIcon>
-                      </WithStyles(SvgIcon)>
-                    </Cancel>
-                  </pure(Cancel)>
-                </div>
-              </Chip>
-            </WithStyles(Chip)>
-            <WithStyles(Chip)
-              className="ChipInput-chip-17"
-              key="1"
-              label="bar"
-              onClick={[Function]}
-              onDelete={[Function]}
-              style={
-                Object {
-                  "backgroundColor": undefined,
-                  "pointerEvents": undefined,
-                }
-              }
-            >
-              <Chip
-                className="ChipInput-chip-17"
-                classes={
-                  Object {
-                    "avatar": "MuiChip-avatar-34",
-                    "avatarChildren": "MuiChip-avatarChildren-37",
-                    "avatarColorPrimary": "MuiChip-avatarColorPrimary-35",
-                    "avatarColorSecondary": "MuiChip-avatarColorSecondary-36",
-                    "clickable": "MuiChip-clickable-25",
-                    "clickableColorPrimary": "MuiChip-clickableColorPrimary-26",
-                    "clickableColorSecondary": "MuiChip-clickableColorSecondary-27",
-                    "colorPrimary": "MuiChip-colorPrimary-23",
-                    "colorSecondary": "MuiChip-colorSecondary-24",
-                    "deletable": "MuiChip-deletable-28",
-                    "deletableColorPrimary": "MuiChip-deletableColorPrimary-29",
-                    "deletableColorSecondary": "MuiChip-deletableColorSecondary-30",
-                    "deleteIcon": "MuiChip-deleteIcon-42",
-                    "deleteIconColorPrimary": "MuiChip-deleteIconColorPrimary-43",
-                    "deleteIconColorSecondary": "MuiChip-deleteIconColorSecondary-44",
-                    "deleteIconOutlinedColorPrimary": "MuiChip-deleteIconOutlinedColorPrimary-45",
-                    "deleteIconOutlinedColorSecondary": "MuiChip-deleteIconOutlinedColorSecondary-46",
-                    "icon": "MuiChip-icon-38",
-                    "iconColorPrimary": "MuiChip-iconColorPrimary-39",
-                    "iconColorSecondary": "MuiChip-iconColorSecondary-40",
-                    "label": "MuiChip-label-41",
-                    "outlined": "MuiChip-outlined-31",
-                    "outlinedPrimary": "MuiChip-outlinedPrimary-32",
-                    "outlinedSecondary": "MuiChip-outlinedSecondary-33",
-                    "root": "MuiChip-root-22",
-                  }
-                }
-                color="default"
-                component="div"
-                label="bar"
-                onClick={[Function]}
-                onDelete={[Function]}
-                style={
-                  Object {
-                    "backgroundColor": undefined,
-                    "pointerEvents": undefined,
-                  }
-                }
-                variant="default"
-              >
-                <div
-                  className="MuiChip-root-22 MuiChip-clickable-25 MuiChip-deletable-28 ChipInput-chip-17"
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  onKeyUp={[Function]}
-                  role="button"
-                  style={
-                    Object {
-                      "backgroundColor": undefined,
-                      "pointerEvents": undefined,
-                    }
-                  }
-                  tabIndex={0}
-                >
-                  <span
-                    className="MuiChip-label-41"
-                  >
-                    bar
-                  </span>
-                  <pure(Cancel)
-                    className="MuiChip-deleteIcon-42"
-                    onClick={[Function]}
-                  >
-                    <Cancel
-                      className="MuiChip-deleteIcon-42"
-                      onClick={[Function]}
-                    >
-                      <WithStyles(SvgIcon)
-                        className="MuiChip-deleteIcon-42"
-                        onClick={[Function]}
-                      >
-                        <SvgIcon
-                          className="MuiChip-deleteIcon-42"
-                          classes={
-                            Object {
-                              "colorAction": "MuiSvgIcon-colorAction-50",
-                              "colorDisabled": "MuiSvgIcon-colorDisabled-52",
-                              "colorError": "MuiSvgIcon-colorError-51",
-                              "colorPrimary": "MuiSvgIcon-colorPrimary-48",
-                              "colorSecondary": "MuiSvgIcon-colorSecondary-49",
-                              "fontSizeInherit": "MuiSvgIcon-fontSizeInherit-53",
-                              "fontSizeLarge": "MuiSvgIcon-fontSizeLarge-55",
-                              "fontSizeSmall": "MuiSvgIcon-fontSizeSmall-54",
-                              "root": "MuiSvgIcon-root-47",
-                            }
-                          }
-                          color="inherit"
-                          component="svg"
-                          fontSize="default"
-                          onClick={[Function]}
-                          viewBox="0 0 24 24"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            className="MuiSvgIcon-root-47 MuiChip-deleteIcon-42"
-                            focusable="false"
-                            onClick={[Function]}
-                            role="presentation"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
-                            />
-                          </svg>
-                        </SvgIcon>
-                      </WithStyles(SvgIcon)>
-                    </Cancel>
-                  </pure(Cancel)>
-                </div>
-              </Chip>
-            </WithStyles(Chip)>
             <WithStyles(Input)
               classes={
                 Object {
-                  "input": "ChipInput-input-3 ChipInput-standard-6",
-                  "root": "ChipInput-inputRoot-2 ChipInput-standard-6",
+                  "input": "ChipInput-input-3 ChipInput-standard-7 ChipInput-hasChips-4",
+                  "root": "ChipInput-inputRoot-2 ChipInput-standard-7 ChipInput-hasChips-4",
                 }
               }
               disableUnderline={true}
+              endAdornment={null}
               inputRef={[Function]}
               onBlur={[Function]}
               onChange={[Function]}
@@ -350,27 +102,59 @@ exports[`uncontrolled mode matches the snapshot 1`] = `
               onKeyDown={[Function]}
               onKeyPress={[Function]}
               onKeyUp={[Function]}
+              placeholder={null}
+              startAdornment={
+                <UNDEFINED>
+                  <WithStyles(Chip)
+                    className="ChipInput-chip-18"
+                    color="default"
+                    label="foo"
+                    onClick={[Function]}
+                    onDelete={[Function]}
+                    style={
+                      Object {
+                        "backgroundColor": undefined,
+                        "pointerEvents": undefined,
+                      }
+                    }
+                  />
+                  <WithStyles(Chip)
+                    className="ChipInput-chip-18"
+                    color="default"
+                    label="bar"
+                    onClick={[Function]}
+                    onDelete={[Function]}
+                    style={
+                      Object {
+                        "backgroundColor": undefined,
+                        "pointerEvents": undefined,
+                      }
+                    }
+                  />
+                </UNDEFINED>
+              }
               value=""
             >
               <Input
                 classes={
                   Object {
-                    "disabled": "MuiInput-disabled-59",
-                    "error": "MuiInput-error-61",
-                    "focused": "MuiInput-focused-58",
-                    "formControl": "MuiInput-formControl-57",
-                    "fullWidth": "MuiInput-fullWidth-63",
-                    "input": "MuiInput-input-64 ChipInput-input-3 ChipInput-standard-6",
-                    "inputMarginDense": "MuiInput-inputMarginDense-65",
-                    "inputMultiline": "MuiInput-inputMultiline-66",
-                    "inputType": "MuiInput-inputType-67",
-                    "inputTypeSearch": "MuiInput-inputTypeSearch-68",
-                    "multiline": "MuiInput-multiline-62",
-                    "root": "MuiInput-root-56 ChipInput-inputRoot-2 ChipInput-standard-6",
-                    "underline": "MuiInput-underline-60",
+                    "disabled": "MuiInput-disabled-31",
+                    "error": "MuiInput-error-33",
+                    "focused": "MuiInput-focused-30",
+                    "formControl": "MuiInput-formControl-29",
+                    "fullWidth": "MuiInput-fullWidth-35",
+                    "input": "MuiInput-input-36 ChipInput-input-3 ChipInput-standard-7 ChipInput-hasChips-4",
+                    "inputMarginDense": "MuiInput-inputMarginDense-37",
+                    "inputMultiline": "MuiInput-inputMultiline-38",
+                    "inputType": "MuiInput-inputType-39",
+                    "inputTypeSearch": "MuiInput-inputTypeSearch-40",
+                    "multiline": "MuiInput-multiline-34",
+                    "root": "MuiInput-root-28 ChipInput-inputRoot-2 ChipInput-standard-7 ChipInput-hasChips-4",
+                    "underline": "MuiInput-underline-32",
                   }
                 }
                 disableUnderline={true}
+                endAdornment={null}
                 inputRef={[Function]}
                 onBlur={[Function]}
                 onChange={[Function]}
@@ -378,26 +162,58 @@ exports[`uncontrolled mode matches the snapshot 1`] = `
                 onKeyDown={[Function]}
                 onKeyPress={[Function]}
                 onKeyUp={[Function]}
+                placeholder={null}
+                startAdornment={
+                  <UNDEFINED>
+                    <WithStyles(Chip)
+                      className="ChipInput-chip-18"
+                      color="default"
+                      label="foo"
+                      onClick={[Function]}
+                      onDelete={[Function]}
+                      style={
+                        Object {
+                          "backgroundColor": undefined,
+                          "pointerEvents": undefined,
+                        }
+                      }
+                    />
+                    <WithStyles(Chip)
+                      className="ChipInput-chip-18"
+                      color="default"
+                      label="bar"
+                      onClick={[Function]}
+                      onDelete={[Function]}
+                      style={
+                        Object {
+                          "backgroundColor": undefined,
+                          "pointerEvents": undefined,
+                        }
+                      }
+                    />
+                  </UNDEFINED>
+                }
                 value=""
               >
-                <WithStyles(WithFormControlContext(InputBase))
+                <WithStyles(InputBase)
                   classes={
                     Object {
-                      "disabled": "MuiInput-disabled-59",
-                      "error": "MuiInput-error-61",
-                      "focused": "MuiInput-focused-58",
-                      "formControl": "MuiInput-formControl-57",
-                      "fullWidth": "MuiInput-fullWidth-63",
-                      "input": "MuiInput-input-64 ChipInput-input-3 ChipInput-standard-6",
-                      "inputMarginDense": "MuiInput-inputMarginDense-65",
-                      "inputMultiline": "MuiInput-inputMultiline-66",
-                      "inputType": "MuiInput-inputType-67",
-                      "inputTypeSearch": "MuiInput-inputTypeSearch-68",
-                      "multiline": "MuiInput-multiline-62",
-                      "root": "MuiInput-root-56 ChipInput-inputRoot-2 ChipInput-standard-6",
+                      "disabled": "MuiInput-disabled-31",
+                      "error": "MuiInput-error-33",
+                      "focused": "MuiInput-focused-30",
+                      "formControl": "MuiInput-formControl-29",
+                      "fullWidth": "MuiInput-fullWidth-35",
+                      "input": "MuiInput-input-36 ChipInput-input-3 ChipInput-standard-7 ChipInput-hasChips-4",
+                      "inputMarginDense": "MuiInput-inputMarginDense-37",
+                      "inputMultiline": "MuiInput-inputMultiline-38",
+                      "inputType": "MuiInput-inputType-39",
+                      "inputTypeSearch": "MuiInput-inputTypeSearch-40",
+                      "multiline": "MuiInput-multiline-34",
+                      "root": "MuiInput-root-28 ChipInput-inputRoot-2 ChipInput-standard-7 ChipInput-hasChips-4",
                       "underline": null,
                     }
                   }
+                  endAdornment={null}
                   fullWidth={false}
                   inputComponent="input"
                   inputRef={[Function]}
@@ -408,31 +224,63 @@ exports[`uncontrolled mode matches the snapshot 1`] = `
                   onKeyDown={[Function]}
                   onKeyPress={[Function]}
                   onKeyUp={[Function]}
+                  placeholder={null}
+                  startAdornment={
+                    <UNDEFINED>
+                      <WithStyles(Chip)
+                        className="ChipInput-chip-18"
+                        color="default"
+                        label="foo"
+                        onClick={[Function]}
+                        onDelete={[Function]}
+                        style={
+                          Object {
+                            "backgroundColor": undefined,
+                            "pointerEvents": undefined,
+                          }
+                        }
+                      />
+                      <WithStyles(Chip)
+                        className="ChipInput-chip-18"
+                        color="default"
+                        label="bar"
+                        onClick={[Function]}
+                        onDelete={[Function]}
+                        style={
+                          Object {
+                            "backgroundColor": undefined,
+                            "pointerEvents": undefined,
+                          }
+                        }
+                      />
+                    </UNDEFINED>
+                  }
                   type="text"
                   value=""
                 >
-                  <WithFormControlContext(InputBase)
+                  <InputBase
                     classes={
                       Object {
-                        "adornedEnd": "MuiInputBase-adornedEnd-74",
-                        "adornedStart": "MuiInputBase-adornedStart-73",
-                        "disabled": "MuiInputBase-disabled-72 MuiInput-disabled-59",
-                        "error": "MuiInputBase-error-75 MuiInput-error-61",
-                        "focused": "MuiInputBase-focused-71 MuiInput-focused-58",
-                        "formControl": "MuiInputBase-formControl-70 MuiInput-formControl-57",
-                        "fullWidth": "MuiInputBase-fullWidth-78 MuiInput-fullWidth-63",
-                        "input": "MuiInputBase-input-79 MuiInput-input-64 ChipInput-input-3 ChipInput-standard-6",
-                        "inputAdornedEnd": "MuiInputBase-inputAdornedEnd-85",
-                        "inputAdornedStart": "MuiInputBase-inputAdornedStart-84",
-                        "inputMarginDense": "MuiInputBase-inputMarginDense-80 MuiInput-inputMarginDense-65",
-                        "inputMultiline": "MuiInputBase-inputMultiline-81 MuiInput-inputMultiline-66",
-                        "inputType": "MuiInputBase-inputType-82 MuiInput-inputType-67",
-                        "inputTypeSearch": "MuiInputBase-inputTypeSearch-83 MuiInput-inputTypeSearch-68",
-                        "marginDense": "MuiInputBase-marginDense-76",
-                        "multiline": "MuiInputBase-multiline-77 MuiInput-multiline-62",
-                        "root": "MuiInputBase-root-69 MuiInput-root-56 ChipInput-inputRoot-2 ChipInput-standard-6",
+                        "adornedEnd": "MuiInputBase-adornedEnd-46",
+                        "adornedStart": "MuiInputBase-adornedStart-45",
+                        "disabled": "MuiInputBase-disabled-44 MuiInput-disabled-31",
+                        "error": "MuiInputBase-error-47 MuiInput-error-33",
+                        "focused": "MuiInputBase-focused-43 MuiInput-focused-30",
+                        "formControl": "MuiInputBase-formControl-42 MuiInput-formControl-29",
+                        "fullWidth": "MuiInputBase-fullWidth-50 MuiInput-fullWidth-35",
+                        "input": "MuiInputBase-input-51 MuiInput-input-36 ChipInput-input-3 ChipInput-standard-7 ChipInput-hasChips-4",
+                        "inputAdornedEnd": "MuiInputBase-inputAdornedEnd-57",
+                        "inputAdornedStart": "MuiInputBase-inputAdornedStart-56",
+                        "inputMarginDense": "MuiInputBase-inputMarginDense-52 MuiInput-inputMarginDense-37",
+                        "inputMultiline": "MuiInputBase-inputMultiline-53 MuiInput-inputMultiline-38",
+                        "inputType": "MuiInputBase-inputType-54 MuiInput-inputType-39",
+                        "inputTypeSearch": "MuiInputBase-inputTypeSearch-55 MuiInput-inputTypeSearch-40",
+                        "marginDense": "MuiInputBase-marginDense-48",
+                        "multiline": "MuiInputBase-multiline-49 MuiInput-multiline-34",
+                        "root": "MuiInputBase-root-41 MuiInput-root-28 ChipInput-inputRoot-2 ChipInput-standard-7 ChipInput-hasChips-4",
                       }
                     }
+                    endAdornment={null}
                     fullWidth={false}
                     inputComponent="input"
                     inputRef={[Function]}
@@ -443,82 +291,322 @@ exports[`uncontrolled mode matches the snapshot 1`] = `
                     onKeyDown={[Function]}
                     onKeyPress={[Function]}
                     onKeyUp={[Function]}
+                    placeholder={null}
+                    startAdornment={
+                      <UNDEFINED>
+                        <WithStyles(Chip)
+                          className="ChipInput-chip-18"
+                          color="default"
+                          label="foo"
+                          onClick={[Function]}
+                          onDelete={[Function]}
+                          style={
+                            Object {
+                              "backgroundColor": undefined,
+                              "pointerEvents": undefined,
+                            }
+                          }
+                        />
+                        <WithStyles(Chip)
+                          className="ChipInput-chip-18"
+                          color="default"
+                          label="bar"
+                          onClick={[Function]}
+                          onDelete={[Function]}
+                          style={
+                            Object {
+                              "backgroundColor": undefined,
+                              "pointerEvents": undefined,
+                            }
+                          }
+                        />
+                      </UNDEFINED>
+                    }
                     type="text"
                     value=""
                   >
-                    <InputBase
-                      classes={
-                        Object {
-                          "adornedEnd": "MuiInputBase-adornedEnd-74",
-                          "adornedStart": "MuiInputBase-adornedStart-73",
-                          "disabled": "MuiInputBase-disabled-72 MuiInput-disabled-59",
-                          "error": "MuiInputBase-error-75 MuiInput-error-61",
-                          "focused": "MuiInputBase-focused-71 MuiInput-focused-58",
-                          "formControl": "MuiInputBase-formControl-70 MuiInput-formControl-57",
-                          "fullWidth": "MuiInputBase-fullWidth-78 MuiInput-fullWidth-63",
-                          "input": "MuiInputBase-input-79 MuiInput-input-64 ChipInput-input-3 ChipInput-standard-6",
-                          "inputAdornedEnd": "MuiInputBase-inputAdornedEnd-85",
-                          "inputAdornedStart": "MuiInputBase-inputAdornedStart-84",
-                          "inputMarginDense": "MuiInputBase-inputMarginDense-80 MuiInput-inputMarginDense-65",
-                          "inputMultiline": "MuiInputBase-inputMultiline-81 MuiInput-inputMultiline-66",
-                          "inputType": "MuiInputBase-inputType-82 MuiInput-inputType-67",
-                          "inputTypeSearch": "MuiInputBase-inputTypeSearch-83 MuiInput-inputTypeSearch-68",
-                          "marginDense": "MuiInputBase-marginDense-76",
-                          "multiline": "MuiInputBase-multiline-77 MuiInput-multiline-62",
-                          "root": "MuiInputBase-root-69 MuiInput-root-56 ChipInput-inputRoot-2 ChipInput-standard-6",
-                        }
-                      }
-                      fullWidth={false}
-                      inputComponent="input"
-                      inputRef={[Function]}
-                      muiFormControl={
-                        Object {
-                          "adornedStart": false,
-                          "disabled": false,
-                          "error": false,
-                          "filled": false,
-                          "focused": false,
-                          "margin": "none",
-                          "onBlur": [Function],
-                          "onEmpty": [Function],
-                          "onFilled": [Function],
-                          "onFocus": [Function],
-                          "required": false,
-                          "variant": "standard",
-                        }
-                      }
-                      multiline={false}
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      onKeyDown={[Function]}
+                    <div
+                      className="MuiInputBase-root-41 MuiInput-root-28 ChipInput-inputRoot-2 ChipInput-standard-7 ChipInput-hasChips-4 MuiInputBase-formControl-42 MuiInput-formControl-29 MuiInputBase-adornedStart-45"
+                      onClick={[Function]}
                       onKeyPress={[Function]}
-                      onKeyUp={[Function]}
-                      type="text"
-                      value=""
                     >
-                      <div
-                        className="MuiInputBase-root-69 MuiInput-root-56 ChipInput-inputRoot-2 ChipInput-standard-6 MuiInputBase-formControl-70 MuiInput-formControl-57"
+                      <WithStyles(Chip)
+                        className="ChipInput-chip-18"
+                        color="default"
+                        key="0"
+                        label="foo"
                         onClick={[Function]}
-                        onKeyPress={[Function]}
+                        onDelete={[Function]}
+                        style={
+                          Object {
+                            "backgroundColor": undefined,
+                            "pointerEvents": undefined,
+                          }
+                        }
                       >
-                        <input
-                          aria-invalid={false}
-                          className="MuiInputBase-input-79 MuiInput-input-64 ChipInput-input-3 ChipInput-standard-6"
-                          disabled={false}
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          onKeyDown={[Function]}
-                          onKeyUp={[Function]}
-                          required={false}
-                          type="text"
-                          value=""
-                        />
-                      </div>
-                    </InputBase>
-                  </WithFormControlContext(InputBase)>
-                </WithStyles(WithFormControlContext(InputBase))>
+                        <Chip
+                          className="ChipInput-chip-18"
+                          classes={
+                            Object {
+                              "avatar": "MuiChip-avatar-70",
+                              "avatarChildren": "MuiChip-avatarChildren-73",
+                              "avatarColorPrimary": "MuiChip-avatarColorPrimary-71",
+                              "avatarColorSecondary": "MuiChip-avatarColorSecondary-72",
+                              "clickable": "MuiChip-clickable-61",
+                              "clickableColorPrimary": "MuiChip-clickableColorPrimary-62",
+                              "clickableColorSecondary": "MuiChip-clickableColorSecondary-63",
+                              "colorPrimary": "MuiChip-colorPrimary-59",
+                              "colorSecondary": "MuiChip-colorSecondary-60",
+                              "deletable": "MuiChip-deletable-64",
+                              "deletableColorPrimary": "MuiChip-deletableColorPrimary-65",
+                              "deletableColorSecondary": "MuiChip-deletableColorSecondary-66",
+                              "deleteIcon": "MuiChip-deleteIcon-78",
+                              "deleteIconColorPrimary": "MuiChip-deleteIconColorPrimary-79",
+                              "deleteIconColorSecondary": "MuiChip-deleteIconColorSecondary-80",
+                              "deleteIconOutlinedColorPrimary": "MuiChip-deleteIconOutlinedColorPrimary-81",
+                              "deleteIconOutlinedColorSecondary": "MuiChip-deleteIconOutlinedColorSecondary-82",
+                              "icon": "MuiChip-icon-74",
+                              "iconColorPrimary": "MuiChip-iconColorPrimary-75",
+                              "iconColorSecondary": "MuiChip-iconColorSecondary-76",
+                              "label": "MuiChip-label-77",
+                              "outlined": "MuiChip-outlined-67",
+                              "outlinedPrimary": "MuiChip-outlinedPrimary-68",
+                              "outlinedSecondary": "MuiChip-outlinedSecondary-69",
+                              "root": "MuiChip-root-58",
+                            }
+                          }
+                          clickable={false}
+                          color="default"
+                          component="div"
+                          label="foo"
+                          onClick={[Function]}
+                          onDelete={[Function]}
+                          style={
+                            Object {
+                              "backgroundColor": undefined,
+                              "pointerEvents": undefined,
+                            }
+                          }
+                          variant="default"
+                        >
+                          <div
+                            className="MuiChip-root-58 MuiChip-clickable-61 MuiChip-deletable-64 ChipInput-chip-18"
+                            onClick={[Function]}
+                            onKeyDown={[Function]}
+                            onKeyUp={[Function]}
+                            role="button"
+                            style={
+                              Object {
+                                "backgroundColor": undefined,
+                                "pointerEvents": undefined,
+                              }
+                            }
+                            tabIndex={0}
+                          >
+                            <span
+                              className="MuiChip-label-77"
+                            >
+                              foo
+                            </span>
+                            <pure(Cancel)
+                              className="MuiChip-deleteIcon-78"
+                              onClick={[Function]}
+                            >
+                              <Cancel
+                                className="MuiChip-deleteIcon-78"
+                                onClick={[Function]}
+                              >
+                                <WithStyles(SvgIcon)
+                                  className="MuiChip-deleteIcon-78"
+                                  onClick={[Function]}
+                                >
+                                  <SvgIcon
+                                    className="MuiChip-deleteIcon-78"
+                                    classes={
+                                      Object {
+                                        "colorAction": "MuiSvgIcon-colorAction-86",
+                                        "colorDisabled": "MuiSvgIcon-colorDisabled-88",
+                                        "colorError": "MuiSvgIcon-colorError-87",
+                                        "colorPrimary": "MuiSvgIcon-colorPrimary-84",
+                                        "colorSecondary": "MuiSvgIcon-colorSecondary-85",
+                                        "fontSizeInherit": "MuiSvgIcon-fontSizeInherit-89",
+                                        "fontSizeLarge": "MuiSvgIcon-fontSizeLarge-91",
+                                        "fontSizeSmall": "MuiSvgIcon-fontSizeSmall-90",
+                                        "root": "MuiSvgIcon-root-83",
+                                      }
+                                    }
+                                    color="inherit"
+                                    component="svg"
+                                    fontSize="default"
+                                    onClick={[Function]}
+                                    viewBox="0 0 24 24"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      className="MuiSvgIcon-root-83 MuiChip-deleteIcon-78"
+                                      focusable="false"
+                                      onClick={[Function]}
+                                      role="presentation"
+                                      viewBox="0 0 24 24"
+                                    >
+                                      <path
+                                        d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
+                                      />
+                                    </svg>
+                                  </SvgIcon>
+                                </WithStyles(SvgIcon)>
+                              </Cancel>
+                            </pure(Cancel)>
+                          </div>
+                        </Chip>
+                      </WithStyles(Chip)>
+                      <WithStyles(Chip)
+                        className="ChipInput-chip-18"
+                        color="default"
+                        key="1"
+                        label="bar"
+                        onClick={[Function]}
+                        onDelete={[Function]}
+                        style={
+                          Object {
+                            "backgroundColor": undefined,
+                            "pointerEvents": undefined,
+                          }
+                        }
+                      >
+                        <Chip
+                          className="ChipInput-chip-18"
+                          classes={
+                            Object {
+                              "avatar": "MuiChip-avatar-70",
+                              "avatarChildren": "MuiChip-avatarChildren-73",
+                              "avatarColorPrimary": "MuiChip-avatarColorPrimary-71",
+                              "avatarColorSecondary": "MuiChip-avatarColorSecondary-72",
+                              "clickable": "MuiChip-clickable-61",
+                              "clickableColorPrimary": "MuiChip-clickableColorPrimary-62",
+                              "clickableColorSecondary": "MuiChip-clickableColorSecondary-63",
+                              "colorPrimary": "MuiChip-colorPrimary-59",
+                              "colorSecondary": "MuiChip-colorSecondary-60",
+                              "deletable": "MuiChip-deletable-64",
+                              "deletableColorPrimary": "MuiChip-deletableColorPrimary-65",
+                              "deletableColorSecondary": "MuiChip-deletableColorSecondary-66",
+                              "deleteIcon": "MuiChip-deleteIcon-78",
+                              "deleteIconColorPrimary": "MuiChip-deleteIconColorPrimary-79",
+                              "deleteIconColorSecondary": "MuiChip-deleteIconColorSecondary-80",
+                              "deleteIconOutlinedColorPrimary": "MuiChip-deleteIconOutlinedColorPrimary-81",
+                              "deleteIconOutlinedColorSecondary": "MuiChip-deleteIconOutlinedColorSecondary-82",
+                              "icon": "MuiChip-icon-74",
+                              "iconColorPrimary": "MuiChip-iconColorPrimary-75",
+                              "iconColorSecondary": "MuiChip-iconColorSecondary-76",
+                              "label": "MuiChip-label-77",
+                              "outlined": "MuiChip-outlined-67",
+                              "outlinedPrimary": "MuiChip-outlinedPrimary-68",
+                              "outlinedSecondary": "MuiChip-outlinedSecondary-69",
+                              "root": "MuiChip-root-58",
+                            }
+                          }
+                          clickable={false}
+                          color="default"
+                          component="div"
+                          label="bar"
+                          onClick={[Function]}
+                          onDelete={[Function]}
+                          style={
+                            Object {
+                              "backgroundColor": undefined,
+                              "pointerEvents": undefined,
+                            }
+                          }
+                          variant="default"
+                        >
+                          <div
+                            className="MuiChip-root-58 MuiChip-clickable-61 MuiChip-deletable-64 ChipInput-chip-18"
+                            onClick={[Function]}
+                            onKeyDown={[Function]}
+                            onKeyUp={[Function]}
+                            role="button"
+                            style={
+                              Object {
+                                "backgroundColor": undefined,
+                                "pointerEvents": undefined,
+                              }
+                            }
+                            tabIndex={0}
+                          >
+                            <span
+                              className="MuiChip-label-77"
+                            >
+                              bar
+                            </span>
+                            <pure(Cancel)
+                              className="MuiChip-deleteIcon-78"
+                              onClick={[Function]}
+                            >
+                              <Cancel
+                                className="MuiChip-deleteIcon-78"
+                                onClick={[Function]}
+                              >
+                                <WithStyles(SvgIcon)
+                                  className="MuiChip-deleteIcon-78"
+                                  onClick={[Function]}
+                                >
+                                  <SvgIcon
+                                    className="MuiChip-deleteIcon-78"
+                                    classes={
+                                      Object {
+                                        "colorAction": "MuiSvgIcon-colorAction-86",
+                                        "colorDisabled": "MuiSvgIcon-colorDisabled-88",
+                                        "colorError": "MuiSvgIcon-colorError-87",
+                                        "colorPrimary": "MuiSvgIcon-colorPrimary-84",
+                                        "colorSecondary": "MuiSvgIcon-colorSecondary-85",
+                                        "fontSizeInherit": "MuiSvgIcon-fontSizeInherit-89",
+                                        "fontSizeLarge": "MuiSvgIcon-fontSizeLarge-91",
+                                        "fontSizeSmall": "MuiSvgIcon-fontSizeSmall-90",
+                                        "root": "MuiSvgIcon-root-83",
+                                      }
+                                    }
+                                    color="inherit"
+                                    component="svg"
+                                    fontSize="default"
+                                    onClick={[Function]}
+                                    viewBox="0 0 24 24"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      className="MuiSvgIcon-root-83 MuiChip-deleteIcon-78"
+                                      focusable="false"
+                                      onClick={[Function]}
+                                      role="presentation"
+                                      viewBox="0 0 24 24"
+                                    >
+                                      <path
+                                        d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
+                                      />
+                                    </svg>
+                                  </SvgIcon>
+                                </WithStyles(SvgIcon)>
+                              </Cancel>
+                            </pure(Cancel)>
+                          </div>
+                        </Chip>
+                      </WithStyles(Chip)>
+                      <input
+                        aria-invalid={false}
+                        className="MuiInputBase-input-51 MuiInput-input-36 ChipInput-input-3 ChipInput-standard-7 ChipInput-hasChips-4 MuiInputBase-inputAdornedStart-56"
+                        disabled={false}
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        onKeyDown={[Function]}
+                        onKeyUp={[Function]}
+                        placeholder={null}
+                        required={false}
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </InputBase>
+                </WithStyles(InputBase)>
               </Input>
             </WithStyles(Input)>
           </div>
diff --git a/stories/index.js b/stories/index.js
index 2412d9b..9963875 100644
--- a/stories/index.js
+++ b/stories/index.js
@@ -4,6 +4,7 @@ import { action } from '@storybook/addon-actions'
 import Avatar from '@material-ui/core/Avatar'
 import Chip from '@material-ui/core/Chip'
 // import AutoComplete from '@material-ui/core/AutoComplete'
+import { InputAdornment, Icon } from '@material-ui/core'
 import { green } from '@material-ui/core/colors'
 import ChipInput from '../src/ChipInput'
 import CustomizedChipInput from './examples/CustomizedChipInput'
@@ -288,3 +289,49 @@ storiesOf('ChipInput', module)
   .add('with "filled" variant full width', () => (
     <ChipInput defaultValue={['foo', 'bar']} variant='filled' label='Add Tags' fullWidth fullWidthInput />
   ))
+  .add('with start adornment', () => (
+    <ChipInput
+      label='normal'
+      margin='normal'
+      startAdornment={<InputAdornment position='start'><Icon color='primary'>search</Icon></InputAdornment>}
+    />
+  ))
+  .add('with start adornment and "outlined" variant', () => (
+    <ChipInput
+      label='normal'
+      margin='normal'
+      variant='outlined'
+      startAdornment={<InputAdornment position='start'><Icon color='primary'>search</Icon></InputAdornment>}
+    />
+  ))
+  .add('with start adornment and "filled" variant', () => (
+    <ChipInput
+      label='normal'
+      margin='normal'
+      variant='filled'
+      startAdornment={<InputAdornment position='start'><Icon color='primary'>search</Icon></InputAdornment>}
+    />
+  ))
+  .add('with end adornment', () => (
+    <ChipInput
+      label='normal'
+      margin='normal'
+      endAdornment={<InputAdornment position='end'><Icon color='primary'>search</Icon></InputAdornment>}
+    />
+  ))
+  .add('with end adornment and "outlined" variant', () => (
+    <ChipInput
+      label='normal'
+      margin='normal'
+      variant='outlined'
+      endAdornment={<InputAdornment position='end'><Icon color='primary'>search</Icon></InputAdornment>}
+    />
+  ))
+  .add('with end adornment and "filled" variant', () => (
+    <ChipInput
+      label='normal'
+      margin='normal'
+      variant='filled'
+      endAdornment={<InputAdornment position='end'><Icon color='primary'>search</Icon></InputAdornment>}
+    />
+  ))