diff --git a/packages/@sanity/base/src/styles/forms/text-input.css b/packages/@sanity/base/src/styles/forms/text-input.css
index 641754f258b..ebb064812e7 100644
--- a/packages/@sanity/base/src/styles/forms/text-input.css
+++ b/packages/@sanity/base/src/styles/forms/text-input.css
@@ -17,6 +17,10 @@
   @nest &:disabled {
     opacity: 0.5;
   }
+
+  @nest &:read-only {
+    opacity: 0.5;
+  }
 }
 
 .textInput {
@@ -26,17 +30,19 @@
   box-shadow: var(--input-box-shadow);
 
   @nest &:not(:disabled) {
-    @nest &:hover {
-      box-shadow: var(--input-box-shadow--hover);
-    }
+    @nest &:not(:read-only) {
+      @nest &:hover {
+        box-shadow: var(--input-box-shadow--hover);
+      }
 
-    @nest &:focus, &:focus-within {
-      /* border-color: var(--input-border-color-focus); */
-      box-shadow: var(--input-box-shadow--focus);
-    }
+      @nest &:focus, &:focus-within {
+        /* border-color: var(--input-border-color-focus); */
+        box-shadow: var(--input-box-shadow--focus);
+      }
 
-    @nest &:active {
-      /* border-color: var(--input-border-color-active); */
+      @nest &:active {
+        /* border-color: var(--input-border-color-active); */
+      }
     }
   }
 }
diff --git a/packages/@sanity/base/src/styles/forms/textarea.css b/packages/@sanity/base/src/styles/forms/textarea.css
index 9bead500810..baa68b76da3 100644
--- a/packages/@sanity/base/src/styles/forms/textarea.css
+++ b/packages/@sanity/base/src/styles/forms/textarea.css
@@ -27,4 +27,8 @@
   @nest &:disabled {
     background-color: var(--input-bg-disabled);
   }
+
+  @nest &:read-only {
+    opacity: 0.5;
+  }
 }
diff --git a/packages/@sanity/components/src/radiobutton/styles/RadioButtonDefault.css b/packages/@sanity/components/src/radiobutton/styles/RadioButtonDefault.css
index 69debfa8cf4..dd2c9fb82af 100644
--- a/packages/@sanity/components/src/radiobutton/styles/RadioButtonDefault.css
+++ b/packages/@sanity/components/src/radiobutton/styles/RadioButtonDefault.css
@@ -33,6 +33,11 @@
   composes: root;
 }
 
+.isDisabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
 .input {
   line-height: var(--radio-label-height);
 
@@ -45,10 +50,6 @@
   opacity: 0;
   appearance: none;
   border: none;
-
-  @nest &:disabled {
-    opacity: 0.2;
-  }
 }
 
 .circleOutline {
diff --git a/packages/@sanity/components/src/selects/DefaultSelect.js b/packages/@sanity/components/src/selects/DefaultSelect.js
index aa342b55c4d..939434e4cfe 100644
--- a/packages/@sanity/components/src/selects/DefaultSelect.js
+++ b/packages/@sanity/components/src/selects/DefaultSelect.js
@@ -12,6 +12,7 @@ export default class DefaultSelect extends React.Component {
     onBlur: PropTypes.func,
     hasFocus: PropTypes.bool,
     disabled: PropTypes.bool,
+    readOnly: PropTypes.bool,
     items: PropTypes.arrayOf(
       PropTypes.shape({
         title: PropTypes.string,
@@ -23,6 +24,7 @@ export default class DefaultSelect extends React.Component {
     onChange() {},
     onBlur() {},
     onFocus() {},
+    readOnly: false,
     hasError: false,
     hasFocus: false,
     value: {},
@@ -44,26 +46,27 @@ export default class DefaultSelect extends React.Component {
   }
 
   render() {
-    const {hasError, items, value, disabled, hasFocus, ...rest} = this.props
+    const {hasError, items, value, disabled, hasFocus, readOnly, ...rest} = this.props
     return (
-      <div className={disabled ? styles.disabled : styles.root}>
+      <div className={disabled || readOnly ? styles.disabled : styles.root}>
         <select
           {...rest}
           className={styles.select}
           onChange={this.handleChange}
-          disabled={disabled}
+          disabled={disabled || readOnly}
           value={value && items.indexOf(value)}
           autoComplete="off"
           ref={this.setInput}
         >
           {!value && <option />}
-          {
-            items && items.length > 0 && items.map((item, i) => {
+          {items.length &&
+            items.map((item, i) => {
               return (
-                <option key={i} value={i}>{item.title}</option>
+                <option key={i} value={i}>
+                  {item.title}
+                </option>
               )
-            })
-          }
+            })}
         </select>
         <div className={styles.functions}>
           <span className={styles.arrow}>
diff --git a/packages/@sanity/components/src/selects/RadioSelect.js b/packages/@sanity/components/src/selects/RadioSelect.js
index 0c6b5f90ba6..b20f29ffc64 100644
--- a/packages/@sanity/components/src/selects/RadioSelect.js
+++ b/packages/@sanity/components/src/selects/RadioSelect.js
@@ -9,6 +9,7 @@ export default class RadioSelect extends React.Component {
     direction: PropTypes.oneOf(['horizontal', 'vertical']),
     onChange: PropTypes.func,
     value: PropTypes.object,
+    readOnly: PropTypes.bool,
     items: PropTypes.arrayOf(
       PropTypes.shape({
         title: PropTypes.string,
@@ -45,7 +46,7 @@ export default class RadioSelect extends React.Component {
   }
 
   render() {
-    const {items, value, name, direction} = this.props
+    const {items, value, name, direction, readOnly} = this.props
     const {focusedItem} = this.state
 
     return (
@@ -60,6 +61,7 @@ export default class RadioSelect extends React.Component {
               return (
                 <div className={styles.item} key={i}>
                   <RadioButton
+                    disabled={readOnly}
                     name={name}
                     key={i}
                     label={item.title}
diff --git a/packages/@sanity/components/src/selects/StatelessSearchableSelect.js b/packages/@sanity/components/src/selects/StatelessSearchableSelect.js
index db7d204544d..57285c8db79 100644
--- a/packages/@sanity/components/src/selects/StatelessSearchableSelect.js
+++ b/packages/@sanity/components/src/selects/StatelessSearchableSelect.js
@@ -1,3 +1,4 @@
+/* eslint-disable complexity */
 import PropTypes from 'prop-types'
 import React from 'react'
 import styles from 'part:@sanity/components/selects/searchable-style'
@@ -34,7 +35,8 @@ export default class StatelessSearchableSelect extends React.PureComponent {
     isInputSelected: PropTypes.bool,
     width: PropTypes.number,
     disabled: PropTypes.bool,
-    dropdownPosition: PropTypes.string
+    dropdownPosition: PropTypes.string,
+    readOnly: PropTypes.bool
   }
 
   static defaultProps = {
@@ -43,6 +45,7 @@ export default class StatelessSearchableSelect extends React.PureComponent {
     onClose: noop,
     onInputChange: noop,
     isLoading: false,
+    readOnly: false,
     renderItem: item => item,
     items: [],
     width: 100,
@@ -140,6 +143,7 @@ export default class StatelessSearchableSelect extends React.PureComponent {
       highlightIndex,
       isInputSelected,
       inputValue,
+      readOnly,
       onChange,
       onInputChange,
       onOpen,
@@ -149,6 +153,7 @@ export default class StatelessSearchableSelect extends React.PureComponent {
       disabled,
       onHighlightIndexChange,
       openItemElement,
+      readOnly,
       ...rest
     } = this.props
 
@@ -165,7 +170,9 @@ export default class StatelessSearchableSelect extends React.PureComponent {
             value={inputValue || ''}
             selected={isInputSelected}
             disabled={disabled}
+            readOnly={readOnly}
             ref={this.setInput}
+            readOnly={readOnly}
           />
           <div className={styles.functions}>
             {
@@ -174,13 +181,13 @@ export default class StatelessSearchableSelect extends React.PureComponent {
               )
             }
             {
-              onClear && value && (
+              onClear && value && !readOnly && (
                 <button type="button" className={styles.clearButton} onClick={onClear}>
                   <CloseIcon color="inherit" />
                 </button>
               )
             }
-            {!isLoading && (
+            {!isLoading && !readOnly && (
               <div
                 className={styles.arrow}
                 onClick={disabled ? null : this.handleArrowClick}
diff --git a/packages/@sanity/components/src/selects/styles/DefaultSelect.css b/packages/@sanity/components/src/selects/styles/DefaultSelect.css
index 4436d0577b7..a73062a0365 100644
--- a/packages/@sanity/components/src/selects/styles/DefaultSelect.css
+++ b/packages/@sanity/components/src/selects/styles/DefaultSelect.css
@@ -6,8 +6,8 @@
   outline: none;
 }
 
-.label {
-  /* Nothing here yet */
+.disabled {
+  composes: root;
 }
 
 .select {
@@ -46,6 +46,10 @@
   }
 }
 
+.disabled .arrow {
+  opacity: 0.2;
+}
+
 .root:hover .arrow {
   color: var(--input-border-color-focus);
 }
diff --git a/packages/@sanity/components/src/tags/TextField.js b/packages/@sanity/components/src/tags/TextField.js
index 85ca75d6631..ade85d698c7 100644
--- a/packages/@sanity/components/src/tags/TextField.js
+++ b/packages/@sanity/components/src/tags/TextField.js
@@ -13,11 +13,13 @@ export default class TagsTextField extends React.Component {
   static propTypes = {
     onChange: PropTypes.func.isRequired,
     onBlur: PropTypes.func,
+    readOnly: PropTypes.bool,
     value: PropTypes.arrayOf(PropTypes.string)
   }
 
   static defaultProps = {
     value: [],
+    readOnly: false,
     onBlur: () => {}
   }
 
@@ -91,6 +93,7 @@ export default class TagsTextField extends React.Component {
     const {
       onChange,
       value,
+      readOnly,
       ...rest
     } = this.props
 
@@ -100,24 +103,26 @@ export default class TagsTextField extends React.Component {
           <div className={styles.content}>
             <ul className={styles.tags}>
               {
-                value && value.map((tag, i) => {
+                value.map((tag, i) => {
                   return (
-                    <li key={i} className={styles.tag}>
+                    <li key={i} className={readOnly ? styles.tag : styles.tagWithClear}>
                       {tag}
-                      <a
-                        onClick={this.handleRemoveTagClick}
-                        data-index={i}
-                        className={styles.clearTag}
-                      >
-                        ×
-                      </a>
+                      {!readOnly && (
+                        <a
+                          onClick={this.handleRemoveTagClick}
+                          data-index={i}
+                          className={styles.clearTag}
+                        >
+                          ×
+                        </a>
+                      )}
                     </li>
                   )
-                })
-              }
+                })}
             </ul>
             <input
               {...rest}
+              readOnly={readOnly}
               value={inputValue}
               className={styles.input}
               onKeyDown={this.handleKeyDown}
diff --git a/packages/@sanity/components/src/tags/styles/TextField.css b/packages/@sanity/components/src/tags/styles/TextField.css
index 3728837294b..3eedfd4c49d 100644
--- a/packages/@sanity/components/src/tags/styles/TextField.css
+++ b/packages/@sanity/components/src/tags/styles/TextField.css
@@ -25,6 +25,10 @@
   user-select: none;
   cursor: default;
   position: relative;
+}
+
+.tagWithClear {
+  composes: tag;
   padding-right: 1.4em;
 }
 
diff --git a/packages/@sanity/components/src/toggles/Checkbox.js b/packages/@sanity/components/src/toggles/Checkbox.js
index e2f169853d8..bc3b3bda311 100644
--- a/packages/@sanity/components/src/toggles/Checkbox.js
+++ b/packages/@sanity/components/src/toggles/Checkbox.js
@@ -7,6 +7,7 @@ export default class Checkbox extends React.Component {
     label: PropTypes.string,
     checked: PropTypes.bool,
     disabled: PropTypes.bool,
+    readOnly: PropTypes.bool,
     children: PropTypes.any,
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
@@ -47,7 +48,7 @@ export default class Checkbox extends React.Component {
   }
 
   render() {
-    const {disabled, checked, label, children, ...rest} = this.props
+    const {disabled, checked, label, children, readOnly, ...rest} = this.props
     const {hasFocus} = this.state
 
     let checkedClass = checked ? styles.isChecked : styles.unChecked
@@ -60,9 +61,10 @@ export default class Checkbox extends React.Component {
       <label
         title={label}
         className={`
-          ${styles.root}
-          ${disabled ? styles.isDisabled : styles.isEnabled}
+          ${disabled || readOnly ? styles.isDisabled : styles.isEnabled}
           ${checkedClass}
+          ${disabled || readOnly ? styles.isDisabled : styles.isEnabled}
+          ${checked ? styles.isChecked : styles.unChecked}
           ${hasFocus ? styles.hasFocus : ''}
         `}
         onBlur={this.handleBlur}
@@ -71,8 +73,8 @@ export default class Checkbox extends React.Component {
           {...rest}
           className={styles.input}
           type="checkbox"
-          disabled={disabled}
-          checked={!!checked}
+          disabled={disabled || readOnly}
+          checked={checked}
           ref={this.setInput}
           onFocus={this.handleFocus}
         />
diff --git a/packages/@sanity/components/src/toggles/Switch.js b/packages/@sanity/components/src/toggles/Switch.js
index 4fa49c0766f..a4f7e8c4f9d 100644
--- a/packages/@sanity/components/src/toggles/Switch.js
+++ b/packages/@sanity/components/src/toggles/Switch.js
@@ -9,6 +9,7 @@ export default class Switch extends React.Component {
     disabled: PropTypes.bool,
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
+    readOnly: PropTypes.bool
   }
 
   state = {
@@ -42,7 +43,7 @@ export default class Switch extends React.Component {
   }
 
   render() {
-    const {disabled, checked, label, ...rest} = this.props
+    const {disabled, checked, label, readOnly, ...rest} = this.props
     const {hasFocus} = this.state
 
     let thumbClass = checked ? styles.thumbChecked : styles.thumb
@@ -54,8 +55,8 @@ export default class Switch extends React.Component {
     return (
       <label
         className={`
+          ${disabled || readOnly ? styles.isDisabled : styles.isEnabled}
           ${typeof checked === 'undefined' ? styles.indeterminate : styles.root}
-          ${disabled ? styles.isDisabled : styles.isEnabled}
           ${checked ? styles.isChecked : styles.unChecked}
           ${hasFocus ? styles.hasFocus : ''}
         `}
@@ -70,15 +71,12 @@ export default class Switch extends React.Component {
           {...rest}
           className={styles.input}
           type="checkbox"
-          disabled={disabled}
-          checked={!!checked}
+          disabled={disabled || readOnly}
+          checked={checked}
           ref={this.setInput}
           onFocus={this.handleFocus}
         />
-        <div className={styles.label}>
-          {label}
-        </div>
-
+        <div className={styles.label}>{label}</div>
       </label>
     )
   }
diff --git a/packages/@sanity/components/src/toggles/styles/Checkbox.css b/packages/@sanity/components/src/toggles/styles/Checkbox.css
index 3689ba1d66d..713bd8bd615 100644
--- a/packages/@sanity/components/src/toggles/styles/Checkbox.css
+++ b/packages/@sanity/components/src/toggles/styles/Checkbox.css
@@ -41,7 +41,8 @@
 }
 
 .isDisabled {
-  opacity: 0.2;
+  opacity: 0.5;
+  pointer-events: none;
 }
 
 .isEnabled {
diff --git a/packages/@sanity/components/src/toggles/styles/Switch.css b/packages/@sanity/components/src/toggles/styles/Switch.css
index 5c4ca9410e8..c02022aa49b 100644
--- a/packages/@sanity/components/src/toggles/styles/Switch.css
+++ b/packages/@sanity/components/src/toggles/styles/Switch.css
@@ -68,7 +68,7 @@
     background: var(--switch-track-color);
   }
 
-  @nest .disabled & {
+  @nest .isDisabled & {
     background: var(--switch-disabled-track-color);
     cursor: auto;
   }
@@ -78,8 +78,9 @@
   composes: root;
 }
 
-.disabled {
+.isDisabled {
   composes: root;
+  pointer-events: none;
   opacity: 0.5;
 }
 
diff --git a/packages/@sanity/form-builder/src/FormBuilderInput.js b/packages/@sanity/form-builder/src/FormBuilderInput.js
index d4ad454eac2..d0b225ef05f 100644
--- a/packages/@sanity/form-builder/src/FormBuilderInput.js
+++ b/packages/@sanity/form-builder/src/FormBuilderInput.js
@@ -12,6 +12,7 @@ type Props = {
   onChange: PatchEvent => void,
   onFocus: Path => void,
   onBlur: () => void,
+  readOnly: boolean,
   focusPath: Path,
   level: number,
   isRoot: boolean,
@@ -154,6 +155,7 @@ export const FormBuilderInput = class FormBuilderInput extends React.PureCompone
       onFocus,
       onBlur,
       path,
+      readOnly,
       value,
       type,
       level,
@@ -182,6 +184,7 @@ export const FormBuilderInput = class FormBuilderInput extends React.PureCompone
           {...rootProps}
           {...leafProps}
           value={value}
+          readOnly={readOnly || type.readOnly}
           type={type}
           onChange={this.handleChange}
           onFocus={this.handleFocus}
diff --git a/packages/@sanity/form-builder/src/inputs/Array/Array.js b/packages/@sanity/form-builder/src/inputs/Array/Array.js
index ebc241f3881..adf2aa53def 100644
--- a/packages/@sanity/form-builder/src/inputs/Array/Array.js
+++ b/packages/@sanity/form-builder/src/inputs/Array/Array.js
@@ -12,7 +12,7 @@ import {resolveTypeName} from '../../utils/resolveTypeName'
 import type {Uploader} from '../../sanity/uploads/typedefs'
 import type {Type} from '../../typedefs'
 import type {Path} from '../../typedefs/path'
-import {FOCUS_TERMINATOR, isExpanded} from '../../utils/pathUtils'
+import {FOCUS_TERMINATOR} from '../../utils/pathUtils'
 import type {Subscription} from '../../typedefs/observable'
 import UploadTargetFieldset from '../../utils/UploadTargetFieldset'
 
@@ -48,6 +48,7 @@ type Props = {
   onFocus: Path => void,
   onBlur: () => void,
   focusPath: Path,
+  readOnly: ?boolean,
   resolveUploader?: (type: Type, file: File) => Uploader
 }
 
@@ -208,7 +209,7 @@ export default class ArrayInput extends React.Component<Props, State> {
   }
 
   renderList = () => {
-    const {type, value, focusPath, onBlur, onFocus, level} = this.props
+    const {type, readOnly, value, focusPath, onBlur, onFocus, level} = this.props
     const {isMoving} = this.state
     const options = type.options || {}
 
@@ -230,7 +231,7 @@ export default class ArrayInput extends React.Component<Props, State> {
     const listItemClassName = isMoving ? styles.listItemMute : styles.listItem
     return (
       <List
-        className={styles.list}
+        className={readOnly ? styles.listReadOnly : styles.list}
         {...listProps}
       >
         {value.map((item, index) => {
@@ -252,6 +253,7 @@ export default class ArrayInput extends React.Component<Props, State> {
                 onChange={this.handleItemChange}
                 focusPath={focusPath}
                 onFocus={onFocus}
+                readOnly={readOnly}
                 onBlur={onBlur}
               />
             </Item>
@@ -304,7 +306,7 @@ export default class ArrayInput extends React.Component<Props, State> {
   }
 
   render() {
-    const {type, level, value} = this.props
+    const {type, level, readOnly, value} = this.props
 
     return (
       <UploadTargetFieldset
@@ -320,7 +322,7 @@ export default class ArrayInput extends React.Component<Props, State> {
         ref={this.setElement}
       >
         {value && value.length > 0 && this.renderList()}
-        {!type.readOnly && (
+        {!readOnly && (
           <div className={styles.functions}>
             {this.props.type.of.length === 1 && (
               <Button onClick={this.handleAddBtnClick} className={styles.addButton}>
diff --git a/packages/@sanity/form-builder/src/inputs/Array/ItemValue.js b/packages/@sanity/form-builder/src/inputs/Array/ItemValue.js
index 26ae4995e44..27882ec564b 100644
--- a/packages/@sanity/form-builder/src/inputs/Array/ItemValue.js
+++ b/packages/@sanity/form-builder/src/inputs/Array/ItemValue.js
@@ -51,6 +51,7 @@ type Props = {
   onChange: (PatchEvent, ItemValue) => void,
   onFocus: (Path) => void,
   onBlur: void => void,
+  readOnly: ?boolean,
   focusPath: Path
 }
 
@@ -148,7 +149,7 @@ export default class RenderItemValue extends React.Component<Props> {
   }
 
   renderEditItemForm(item: ItemValue): Node {
-    const {type, focusPath, onFocus, onBlur} = this.props
+    const {type, focusPath, onFocus, onBlur, readOnly} = this.props
     const options = type.options || {}
 
     const memberType = this.getMemberType() || {}
@@ -162,6 +163,7 @@ export default class RenderItemValue extends React.Component<Props> {
         onFocus={onFocus}
         onBlur={onBlur}
         focusPath={focusPath}
+        readOnly={readOnly || memberType.readOnly}
         path={[{_key: item._key}]}
       />
     )
@@ -217,10 +219,11 @@ export default class RenderItemValue extends React.Component<Props> {
   }
 
   renderItem() {
-    const {value, type} = this.props
+    const {value, type, readOnly} = this.props
+
     const options = type.options || {}
     const isGrid = options.layout === 'grid'
-    const isSortable = options.sortable !== false
+    const isSortable = (!readOnly && !type.readOnly) && options.sortable !== false
     const previewLayout = isGrid ? 'media' : 'default'
 
     return (
@@ -258,7 +261,7 @@ export default class RenderItemValue extends React.Component<Props> {
               </IntentLink>
             )
           }
-          {!type.readOnly && (
+          {!readOnly && (
             <ConfirmButton
               title="Remove this item"
               onConfirm={this.handleRemove}
diff --git a/packages/@sanity/form-builder/src/inputs/Array/styles/Array.css b/packages/@sanity/form-builder/src/inputs/Array/styles/Array.css
index b2af337a4ac..4e14be35f75 100644
--- a/packages/@sanity/form-builder/src/inputs/Array/styles/Array.css
+++ b/packages/@sanity/form-builder/src/inputs/Array/styles/Array.css
@@ -10,6 +10,11 @@
   user-select: none;
 }
 
+.listReadOnly {
+  composes: list;
+  opacity: 0.5;
+}
+
 .list + .functions {
   padding-top: var(--medium-padding);
 }
diff --git a/packages/@sanity/form-builder/src/inputs/ArrayOfPrimitives/ArrayOfPrimitives.js b/packages/@sanity/form-builder/src/inputs/ArrayOfPrimitives/ArrayOfPrimitives.js
index ac391f3d85e..220526b417a 100644
--- a/packages/@sanity/form-builder/src/inputs/ArrayOfPrimitives/ArrayOfPrimitives.js
+++ b/packages/@sanity/form-builder/src/inputs/ArrayOfPrimitives/ArrayOfPrimitives.js
@@ -110,7 +110,7 @@ export default class ArrayOfPrimitivesInput extends React.PureComponent<Props> {
   }
 
   renderItem = (item, index) => {
-    const {type, level, value, focusPath, onChange, onFocus, onBlur} = this.props
+    const {type, level, value, focusPath, onChange, onFocus, readOnly, onBlur} = this.props
 
     const typeName = resolveTypeName(item)
     const itemMemberType = this.getMemberType(typeName)
@@ -135,6 +135,7 @@ export default class ArrayOfPrimitivesInput extends React.PureComponent<Props> {
           level={level + 1}
           index={index}
           value={item}
+          readOnly={readOnly}
           isSortable={isSortable}
           type={itemMemberType}
           focusPath={focusPath}
@@ -197,7 +198,7 @@ export default class ArrayOfPrimitivesInput extends React.PureComponent<Props> {
   }
 
   render() {
-    const {type, value, level, onFocus} = this.props
+    const {type, value, level, readOnly, onFocus} = this.props
     return (
       <Fieldset
         legend={type.title}
@@ -211,13 +212,15 @@ export default class ArrayOfPrimitivesInput extends React.PureComponent<Props> {
           <div className={styles.list}>
             {value && value.length > 0 && this.renderList(value)}
           </div>
-          <div className={styles.functions}>
-            {type.of.length === 1 ? (
-              <Button onClick={this.handleAddBtnClick} className={styles.addButton}>
-                Add
-              </Button>
-            ) : this.renderSelectType()}
-          </div>
+          {!readOnly && (
+            <div className={styles.functions}>
+              {type.of.length === 1 ? (
+                <Button onClick={this.handleAddBtnClick} className={styles.addButton}>
+                  Add
+                </Button>
+              ) : this.renderSelectType()}
+            </div>
+          )}
         </div>
       </Fieldset>
     )
diff --git a/packages/@sanity/form-builder/src/inputs/ArrayOfPrimitives/Item.js b/packages/@sanity/form-builder/src/inputs/ArrayOfPrimitives/Item.js
index 52f8b42f77f..6094fca6e45 100644
--- a/packages/@sanity/form-builder/src/inputs/ArrayOfPrimitives/Item.js
+++ b/packages/@sanity/form-builder/src/inputs/ArrayOfPrimitives/Item.js
@@ -27,6 +27,7 @@ type Props = {
   index: number,
   value: string | number | boolean,
   isSortable: boolean,
+  readOnly: ?boolean,
   level: number
 }
 export default class Item extends React.PureComponent<Props> {
@@ -64,10 +65,10 @@ export default class Item extends React.PureComponent<Props> {
   }
 
   render() {
-    const {value, level, index, focusPath, onFocus, onBlur, type, isSortable} = this.props
+    const {value, level, index, focusPath, onFocus, onBlur, type, readOnly, isSortable} = this.props
     return (
       <div className={styles.root}>
-        {isSortable && <DragHandle className={styles.dragHandle} />}
+        {isSortable && !readOnly && <DragHandle className={styles.dragHandle} />}
         <div className={styles.input}>
           <FormBuilderInput
             value={value}
@@ -76,20 +77,23 @@ export default class Item extends React.PureComponent<Props> {
             onFocus={onFocus}
             onBlur={onBlur}
             type={type}
+            readOnly={readOnly || type.readOnly}
             onKeyUp={this.handleKeyUp}
             onKeyPress={this.handleKeyPress}
             onChange={this.handleChange}
             level={level}
           />
         </div>
-        <Button
-          kind="simple"
-          className={styles.deleteButton}
-          color="danger"
-          icon={TrashIcon}
-          title="Delete"
-          onClick={this.handleRemove}
-        />
+        {!readOnly && (
+          <Button
+            kind="simple"
+            className={styles.deleteButton}
+            color="danger"
+            icon={TrashIcon}
+            title="Delete"
+            onClick={this.handleRemove}
+          />
+        )}
       </div>
     )
   }
diff --git a/packages/@sanity/form-builder/src/inputs/Boolean.js b/packages/@sanity/form-builder/src/inputs/Boolean.js
index ac0ef96ab31..2bcaebd7214 100644
--- a/packages/@sanity/form-builder/src/inputs/Boolean.js
+++ b/packages/@sanity/form-builder/src/inputs/Boolean.js
@@ -8,6 +8,7 @@ import type {Type} from '../typedefs'
 type Props = {
   type: Type,
   value: ?boolean,
+  readOnly: ?boolean,
   onChange: PatchEvent => void
 }
 
@@ -30,13 +31,14 @@ export default class BooleanInput extends React.Component<Props> {
   }
 
   render() {
-    const {value, type, level, description, ...rest} = this.props
+    const {value, type, readOnly, level, description, ...rest} = this.props
 
     const isCheckbox = type.options && type.options.layout === 'checkbox'
     return isCheckbox
       ? (
         <Checkbox
           {...rest}
+          readOnly={readOnly}
           onChange={this.handleChange}
           checked={value}
           ref={this.setInput}
@@ -47,6 +49,7 @@ export default class BooleanInput extends React.Component<Props> {
       : (
         <Switch
           {...rest}
+          readOnly={readOnly}
           onChange={this.handleChange}
           checked={value}
           label={type.title}
diff --git a/packages/@sanity/form-builder/src/inputs/DateTime/DateTimeInput.js b/packages/@sanity/form-builder/src/inputs/DateTime/DateTimeInput.js
index bef5f052028..4ebd88bf87f 100644
--- a/packages/@sanity/form-builder/src/inputs/DateTime/DateTimeInput.js
+++ b/packages/@sanity/form-builder/src/inputs/DateTime/DateTimeInput.js
@@ -37,8 +37,8 @@ type Props = {
     title: string,
     description: string,
     options?: SchemaOptions,
-    readOnly?: boolean,
   },
+  readOnly: ?boolean,
   onChange: PatchEvent => void,
   level: number
 }
@@ -144,9 +144,9 @@ export default class DateInput extends React.Component<Props, State> {
   }
 
   render() {
-    const {value, type, level, ...rest} = this.props
+    const {value, type, readOnly, level, ...rest} = this.props
     const {inputValue, isActive} = this.state
-    const {title, description, readOnly} = type
+    const {title, description} = type
     const momentValue: ?Moment = value ? moment(value) : null
 
     const options = parseOptions(type.options)
diff --git a/packages/@sanity/form-builder/src/inputs/Email.js b/packages/@sanity/form-builder/src/inputs/Email.js
index f456b0a0a4b..609fd431582 100644
--- a/packages/@sanity/form-builder/src/inputs/Email.js
+++ b/packages/@sanity/form-builder/src/inputs/Email.js
@@ -9,6 +9,7 @@ type Props = {
   type: Type,
   level: number,
   value: ?string,
+  readOnly: ?boolean,
   onChange: PatchEvent => void
 }
 
@@ -31,7 +32,7 @@ export default class EmailInput extends React.Component<Props> {
   }
 
   render() {
-    const {value, type, level, ...rest} = this.props
+    const {value, readOnly, type, level, ...rest} = this.props
 
     return (
       <FormField
@@ -43,7 +44,7 @@ export default class EmailInput extends React.Component<Props> {
           {...rest}
           type="email"
           value={value}
-          readOnly={type.readOnly}
+          readOnly={readOnly}
           placeholder={type.placeholder}
           onChange={this.handleChange}
           ref={this.setInput}
diff --git a/packages/@sanity/form-builder/src/inputs/File/FileInput.js b/packages/@sanity/form-builder/src/inputs/File/FileInput.js
index c2d479ab5af..0d84e75d208 100644
--- a/packages/@sanity/form-builder/src/inputs/File/FileInput.js
+++ b/packages/@sanity/form-builder/src/inputs/File/FileInput.js
@@ -6,6 +6,7 @@ import Button from 'part:@sanity/components/buttons/default'
 import FileInputButton from 'part:@sanity/components/fileinput/button'
 import ProgressBar from 'part:@sanity/components/progress/bar'
 import EditIcon from 'part:@sanity/base/edit-icon'
+import VisibilityIcon from 'part:@sanity/base/visibility-icon'
 import FileIcon from 'part:@sanity/base/file-icon'
 import UploadIcon from 'part:@sanity/base/upload-icon'
 import {get, partition} from 'lodash'
@@ -44,6 +45,7 @@ type Props = {
   materialize: (string) => ObservableI<Object>,
   onBlur: () => void,
   onFocus: () => void,
+  readOnly: ?boolean,
   focusPath: Array<*>
 }
 
@@ -232,7 +234,7 @@ export default class FileInput extends React.PureComponent<Props, State> {
   }
 
   renderField(field: FieldT) {
-    const {value, level, onFocus, onBlur, focusPath} = this.props
+    const {value, level, focusPath, onFocus, readOnly, onBlur} = this.props
     const fieldValue = value && value[field.name]
 
     return (
@@ -244,12 +246,31 @@ export default class FileInput extends React.PureComponent<Props, State> {
         path={[field.name]}
         onFocus={onFocus}
         onBlur={onBlur}
+        readOnly={readOnly || field.type.readOnly}
         focusPath={focusPath}
         level={level}
       />
     )
   }
 
+  renderAsset() {
+    const {value, materialize, readOnly} = this.props
+
+    if (value && value.asset) {
+      return (
+        <WithMaterializedReference reference={value.asset} materialize={materialize}>
+          {this.renderMaterializedAsset}
+        </WithMaterializedReference>
+      )
+    }
+
+    return readOnly ? (
+      <span>Field is read only</span>
+    ) : (
+      <UploadPlaceholder hasFocus={this.state.hasFocus} />
+    )
+  }
+
   focus() {
     if (this._focusArea) {
       this._focusArea.focus()
@@ -267,14 +288,13 @@ export default class FileInput extends React.PureComponent<Props, State> {
   }
 
   handleUpload = ({file, uploader}) => {
-
     this.uploadWith(uploader, file)
   }
 
   render() {
-    const {type, value, level, materialize} = this.props
+    const {type, value, level, readOnly} = this.props
 
-    const {isAdvancedEditOpen, uploadError, hasFocus} = this.state
+    const {isAdvancedEditOpen, uploadError} = this.state
 
     const [highlightedFields, otherFields] = partition(
       type.fields.filter(field => !HIDDEN_FIELDS.includes(field.name)),
@@ -310,11 +330,7 @@ export default class FileInput extends React.PureComponent<Props, State> {
                 {this.renderUploadState(value._upload)}
               </div>
             )}
-            {hasAsset ? (
-              <WithMaterializedReference reference={value.asset} materialize={materialize}>
-                {this.renderMaterializedAsset}
-              </WithMaterializedReference>
-            ) : <UploadPlaceholder hasFocus={hasFocus} />}
+            {this.renderAsset()}
           </div>
           {highlightedFields.length > 0 && (
             <div className={styles.fieldsWrapper}>
@@ -323,24 +339,26 @@ export default class FileInput extends React.PureComponent<Props, State> {
           )}
         </div>
         <div className={styles.functions}>
-          <FileInputButton
-            icon={UploadIcon}
-            onSelect={this.handleSelectFile}
-            accept={''/* todo build from this.props.resolveUploaders */}
-          >
-            Upload
-          </FileInputButton>
+          {!readOnly && (
+            <FileInputButton
+              icon={UploadIcon}
+              onSelect={this.handleSelectFile}
+              accept={''/* todo build from this.props.resolveUploaders */}
+            >
+              Upload
+            </FileInputButton>
+          )}
           {value && otherFields.length > 0 && (
             <Button
-              icon={EditIcon}
+              icon={readOnly ? VisibilityIcon : EditIcon}
               kind="simple"
-              title="Edit details"
+              title={readOnly ? 'View details' : 'Edit details'}
               onClick={this.handleStartAdvancedEdit}
             >
-              Edit
+              {readOnly ? 'View details' : 'Edit'}
             </Button>
           )}
-          {hasAsset && (
+          {!readOnly && hasAsset && (
             <Button color="danger" kind="simple" onClick={this.handleRemoveButtonClick}>Remove</Button>
           )}
         </div>
diff --git a/packages/@sanity/form-builder/src/inputs/Image/ImageInput.js b/packages/@sanity/form-builder/src/inputs/Image/ImageInput.js
index 0721668f9da..a8d0683108f 100644
--- a/packages/@sanity/form-builder/src/inputs/Image/ImageInput.js
+++ b/packages/@sanity/form-builder/src/inputs/Image/ImageInput.js
@@ -1,13 +1,13 @@
 /* eslint-disable complexity */
-import type {Node} from 'react'
 // @flow
+import type {Node} from 'react'
 import React from 'react'
 import Button from 'part:@sanity/components/buttons/default'
 import FileInputButton from 'part:@sanity/components/fileinput/button'
-import ProgressBar from 'part:@sanity/components/progress/bar'
 import ProgressCircle from 'part:@sanity/components/progress/circle'
 import EditIcon from 'part:@sanity/base/edit-icon'
 import UploadIcon from 'part:@sanity/base/upload-icon'
+import VisibilityIcon from 'part:@sanity/base/visibility-icon'
 import {get, partition} from 'lodash'
 import PatchEvent, {set, setIfMissing, unset} from '../../PatchEvent'
 import styles from './styles/ImageInput.css'
@@ -47,6 +47,7 @@ type Props = {
   materialize: (string) => ObservableI<Object>,
   onBlur: () => void,
   onFocus: () => void,
+  readOnly: ?boolean,
   focusPath: Array<*>
 }
 
@@ -238,14 +239,24 @@ export default class ImageInput extends React.PureComponent<Props, State> {
   }
 
   renderAdvancedEdit(fields: Array<FieldT>) {
-    const {value, level, onChange, materialize} = this.props
+    const {value, level, onChange, readOnly, materialize} = this.props
 
     return (
       <Dialog title="Edit details" onClose={this.handleStopAdvancedEdit} isOpen>
-        {this.isImageToolEnabled() && value && value.asset && (
-          <WithMaterializedReference materialize={materialize} reference={value.asset}>
-            {imageAsset => <ImageToolInput level={level} imageUrl={imageAsset.url} value={value} onChange={onChange} />}
-          </WithMaterializedReference>
+        {this.isImageToolEnabled() &&
+          value &&
+          value.asset && (
+            <WithMaterializedReference materialize={materialize} reference={value.asset}>
+              {imageAsset => (
+                <ImageToolInput
+                  level={level}
+                  readOnly={readOnly}
+                  imageUrl={imageAsset.url}
+                  value={value}
+                  onChange={onChange}
+                />
+              )}
+            </WithMaterializedReference>
         )}
         <div className={styles.advancedEditFields}>
           {this.renderFields(fields)}
@@ -260,7 +271,7 @@ export default class ImageInput extends React.PureComponent<Props, State> {
   }
 
   renderField(field: FieldT) {
-    const {value, level, focusPath, onFocus, onBlur} = this.props
+    const {value, level, focusPath, onFocus, readOnly, onBlur} = this.props
     const fieldValue = value && value[field.name]
 
     return (
@@ -275,6 +286,7 @@ export default class ImageInput extends React.PureComponent<Props, State> {
           path={[field.name]}
           onFocus={onFocus}
           onBlur={onBlur}
+          readOnly={readOnly || field.type.readOnly}
           focusPath={focusPath}
           level={level}
         />
@@ -318,7 +330,7 @@ export default class ImageInput extends React.PureComponent<Props, State> {
   }
 
   render() {
-    const {type, value, level, materialize} = this.props
+    const {type, value, level, materialize, readOnly} = this.props
 
     const {isAdvancedEditOpen, isSelectAssetOpen, uploadError, hasFocus} = this.state
 
@@ -363,7 +375,7 @@ export default class ImageInput extends React.PureComponent<Props, State> {
               <WithMaterializedReference reference={value.asset} materialize={materialize}>
                 {this.renderMaterializedAsset}
               </WithMaterializedReference>
-            ) : <UploadPlaceholder hasFocus={hasFocus} />}
+            ) : (readOnly ? <span>Field is read only</span> : <UploadPlaceholder hasFocus={hasFocus} />)}
           </div>
           {highlightedFields.length > 0 && (
             <div className={styles.fieldsWrapper}>
@@ -372,27 +384,27 @@ export default class ImageInput extends React.PureComponent<Props, State> {
           )}
         </div>
         <div className={styles.functions}>
-          <FileInputButton
+          {!readOnly && <FileInputButton
             icon={UploadIcon}
             onSelect={this.handleSelectFile}
             accept={''/* todo build from this.props.resolveUploaders */}
           >
             Upload
-          </FileInputButton>
-          <Button onClick={this.handleOpenSelectAsset} kind="simple">
+          </FileInputButton>}
+          {!readOnly && <Button onClick={this.handleOpenSelectAsset} kind="simple">
             Select from library
-          </Button>
+          </Button>}
           {showAdvancedEditButton && (
             <Button
-              icon={EditIcon}
+              icon={readOnly ? VisibilityIcon : EditIcon}
               kind="simple"
-              title="Edit details"
+              title={readOnly ? 'View details' : 'Edit details'}
               onClick={this.handleStartAdvancedEdit}
             >
-              Edit
+              {readOnly ? 'View details' : 'Edit'}
             </Button>
           )}
-          {hasAsset && (
+          {hasAsset && !readOnly && (
             <Button color="danger" kind="simple" onClick={this.handleRemoveButtonClick}>Remove</Button>
           )}
         </div>
diff --git a/packages/@sanity/form-builder/src/inputs/ImageTool/ImageToolInput.js b/packages/@sanity/form-builder/src/inputs/ImageTool/ImageToolInput.js
index 2bafa3ca894..3fd14db444d 100644
--- a/packages/@sanity/form-builder/src/inputs/ImageTool/ImageToolInput.js
+++ b/packages/@sanity/form-builder/src/inputs/ImageTool/ImageToolInput.js
@@ -33,6 +33,7 @@ type Props = {
   imageUrl: string,
   value?: Value,
   onChange: (PatchEvent) => void,
+  readOnly: ?boolean,
   level: number
 }
 
@@ -56,12 +57,15 @@ export default class ImageToolInput extends React.Component<Props, State> {
   }
 
   handleChangeEnd = () => {
-    const {onChange} = this.props
+    const {onChange, readOnly} = this.props
     const {value} = this.state
-    onChange(PatchEvent.from([
-      set(value.crop, ['crop']),
-      set(value.hotspot, ['hotspot'])
-    ]))
+    if (!readOnly) {
+      onChange(PatchEvent.from([
+        set(value.crop, ['crop']),
+        set(value.hotspot, ['hotspot'])
+      ]))
+    }
+    this.setState({value: this.props.value})
   }
 
   handleChange = (nextValue: Value) => {
@@ -73,7 +77,7 @@ export default class ImageToolInput extends React.Component<Props, State> {
   }
 
   render() {
-    const {imageUrl, level} = this.props
+    const {imageUrl, level, readOnly} = this.props
     const {value} = this.state
 
     return (
@@ -84,6 +88,7 @@ export default class ImageToolInput extends React.Component<Props, State> {
               <ImageTool
                 value={value}
                 src={imageUrl}
+                readOnly={readOnly}
                 onChangeEnd={this.handleChangeEnd}
                 onChange={this.handleChange}
               />
diff --git a/packages/@sanity/form-builder/src/inputs/Number.js b/packages/@sanity/form-builder/src/inputs/Number.js
index 9a035c86076..b8d8c052b66 100644
--- a/packages/@sanity/form-builder/src/inputs/Number.js
+++ b/packages/@sanity/form-builder/src/inputs/Number.js
@@ -9,6 +9,7 @@ type Props = {
   type: Type,
   level: number,
   value: ?string,
+  readOnly: ?boolean,
   onChange: PatchEvent => void
 }
 
@@ -31,7 +32,7 @@ export default class NumberInput extends React.Component<Props> {
   }
 
   render() {
-    const {value = '', type, level, ...rest} = this.props
+    const {value = '', readOnly, type, level, ...rest} = this.props
 
     return (
       <FormField
@@ -43,7 +44,7 @@ export default class NumberInput extends React.Component<Props> {
           {...rest}
           type="number"
           value={value}
-          readOnly={type.readOnly}
+          readOnly={readOnly}
           placeholder={type.placeholder}
           onChange={this.handleChange}
           ref={this.setInput}
diff --git a/packages/@sanity/form-builder/src/inputs/Object/Field.js b/packages/@sanity/form-builder/src/inputs/Object/Field.js
index 7c0febe9350..4288bb437a9 100644
--- a/packages/@sanity/form-builder/src/inputs/Object/Field.js
+++ b/packages/@sanity/form-builder/src/inputs/Object/Field.js
@@ -18,6 +18,7 @@ export default class Field extends React.Component {
     onFocus: PropTypes.func.isRequired,
     onBlur: PropTypes.func.isRequired,
     focusPath: PropTypes.array,
+    readOnly: PropTypes.bool,
     level: PropTypes.number
   }
 
@@ -42,7 +43,7 @@ export default class Field extends React.Component {
   }
 
   render() {
-    const {value, field, level, onFocus, onBlur, focusPath} = this.props
+    const {value, readOnly, field, level, onFocus, onBlur, focusPath} = this.props
 
     if (typeof value !== 'undefined') {
       const expectedType = field.type.name
@@ -77,6 +78,7 @@ export default class Field extends React.Component {
           path={[field.name]}
           onFocus={onFocus}
           onBlur={onBlur}
+          readOnly={readOnly || field.type.readOnly}
           focusPath={focusPath}
           level={level}
           ref={this.setInput}
diff --git a/packages/@sanity/form-builder/src/inputs/Object/Object.js b/packages/@sanity/form-builder/src/inputs/Object/Object.js
index b7ec70dd70e..fa66cf33b67 100644
--- a/packages/@sanity/form-builder/src/inputs/Object/Object.js
+++ b/packages/@sanity/form-builder/src/inputs/Object/Object.js
@@ -43,6 +43,7 @@ export default class ObjectInput extends React.PureComponent {
     focusPath: PropTypes.array,
     onBlur: PropTypes.func.isRequired,
     level: PropTypes.number,
+    readOnly: PropTypes.bool,
     isRoot: PropTypes.bool
   }
 
@@ -91,7 +92,7 @@ export default class ObjectInput extends React.PureComponent {
       return null
     }
 
-    const {value, focusPath, onFocus, onBlur} = this.props
+    const {value, readOnly, type, focusPath, onFocus, onBlur} = this.props
     const fieldValue = value && value[field.name]
     return (
       <Field
@@ -103,6 +104,7 @@ export default class ObjectInput extends React.PureComponent {
         onBlur={onBlur}
         focusPath={focusPath}
         level={level}
+        readOnly={readOnly}
         ref={index === 0 && this.setFirstField}
       />
     )
diff --git a/packages/@sanity/form-builder/src/inputs/OptionsArray/Item.js b/packages/@sanity/form-builder/src/inputs/OptionsArray/Item.js
index e10b1a5c6ce..1d0031ce39c 100644
--- a/packages/@sanity/form-builder/src/inputs/OptionsArray/Item.js
+++ b/packages/@sanity/form-builder/src/inputs/OptionsArray/Item.js
@@ -9,7 +9,8 @@ type Props = {
   type: Type,
   value: any,
   checked: boolean,
-  onChange: (boolean, any) => void
+  onChange: (boolean, any) => void,
+  readOnly: ?boolean
 }
 export default class Item extends React.PureComponent<Props> {
   handleChange = (event: SyntheticEvent<HTMLInputElement>) => {
@@ -18,11 +19,12 @@ export default class Item extends React.PureComponent<Props> {
   }
 
   render() {
-    const {value, checked, type} = this.props
+    const {value, checked, type, readOnly} = this.props
     return (
       <Checkbox
         onChange={this.handleChange}
         checked={checked}
+        readOnly={readOnly || type.readOnly}
       >
         {isLegacyOptionsItem(value)
           ? value.title
diff --git a/packages/@sanity/form-builder/src/inputs/OptionsArray/OptionsArray.js b/packages/@sanity/form-builder/src/inputs/OptionsArray/OptionsArray.js
index 9959c77ba89..2bbec6dccff 100644
--- a/packages/@sanity/form-builder/src/inputs/OptionsArray/OptionsArray.js
+++ b/packages/@sanity/form-builder/src/inputs/OptionsArray/OptionsArray.js
@@ -55,6 +55,7 @@ export default class OptionsArrayInput extends React.PureComponent {
     }),
     value: PropTypes.array,
     level: PropTypes.number,
+    readOnly: PropTypes.bool,
     onChange: PropTypes.func
   }
 
@@ -65,7 +66,7 @@ export default class OptionsArrayInput extends React.PureComponent {
 
     if (!isChecked && optionValue._key) {
       // This is an optimization that only works if list items are _keyed
-      this.props.onChange(PatchEvent.from(unset({_key: optionValue._key})))
+      this.props.onChange(PatchEvent.from(unset([{_key: optionValue._key}])))
     }
 
     const nextValue = list
@@ -85,7 +86,7 @@ export default class OptionsArrayInput extends React.PureComponent {
   }
 
   render() {
-    const {type, value, level} = this.props
+    const {type, value, level, readOnly} = this.props
 
     const options = get(type.options, 'list')
     const direction = get(type.options, 'direction') // vertical and horizontal
@@ -114,6 +115,7 @@ export default class OptionsArrayInput extends React.PureComponent {
               <Item
                 layout="inline"
                 type={optionType}
+                readOnly={readOnly}
                 value={option}
                 checked={checked}
                 onChange={this.handleChange}
diff --git a/packages/@sanity/form-builder/src/inputs/Reference/ReferenceInput.js b/packages/@sanity/form-builder/src/inputs/Reference/ReferenceInput.js
index ae8571d00ae..efb3ffca18d 100644
--- a/packages/@sanity/form-builder/src/inputs/Reference/ReferenceInput.js
+++ b/packages/@sanity/form-builder/src/inputs/Reference/ReferenceInput.js
@@ -192,6 +192,7 @@ export default class ReferenceInput extends React.Component<Props, State> {
       type,
       value,
       level,
+      readOnly,
       onSearch,
       getPreviewSnapshot,
       ...rest
@@ -240,6 +241,7 @@ export default class ReferenceInput extends React.Component<Props, State> {
             isLoading={isFetching}
             items={hits}
             ref={this.setInput}
+            readOnly={readOnly}
           />
         </div>
       </FormField>
diff --git a/packages/@sanity/form-builder/src/inputs/String.js b/packages/@sanity/form-builder/src/inputs/String.js
index 16b6ec6020a..5c1f91bd8f4 100644
--- a/packages/@sanity/form-builder/src/inputs/String.js
+++ b/packages/@sanity/form-builder/src/inputs/String.js
@@ -9,6 +9,7 @@ type Props = {
   type: Type,
   level: number,
   value: ?string,
+  readOnly: ?boolean,
   onChange: PatchEvent => void
 }
 
@@ -31,7 +32,7 @@ export default class StringInput extends React.Component<Props> {
   }
 
   render() {
-    const {value, type, level, ...rest} = this.props
+    const {value, readOnly, type, level, ...rest} = this.props
 
     return (
       <FormField
@@ -43,7 +44,7 @@ export default class StringInput extends React.Component<Props> {
           {...rest}
           type="text"
           value={value}
-          readOnly={type.readOnly}
+          readOnly={readOnly}
           placeholder={type.placeholder}
           onChange={this.handleChange}
           ref={this.setInput}
diff --git a/packages/@sanity/form-builder/src/inputs/StringSelect.js b/packages/@sanity/form-builder/src/inputs/StringSelect.js
index 2dc1c55642c..642fece9d37 100644
--- a/packages/@sanity/form-builder/src/inputs/StringSelect.js
+++ b/packages/@sanity/form-builder/src/inputs/StringSelect.js
@@ -18,6 +18,7 @@ type Props = {
   type: Type,
   level: number,
   value: ?string,
+  readOnly: ?boolean,
   onChange: PatchEvent => void
 }
 
@@ -44,7 +45,7 @@ export default class StringSelect extends React.Component<Props> {
   }
 
   render() {
-    const {value, type, level, ...rest} = this.props
+    const {value, readOnly, type, level, ...rest} = this.props
 
     const items = toSelectItems(type.options.list || [])
 
@@ -68,6 +69,7 @@ export default class StringSelect extends React.Component<Props> {
             value={currentItem}
             direction={type.options.direction || 'vertical'}
             ref={this.setInput}
+            readOnly={readOnly}
           />
           : <Select
             {...rest}
@@ -77,6 +79,7 @@ export default class StringSelect extends React.Component<Props> {
             onChange={this.handleChange}
             items={[EMPTY_ITEM].concat(items)}
             ref={this.setInput}
+            readOnly={readOnly}
           />
         }
       </FormField>
diff --git a/packages/@sanity/form-builder/src/inputs/TagsArray/TagsArray.js b/packages/@sanity/form-builder/src/inputs/TagsArray/TagsArray.js
index d3bd3697f25..c0f8ff61975 100644
--- a/packages/@sanity/form-builder/src/inputs/TagsArray/TagsArray.js
+++ b/packages/@sanity/form-builder/src/inputs/TagsArray/TagsArray.js
@@ -9,6 +9,7 @@ type Props = {
   type: Type,
   value: Array<string>,
   level: number,
+  readOnly: ?boolean,
   onChange: (PatchEvent) => void
 }
 
@@ -35,7 +36,7 @@ export default class TagsArrayInput extends React.PureComponent<Props> {
   }
 
   render() {
-    const {type, value, level, ...rest} = this.props
+    const {type, value, readOnly, level, ...rest} = this.props
     return (
       <FormField
         level={level}
@@ -44,6 +45,7 @@ export default class TagsArrayInput extends React.PureComponent<Props> {
       >
         <TagInput
           {...rest}
+          readOnly={readOnly}
           value={value}
           onChange={this.handleChange}
           ref={this.setInput}
diff --git a/packages/@sanity/form-builder/src/inputs/Telephone.js b/packages/@sanity/form-builder/src/inputs/Telephone.js
index af64acb79d1..fd72a4a476e 100644
--- a/packages/@sanity/form-builder/src/inputs/Telephone.js
+++ b/packages/@sanity/form-builder/src/inputs/Telephone.js
@@ -9,6 +9,7 @@ type Props = {
   type: Type,
   level: number,
   value: ?string,
+  readOnly: ?boolean,
   onChange: PatchEvent => void
 }
 
@@ -31,7 +32,7 @@ export default class TelephoneInput extends React.Component<Props> {
   }
 
   render() {
-    const {value, type, level, ...rest} = this.props
+    const {value, type, readOnly, level, ...rest} = this.props
 
     return (
       <FormField
@@ -43,7 +44,7 @@ export default class TelephoneInput extends React.Component<Props> {
           {...rest}
           type="tel"
           value={value}
-          readOnly={type.readOnly}
+          readOnly={readOnly}
           placeholder={type.placeholder}
           onChange={this.handleChange}
           ref={this.setInput}
diff --git a/packages/@sanity/form-builder/src/inputs/Text.js b/packages/@sanity/form-builder/src/inputs/Text.js
index 259d2b087de..4bf30b5fc06 100644
--- a/packages/@sanity/form-builder/src/inputs/Text.js
+++ b/packages/@sanity/form-builder/src/inputs/Text.js
@@ -9,6 +9,7 @@ type Props = {
   type: Type,
   level: number,
   value: ?string,
+  readOnly: ?boolean,
   onChange: PatchEvent => void
 }
 
@@ -31,7 +32,7 @@ export default class TextInput extends React.Component<Props> {
   }
 
   render() {
-    const {value, type, level, ...rest} = this.props
+    const {value, type, readOnly, level, ...rest} = this.props
 
     return (
       <FormField
@@ -42,7 +43,7 @@ export default class TextInput extends React.Component<Props> {
         <TextArea
           {...rest}
           value={value}
-          readOnly={type.readOnly}
+          readOnly={readOnly}
           placeholder={type.placeholder}
           onChange={this.handleChange}
           rows={type.rows}
diff --git a/packages/@sanity/form-builder/src/inputs/Url.js b/packages/@sanity/form-builder/src/inputs/Url.js
index 71aa23493a2..2b153cdadb1 100644
--- a/packages/@sanity/form-builder/src/inputs/Url.js
+++ b/packages/@sanity/form-builder/src/inputs/Url.js
@@ -9,6 +9,7 @@ type Props = {
   type: Type,
   level: number,
   value: ?string,
+  readOnly: ?boolean,
   onChange: PatchEvent => void
 }
 
@@ -31,7 +32,7 @@ export default class UrlInput extends React.Component<Props> {
   }
 
   render() {
-    const {value, type, level, ...rest} = this.props
+    const {value, type, readOnly, level, ...rest} = this.props
 
     return (
       <FormField
@@ -43,7 +44,7 @@ export default class UrlInput extends React.Component<Props> {
           {...rest}
           type="url"
           value={value}
-          readOnly={type.readOnly}
+          readOnly={readOnly}
           placeholder={type.placeholder}
           onChange={this.handleChange}
           ref={this.setInput}
diff --git a/packages/@sanity/imagetool/src/ImageTool.js b/packages/@sanity/imagetool/src/ImageTool.js
index 7463a9915a6..c1c10f843a0 100644
--- a/packages/@sanity/imagetool/src/ImageTool.js
+++ b/packages/@sanity/imagetool/src/ImageTool.js
@@ -280,7 +280,7 @@ export default class ImageTool extends React.PureComponent {
 
   paintHotspot(context, opacity) {
 
-    const {image} = this.props
+    const {image, readOnly} = this.props
 
     const imageRect = new Rect().setSize(image.width, image.height)
 
@@ -295,7 +295,9 @@ export default class ImageTool extends React.PureComponent {
     context.clip()
     drawHole()
     context.restore()
-    drawDragHandle(Math.PI * 1.25)
+    if (!readOnly) {
+      drawDragHandle(Math.PI * 1.25)
+    }
 
     function drawEllipse() {
       context.save()
@@ -465,6 +467,7 @@ export default class ImageTool extends React.PureComponent {
   }
 
   paint(context) {
+    const {readOnly} = this.props
     context.save()
 
     const pxratio = this.state.devicePixelVsBackingStoreRatio
@@ -479,7 +482,9 @@ export default class ImageTool extends React.PureComponent {
     this.debug(context)
     this.paintCropBorder(context)
 
-    this.highlightCropHandles(context, opacity)
+    if (!readOnly) {
+      this.highlightCropHandles(context, opacity)
+    }
 
     if (this.state.mousePosition) {
       // this.paintMousePosition(context)
@@ -651,20 +656,21 @@ export default class ImageTool extends React.PureComponent {
   }
 
   render() {
-    const {height, width} = this.props.image
+    const {image, readOnly} = this.props
     const ratio = this.state.devicePixelVsBackingStoreRatio
     return (
       <div className={styles.root}>
         <DragAwareCanvas
           className={styles.canvas}
+          readOnly={readOnly}
           ref={this.setCanvas}
           onDrag={this.handleDrag}
           onDragStart={this.handleDragStart}
           onDragEnd={this.handleDragEnd}
           onMouseMove={this.handleMouseMove}
           onMouseOut={this.handleMouseOut}
-          height={height * ratio}
-          width={width * ratio}
+          height={image.height * ratio}
+          width={image.width * ratio}
         />
       </div>
     )
diff --git a/packages/@sanity/imagetool/src/makeDragAware.js b/packages/@sanity/imagetool/src/makeDragAware.js
index 5e903476c5b..8dfd7bda062 100644
--- a/packages/@sanity/imagetool/src/makeDragAware.js
+++ b/packages/@sanity/imagetool/src/makeDragAware.js
@@ -16,6 +16,7 @@ export default function makeDragAware(Component) {
       onDragStart: PropTypes.func.isRequired,
       onDrag: PropTypes.func.isRequired,
       onDragEnd: PropTypes.func.isRequired,
+      readOnly: PropTypes.bool
     }
 
     currentPos = null
@@ -117,12 +118,13 @@ export default function makeDragAware(Component) {
     }
 
     render() {
+      const {readOnly} = this.props
       return (
         <Component
           ref={this.setDomNode}
-          onTouchStart={this.handleDragStart}
-          onMouseDown={this.handleDragStart}
-          onTouchMove={this.handleDrag}
+          onTouchStart={!readOnly && this.handleDragStart}
+          onMouseDown={!readOnly && this.handleDragStart}
+          onTouchMove={!readOnly && this.handleDrag}
           {...omit(this.props, ['onDragStart', 'onDragEnd', 'onDrag'])}
         />)
     }
@@ -154,4 +156,4 @@ function diffPos(pos, otherPos) {
     x: pos.x - otherPos.x,
     y: pos.y - otherPos.y
   }
-}
\ No newline at end of file
+}
diff --git a/packages/@sanity/import/package.json b/packages/@sanity/import/package.json
index 0860ad1afcf..dd8dc454751 100644
--- a/packages/@sanity/import/package.json
+++ b/packages/@sanity/import/package.json
@@ -12,15 +12,7 @@
     "clean": "rimraf lib",
     "test": "jest"
   },
-  "keywords": [
-    "sanity",
-    "cms",
-    "headless",
-    "realtime",
-    "content",
-    "import",
-    "ndjson"
-  ],
+  "keywords": ["sanity", "cms", "headless", "realtime", "content", "import", "ndjson"],
   "dependencies": {
     "@rexxars/get-uri": "^2.0.2",
     "@sanity/mutator": "^0.125.8",
diff --git a/packages/test-studio/schemas/readOnly.js b/packages/test-studio/schemas/readOnly.js
new file mode 100644
index 00000000000..8501a99a190
--- /dev/null
+++ b/packages/test-studio/schemas/readOnly.js
@@ -0,0 +1,278 @@
+import icon from 'react-icons/lib/md/text-format'
+import React from 'react'
+
+export default {
+  name: 'readOnlyTest',
+  type: 'document',
+  title: 'Read only test',
+  icon,
+  fields: [
+    {
+      name: 'title',
+      type: 'string',
+      title: 'Title',
+      description: 'This is a basic string field',
+      readOnly: true
+    },
+    {
+      name: 'select',
+      type: 'string',
+      title: 'Select string',
+      description: 'Select a single string value from a set of predefined options. It should be possible to unset a selected value.',
+      readOnly: true,
+      options: {
+        list: [
+          {
+            title: 'One (1)',
+            value: 'one'
+          },
+          {
+            title: 'Two (2)',
+            value: 'two'
+          },
+          {
+            title: 'Three (3)',
+            value: 'three'
+          }
+        ]
+      }
+    },
+    {
+      name: 'radioSelectHorizontal',
+      title: 'Select (layout: radio, direction: horizontal)',
+      type: 'string',
+      description: 'Select a single string value by choosing options from a list of radio buttons. It should *not* be possible to unset a selected value once its set.',
+      readOnly: true,
+      options: {
+        layout: 'radio',
+        direction: 'horizontal',
+        list: [
+          {
+            title: 'One (1)',
+            value: 'one'
+          },
+          {
+            title: 'Two (2)',
+            value: 'two'
+          },
+          {
+            title: 'Three (3)',
+            value: 'three'
+          }
+        ]
+      }
+    },
+    {
+      name: 'selectObjectOfString',
+      title: 'Select string in object',
+      description: 'Select a single string value from an array of strings. It should be possible to unset a selected value.',
+      type: 'string',
+      readOnly: true,
+      options: {
+        list: ['one', 'two', 'three']
+      }
+    },
+    {
+      title: 'Reference to book or author',
+      name: 'multiTypeRef',
+      type: 'reference',
+      readOnly: true,
+      to: [{type: 'book'}, {type: 'author'}]
+    },
+    {
+      name: 'anObject',
+      type: 'object',
+      title: 'A read only object',
+      readOnly: true,
+      fields: [
+        {name: 'first', type: 'string'},
+        {name: 'second', type: 'string'}
+      ]
+    },
+    {
+      name: 'myObject',
+      type: 'myObject',
+      title: 'MyObject',
+      description: 'The first field here should be the title',
+      readOnly: true
+    },
+    {
+      title: 'Description',
+      name: 'description',
+      type: 'text',
+      readOnly: true
+    },
+    {
+      title: 'Number',
+      name: 'popularity',
+      type: 'number',
+      readOnly: true
+    },
+    {
+      title: 'Has the movie been released?',
+      name: 'released',
+      type: 'boolean',
+      readOnly: true
+    },
+    {
+      title: 'Has the movie been released?',
+      name: 'releasedCheckbox',
+      type: 'boolean',
+      readOnly: true,
+      options: {
+        layout: 'checkbox'
+      }
+    },
+    {
+      name: 'date',
+      title: 'Date',
+      description: 'A read only date',
+      type: 'datetime',
+      readOnly: true
+    },
+    {
+      name: 'tags',
+      title: 'Tags',
+      description: 'Enter a tag and press enter. Should result in an array of strings and should be possible to remove items',
+      type: 'array',
+      options: {layout: 'tags'},
+      of: [{type: 'string'}],
+      readOnly: true
+    },
+    {
+      name: 'readOnlyArray',
+      title: 'Polymorphic grid array',
+      description: 'An array of multiple types. options: {layout: "grid"}',
+      type: 'array',
+      readOnly: true,
+      of: [
+        {
+          title: 'A book',
+          type: 'book'
+        }
+      ]
+    },
+    {
+      name: 'readOnlyImage',
+      title: 'Read only image field',
+      type: 'image',
+      readOnly: true,
+      options: {hotspot: true},
+      fields: [
+        {
+          title: 'Caption',
+          type: 'string',
+          name: 'caption',
+          options: {isHighlighted: true}
+        },
+        {
+          title: 'Attribution',
+          name: 'attribution',
+          type: 'string',
+          options: {isHighlighted: true}
+        },
+        {
+          title: 'Extra',
+          name: 'extra',
+          type: 'string'
+        }
+      ]
+    },
+    {
+      name: 'readOnlyFile',
+      title: 'Read only file field',
+      type: 'file',
+      readOnly: true,
+      fields: [
+        {
+          title: 'Caption',
+          type: 'string',
+          name: 'caption',
+          options: {isHighlighted: true}
+        },
+        {
+          title: 'Attribution',
+          name: 'attribution',
+          type: 'string',
+          options: {isHighlighted: true}
+        },
+        {
+          title: 'Extra',
+          name: 'extra',
+          type: 'string'
+        }
+      ]
+    },
+    {
+      name: 'readOnlyArrayOfPrimitives',
+      title: 'Array with primitive types',
+      description: 'This array contains only strings, values and booleans',
+      type: 'array',
+      readOnly: true,
+      of: [
+        {
+          type: 'string',
+          title: 'String'
+        },
+        {
+          type: 'number',
+          title: 'Number',
+        },
+        {
+          type: 'boolean',
+          title: 'Boolean'
+        }
+      ]
+    },
+    {
+      name: 'readOnlyArrayOfPredefinedOptions',
+      title: 'Read only array of predefined options',
+      type: 'array',
+      readOnly: true,
+      of: [
+        {
+          type: 'object',
+          name: 'color',
+          fields: [
+            {
+              name: 'title',
+              type: 'string',
+            },
+            {
+              name: 'name',
+              type: 'string',
+            }
+          ],
+          preview: {
+            select: {
+              title: 'title',
+              name: 'name'
+            },
+            prepare({title, name}) {
+              return {
+                title: title,
+                media: () => (
+                  <div
+                    style={{
+                      backgroundColor: name,
+                      height: '100%', width: '100%'
+                    }}
+                  />
+                )
+              }
+            }
+          }
+        }
+      ],
+      options: {
+        direction: 'vertical',
+        list: [
+          {_type: 'color', title: 'Red', name: 'red', _key: 'red'},
+          {_type: 'color', title: 'Green', name: 'green', _key: 'green'},
+          {_type: 'color', title: 'Blue', name: 'blue', _key: 'blue'},
+          {_type: 'color', title: 'Black', name: 'black', _key: 'black'},
+        ]
+      },
+    },
+  ]
+}
diff --git a/packages/test-studio/schemas/schema.js b/packages/test-studio/schemas/schema.js
index 64363c593f0..a276c4cb474 100644
--- a/packages/test-studio/schemas/schema.js
+++ b/packages/test-studio/schemas/schema.js
@@ -26,6 +26,7 @@ import slugs from './slugs'
 import geopoint from './geopoint'
 import fieldsets from './fieldsets'
 import empty from './empty'
+import readOnly from './readOnly'
 
 import customInputs from './customInputs'
 import notitle from './notitle'
@@ -71,6 +72,7 @@ export default createSchema({
     typeWithNoToplevelStrings,
     previewImageUrlTest,
     previewMediaTest,
+    readOnly,
     empty
   ])
 })