diff --git a/demo/collections/Category.js b/demo/collections/Category.js
index b4a2d0ca7e..fdf8557a07 100644
--- a/demo/collections/Category.js
+++ b/demo/collections/Category.js
@@ -31,13 +31,28 @@ module.exports = {
       required: true,
       localized: true,
     },
+    // {
+    //   name: 'page',
+    //   label: 'Page',
+    //   type: 'relationship',
+    //   relationTo: 'pages',
+    //   localized: false,
+    //   hasMany: false,
+    // },
     {
-      name: 'page',
-      label: 'Page',
-      type: 'relationship',
-      relationTo: 'pages',
-      localized: false,
-      hasMany: false,
+      name: 'role',
+      label: 'Role',
+      type: 'select',
+      options: [{
+        value: 'Option 1',
+        label: 'Here is a label for Option 1',
+      }, {
+        value: 'Option 2',
+        label: 'Option 2 Label',
+      }],
+      defaultValue: 'user',
+      required: true,
+      saveToJWT: true,
     },
   ],
   timestamps: true,
diff --git a/package.json b/package.json
index 4f73502479..f7e0e21568 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
     "react-document-meta": "^3.0.0-beta.2",
     "react-dom": "^16.9.0",
     "react-router-dom": "^5.1.2",
+    "react-select": "^3.0.8",
     "sharp": "^0.22.1",
     "universal-cookie": "^3.1.0",
     "url-loader": "^1.0.1",
diff --git a/src/client/components/forms/field-types/Select/index.js b/src/client/components/forms/field-types/Select/index.js
index 786d901d46..83010eb81b 100644
--- a/src/client/components/forms/field-types/Select/index.js
+++ b/src/client/components/forms/field-types/Select/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import ReactSelect from 'react-select';
 import fieldType from '../fieldType';
 
 import './index.scss';
@@ -27,17 +28,7 @@ const Select = (props) => {
   } = props;
 
   useMountEffect(() => {
-    let initialValue = defaultValue;
-
-    if (!initialValue) {
-      if (typeof options[0] === 'object') {
-        initialValue = options[0].value;
-      } else {
-        [initialValue] = options;
-      }
-    }
-
-    sendField(initialValue);
+    sendField(defaultValue || options[0].value);
   });
 
   return (
@@ -47,15 +38,14 @@ const Select = (props) => {
     >
       {error}
       {label}
-      <select
-        value={value || ''}
-        onChange={onChange}
+      <ReactSelect
+        value={options.find(option => option.value === value)}
+        onChange={selected => onChange(selected.value)}
         disabled={disabled}
         placeholder={placeholder}
         id={id || name}
         name={name}
-      >
-        {options && options.map((option, i) => {
+        options={options.map((option, i) => {
           let optionValue = option;
           let optionLabel = option;
 
@@ -64,17 +54,12 @@ const Select = (props) => {
             optionLabel = option.label;
           }
 
-          return (
-            <option
-              key={i}
-              value={optionValue}
-              selected={value === optionValue ? 'selected' : undefined}
-            >
-              {optionLabel}
-            </option>
-          );
+          return {
+            value: optionValue,
+            label: optionLabel,
+          };
         })}
-      </select>
+      />
     </div>
   );
 };
@@ -84,13 +69,13 @@ Select.defaultProps = {
   style: {},
   error: null,
   label: null,
-  value: '',
+  value: {},
   onChange: null,
   disabled: null,
   placeholder: null,
   id: null,
   name: 'select',
-  defaultValue: '',
+  defaultValue: null,
 };
 
 Select.propTypes = {
@@ -99,7 +84,13 @@ Select.propTypes = {
   style: PropTypes.shape({}),
   error: PropTypes.node,
   label: PropTypes.node,
-  value: PropTypes.string,
+  value: PropTypes.oneOfType([
+    PropTypes.shape({
+      value: PropTypes.string,
+      label: PropTypes.string,
+    }),
+    PropTypes.string,
+  ]),
   onChange: PropTypes.func,
   disabled: PropTypes.string,
   placeholder: PropTypes.string,
diff --git a/src/client/components/forms/field-types/fieldType/index.js b/src/client/components/forms/field-types/fieldType/index.js
index d000e6816e..f7a5f15602 100644
--- a/src/client/components/forms/field-types/fieldType/index.js
+++ b/src/client/components/forms/field-types/fieldType/index.js
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useCallback } from 'react';
+import React, { useContext, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import FormContext from '../../Form/Context';
 import Tooltip from '../../../modules/Tooltip';
@@ -70,7 +70,12 @@ const asFieldType = (PassedComponent, type, validate, errors) => {
           />
         )}
         onChange={(e) => {
-          sendField(e.target.value);
+          if (e.target && e.target.value) {
+            sendField(e.target.value);
+          } else {
+            sendField(e);
+          }
+
           if (onChange && typeof onChange === 'function') onChange(e);
         }}
       />