diff --git a/mobile/package-lock.json b/mobile/package-lock.json
index 5467cf3..0dba24e 100644
--- a/mobile/package-lock.json
+++ b/mobile/package-lock.json
@@ -5109,9 +5109,9 @@
       }
     },
     "react-form-binder": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/react-form-binder/-/react-form-binder-2.0.1.tgz",
-      "integrity": "sha512-QOIO7dd6s+zvw6V3JdaWbuCKm6OwunOemuvR7ds98nnPoUXXZ3Fv4SLRGkt3GcI97a5PDlWvNAN/9qz571SHjA==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/react-form-binder/-/react-form-binder-3.0.0.tgz",
+      "integrity": "sha512-XPXw+OVxfko1rcN1WjLxaCt8FVZaWrjCI7XNaNx1Su8/QFDqeAh1dgWpySE31i73un2v3ig+0r0WL+lHaV9Y3Q==",
       "requires": {
         "eventemitter3": "^2.0.3",
         "prop-types": "^15.5.10",
diff --git a/mobile/package.json b/mobile/package.json
index 921e928..521f5e2 100644
--- a/mobile/package.json
+++ b/mobile/package.json
@@ -23,7 +23,7 @@
     "eventemitter3": "^3.1.0",
     "moment": "^2.22.1",
     "react": "^16.3.2",
-    "react-form-binder": "^2.0.1",
+    "react-form-binder": "^3.0.0",
     "react-native": "^0.55.4",
     "react-native-fs": "^2.9.12",
     "react-native-image-picker": "^0.26.7",
diff --git a/mobile/src/Activity/Activity.js b/mobile/src/Activity/Activity.js
index 7549b05..068ea67 100644
--- a/mobile/src/Activity/Activity.js
+++ b/mobile/src/Activity/Activity.js
@@ -191,7 +191,7 @@ export class Activity extends React.Component {
   @autobind
   handleDonePress() {
     const { binder } = this.state
-    let obj = binder.getModifiedFieldValues()
+    let obj = binder.getmodifiedBindingValues()
 
     if (!obj._id) {
       api
diff --git a/mobile/src/Auth/Login.js b/mobile/src/Auth/Login.js
index d92be93..a89dbd3 100644
--- a/mobile/src/Auth/Login.js
+++ b/mobile/src/Auth/Login.js
@@ -94,7 +94,7 @@ export class Login extends React.Component {
 
   @autobind
   handleLogin() {
-    let obj = this.state.binder.getModifiedFieldValues()
+    let obj = this.state.binder.getmodifiedBindingValues()
     let { history } = this.props
 
     if (obj) {
diff --git a/mobile/src/WorkItem/WorkItem.js b/mobile/src/WorkItem/WorkItem.js
index 2dc4999..a8bf11a 100644
--- a/mobile/src/WorkItem/WorkItem.js
+++ b/mobile/src/WorkItem/WorkItem.js
@@ -64,6 +64,10 @@ export class WorkItem extends React.Component {
       isValid: (r, v) => v !== "",
       isReadOnly: true,
       alwaysGet: true,
+      initValue: null,
+      pre: (v) =>
+        v !== null && formatLatLng(v.coordinates[1], v.coordinates[0]),
+      post: (v) => parseLatLng(v),
     },
     address: {
       isValid: true,
@@ -105,10 +109,10 @@ export class WorkItem extends React.Component {
         .getWorkItem(id)
         .then((workItem) => {
           if (workItem) {
-            const [lng, lat] = workItem.location.coordinates
+            const [longitude, latitude] = workItem.location.coordinates
             const region = {
-              latitude: lat,
-              longitude: lng,
+              latitude,
+              longitude,
               latitudeDelta: 0.01,
               longitudeDelta: 0.01,
             }
@@ -119,7 +123,6 @@ export class WorkItem extends React.Component {
               this.goToRegion = region
             }
 
-            workItem.location = formatLatLng(lat, lng)
             this.setState({
               binder: new FormBinder(workItem, WorkItem.bindings),
             })
@@ -158,9 +161,7 @@ export class WorkItem extends React.Component {
   @autobind
   handleDonePress() {
     const { binder } = this.state
-    let obj = binder.getModifiedFieldValues()
-
-    obj.location = parseLatLng(obj.location)
+    let obj = binder.getmodifiedBindingValues()
 
     if (!obj._id) {
       api
diff --git a/mobile/src/ui/BoundButton.js b/mobile/src/ui/BoundButton.js
index cfc16cb..fc3d18b 100644
--- a/mobile/src/ui/BoundButton.js
+++ b/mobile/src/ui/BoundButton.js
@@ -1,7 +1,7 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { View, Text, TouchableHighlight } from 'react-native'
-import autobind from 'autobind-decorator'
+import React from "react"
+import PropTypes from "prop-types"
+import { View, Text, TouchableHighlight } from "react-native"
+import autobind from "autobind-decorator"
 
 export class BoundButton extends React.Component {
   static propTypes = {
@@ -9,7 +9,7 @@ export class BoundButton extends React.Component {
     title: PropTypes.string,
     binder: PropTypes.object.isRequired,
     onPress: PropTypes.func,
-    width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
+    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   }
 
   constructor(props) {
@@ -18,7 +18,7 @@ export class BoundButton extends React.Component {
     const { name, binder } = this.props
 
     binder.addListener(name, this.updateValue)
-    this.state = binder.getFieldState(name)
+    this.state = binder.getBindingState(name)
   }
 
   @autobind
@@ -34,7 +34,7 @@ export class BoundButton extends React.Component {
     if (nextProps.binder !== this.props.binder) {
       this.props.binder.removeListener(this.props.name, this.updateValue)
       nextProps.binder.addListener(nextProps.name, this.updateValue)
-      this.setState(nextProps.binder.getFieldState(nextProps.name))
+      this.setState(nextProps.binder.getBindingState(nextProps.name))
     }
   }
 
@@ -48,17 +48,31 @@ export class BoundButton extends React.Component {
 
     if (disabled) {
       return (
-        <View style={{ flexDirection: 'column', justifyContent: 'center', paddingHorizontal: 10, height: 40, width , backgroundColor: '#E0E0E0' }}>
-          <Text style={{ alignSelf: 'center', color: '#AAAAAA' }}>{title}</Text>
+        <View
+          style={{
+            flexDirection: "column",
+            justifyContent: "center",
+            paddingHorizontal: 10,
+            height: 40,
+            width,
+            backgroundColor: "#E0E0E0",
+          }}>
+          <Text style={{ alignSelf: "center", color: "#AAAAAA" }}>{title}</Text>
         </View>
       )
     } else {
       return (
         <TouchableHighlight
           onPress={onPress}
-          style={{ justifyContent: 'center', paddingHorizontal: 10, height: 40, width, backgroundColor: '#3BB0FD' }}
-          underlayColor='#1A72AC'>
-          <Text style={{ alignSelf: 'center', color: 'black' }}>{title}</Text>
+          style={{
+            justifyContent: "center",
+            paddingHorizontal: 10,
+            height: 40,
+            width,
+            backgroundColor: "#3BB0FD",
+          }}
+          underlayColor="#1A72AC">
+          <Text style={{ alignSelf: "center", color: "black" }}>{title}</Text>
         </TouchableHighlight>
       )
     }
diff --git a/mobile/src/ui/BoundHeader.js b/mobile/src/ui/BoundHeader.js
index 11d6c5e..bd9f355 100644
--- a/mobile/src/ui/BoundHeader.js
+++ b/mobile/src/ui/BoundHeader.js
@@ -1,9 +1,12 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Header } from '.'
-import autobind from 'autobind-decorator'
+import React from "react"
+import PropTypes from "prop-types"
+import { Header } from "."
+import autobind from "autobind-decorator"
 
-const headerButtonShape = { icon: PropTypes.string.isRequired, onPress: PropTypes.func }
+const headerButtonShape = {
+  icon: PropTypes.string.isRequired,
+  onPress: PropTypes.func,
+}
 
 export class BoundHeader extends React.Component {
   static propTypes = {
@@ -20,7 +23,7 @@ export class BoundHeader extends React.Component {
     const { name, binder } = this.props
 
     binder.addListener(name, this.updateValue)
-    this.state = binder.getFieldState(name)
+    this.state = binder.getBindingState(name)
   }
 
   @autobind
@@ -36,7 +39,7 @@ export class BoundHeader extends React.Component {
     if (nextProps.binder !== this.props.binder) {
       this.props.binder.removeListener(this.props.name, this.updateValue)
       nextProps.binder.addListener(nextProps.name, this.updateValue)
-      this.setState(nextProps.binder.getFieldState(nextProps.name))
+      this.setState(nextProps.binder.getBindingState(nextProps.name))
     }
   }
 
@@ -54,7 +57,8 @@ export class BoundHeader extends React.Component {
         title={title}
         disabled={disabled}
         leftButton={leftButton}
-        rightButton={rightButton} />
+        rightButton={rightButton}
+      />
     )
   }
 }
diff --git a/mobile/src/ui/BoundInput.js b/mobile/src/ui/BoundInput.js
index 5f7f1f9..e32f659 100644
--- a/mobile/src/ui/BoundInput.js
+++ b/mobile/src/ui/BoundInput.js
@@ -23,13 +23,13 @@ export class BoundInput extends React.Component {
 
     const { name, binder } = this.props
 
-    this.state = binder.getFieldState(name)
+    this.state = binder.getBindingState(name)
     this.handleChangeText = this.handleChangeText.bind(this)
   }
 
   componentWillReceiveProps(nextProps) {
     if (nextProps.binder !== this.props.binder) {
-      this.setState(nextProps.binder.getFieldState(nextProps.name))
+      this.setState(nextProps.binder.getBindingState(nextProps.name))
     }
   }
 
@@ -38,7 +38,7 @@ export class BoundInput extends React.Component {
     const { binder, name } = this.props
 
     if (binder) {
-      this.setState(binder.updateFieldValue(name, newText))
+      this.setState(binder.updateBindingValue(name, newText))
     }
   }
 
diff --git a/mobile/src/ui/BoundOptionStrip.js b/mobile/src/ui/BoundOptionStrip.js
index 3648608..d6c166d 100644
--- a/mobile/src/ui/BoundOptionStrip.js
+++ b/mobile/src/ui/BoundOptionStrip.js
@@ -17,17 +17,19 @@ export class BoundOptionStrip extends React.Component {
 
   constructor(props) {
     super(props)
-    this.state = props.binder.getFieldState(props.name)
+    this.state = props.binder.getBindingState(props.name)
   }
 
   @autobind
   handleValueChanged(newValue) {
-    this.setState(this.props.binder.updateFieldValue(this.props.name, newValue))
+    this.setState(
+      this.props.binder.updateBindingValue(this.props.name, newValue)
+    )
   }
 
   componentWillReceiveProps(nextProps) {
     if (nextProps.binder !== this.props.binder) {
-      this.setState(nextProps.binder.getFieldState(nextProps.name))
+      this.setState(nextProps.binder.getBindingState(nextProps.name))
     }
   }
 
diff --git a/mobile/src/ui/BoundPhotoPanel.js b/mobile/src/ui/BoundPhotoPanel.js
index c779792..cce3e56 100644
--- a/mobile/src/ui/BoundPhotoPanel.js
+++ b/mobile/src/ui/BoundPhotoPanel.js
@@ -38,12 +38,12 @@ export class BoundPhotoPanel extends Component {
 
     const { name, binder } = this.props
 
-    this.state = binder.getFieldState(name)
+    this.state = binder.getBindingState(name)
   }
 
   componentWillReceiveProps(nextProps) {
     if (nextProps.binder !== this.props.binder) {
-      this.setState(nextProps.binder.getFieldState(nextProps.name))
+      this.setState(nextProps.binder.getBindingState(nextProps.name))
     }
   }
 
@@ -80,12 +80,12 @@ export class BoundPhotoPanel extends Component {
               const { binder, name } = this.props
 
               if (binder) {
-                const value = binder.getFieldValue(name)
+                const value = binder.getBindingValue(name)
                 let newValue = value instanceof Array ? value.slice(0) : []
 
                 newValue[index] = uploadData.assetId
 
-                this.setState(binder.updateFieldValue(name, newValue))
+                this.setState(binder.updateBindingValue(name, newValue))
               }
             })
             .catch((err) => {
diff --git a/mobile/src/ui/BoundSwitch.js b/mobile/src/ui/BoundSwitch.js
index 8902cd1..8864360 100644
--- a/mobile/src/ui/BoundSwitch.js
+++ b/mobile/src/ui/BoundSwitch.js
@@ -1,7 +1,7 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { View, Switch, Text } from 'react-native'
-import autobind from 'autobind-decorator'
+import React from "react"
+import PropTypes from "prop-types"
+import { View, Switch, Text } from "react-native"
+import autobind from "autobind-decorator"
 
 export class BoundSwitch extends React.Component {
   static propTypes = {
@@ -12,22 +12,22 @@ export class BoundSwitch extends React.Component {
 
   constructor(props) {
     super(props)
-    this.state = props.binder.getFieldState(props.name)
+    this.state = props.binder.getBindingState(props.name)
   }
 
   @autobind
   handleValueChange(newValue) {
     const { binder, name } = this.props
-    const state = binder.getFieldState(name)
+    const state = binder.getBindingState(name)
 
     if (!state.readOnly && !state.disabled) {
-      this.setState(binder.updateFieldValue(name, newValue))
+      this.setState(binder.updateBindingValue(name, newValue))
     }
   }
 
   componentWillReceiveProps(nextProps) {
     if (nextProps.binder !== this.props.binder) {
-      this.setState(nextProps.binder.getFieldState(nextProps.name))
+      this.setState(nextProps.binder.getBindingState(nextProps.name))
     }
   }
 
@@ -36,16 +36,22 @@ export class BoundSwitch extends React.Component {
     const { visible, disabled, value } = this.state
 
     return (
-      <View style={{
-          display: visible ? 'flex' : 'none',
-          flexDirection: 'row',
+      <View
+        style={{
+          display: visible ? "flex" : "none",
+          flexDirection: "row",
         }}>
-        <Switch disabled={disabled} value={value} onValueChange={this.handleValueChange} />
-        <Text style={{
-            color: disabled ? 'gray' : 'black',
+        <Switch
+          disabled={disabled}
+          value={value}
+          onValueChange={this.handleValueChange}
+        />
+        <Text
+          style={{
+            color: disabled ? "gray" : "black",
             fontSize: 16,
             paddingLeft: 8,
-            alignSelf: 'center'
+            alignSelf: "center",
           }}>
           {label}
         </Text>
diff --git a/website/package-lock.json b/website/package-lock.json
index 28ee973..c193068 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -14167,9 +14167,9 @@
       }
     },
     "react-form-binder": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/react-form-binder/-/react-form-binder-2.0.1.tgz",
-      "integrity": "sha512-QOIO7dd6s+zvw6V3JdaWbuCKm6OwunOemuvR7ds98nnPoUXXZ3Fv4SLRGkt3GcI97a5PDlWvNAN/9qz571SHjA==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/react-form-binder/-/react-form-binder-3.0.0.tgz",
+      "integrity": "sha512-XPXw+OVxfko1rcN1WjLxaCt8FVZaWrjCI7XNaNx1Su8/QFDqeAh1dgWpySE31i73un2v3ig+0r0WL+lHaV9Y3Q==",
       "requires": {
         "eventemitter3": "^2.0.3",
         "prop-types": "^15.5.10",
diff --git a/website/package.json b/website/package.json
index d281d17..e2c9885 100644
--- a/website/package.json
+++ b/website/package.json
@@ -12,7 +12,7 @@
     "radium": "^0.22.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "react-form-binder": "^2.0.1",
+    "react-form-binder": "^3.0.0",
     "react-router-dom": "^4.1.1",
     "regexp-pattern": "^1.0.4",
     "socket.io-client": "^2.0.3"
diff --git a/website/src/Auth/ForgotPassword.js b/website/src/Auth/ForgotPassword.js
index 22eb005..dd47a2e 100644
--- a/website/src/Auth/ForgotPassword.js
+++ b/website/src/Auth/ForgotPassword.js
@@ -43,7 +43,7 @@ export class ForgotPassword extends Component {
     e.preventDefault()
     e.stopPropagation()
 
-    const obj = this.state.binder.getModifiedFieldValues()
+    const obj = this.state.binder.getmodifiedBindingValues()
 
     this.setState({ waitModal: { message: "Requesting Reset Email" } })
 
diff --git a/website/src/Auth/Login.js b/website/src/Auth/Login.js
index 8562073..dab17be 100644
--- a/website/src/Auth/Login.js
+++ b/website/src/Auth/Login.js
@@ -65,7 +65,7 @@ export class Login extends Component {
       return
     }
 
-    let obj = this.state.binder.getModifiedFieldValues()
+    let obj = this.state.binder.getmodifiedBindingValues()
 
     if (obj) {
       this.setState({ waitModal: true })
@@ -102,7 +102,7 @@ export class Login extends Component {
     this.setState({
       messageModal: null,
       binder: new FormBinder(
-        { email: this.state.binder.getFieldValue("email") },
+        { email: this.state.binder.getBindingValue("email") },
         Login.bindings
       ),
     })
diff --git a/website/src/Auth/ResetPassword.js b/website/src/Auth/ResetPassword.js
index 04f0b47..4eda097 100644
--- a/website/src/Auth/ResetPassword.js
+++ b/website/src/Auth/ResetPassword.js
@@ -19,7 +19,7 @@ export class ResetPassword extends Component {
       isValid: (r, v) => v.length >= 6,
     },
     reenteredNewPassword: {
-      isValid: (r, v) => v !== "" && v === r.getFieldValue("newPassword"),
+      isValid: (r, v) => v !== "" && v === r.getBindingValue("newPassword"),
     },
     submit: {
       noValue: true,
@@ -73,7 +73,7 @@ export class ResetPassword extends Component {
     e.preventDefault()
     e.stopPropagation()
 
-    const obj = this.state.binder.getModifiedFieldValues()
+    const obj = this.state.binder.getmodifiedBindingValues()
     const passwordToken = new URLSearchParams(
       decodeURIComponent(window.location.search)
     ).get("password-token")
diff --git a/website/src/Modal/ChangeEmailModal.js b/website/src/Modal/ChangeEmailModal.js
index 6996543..b8c2d06 100644
--- a/website/src/Modal/ChangeEmailModal.js
+++ b/website/src/Modal/ChangeEmailModal.js
@@ -1,16 +1,16 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import autobind from 'autobind-decorator'
-import { Modal, Button, Row, Column, BoundInput, BoundButton, Text } from 'ui'
-import { regExpPattern } from 'regexp-pattern'
-import { FormBinder } from 'react-form-binder'
-import { sizeInfo } from 'ui/style'
+import React from "react"
+import PropTypes from "prop-types"
+import autobind from "autobind-decorator"
+import { Modal, Button, Row, Column, BoundInput, BoundButton, Text } from "ui"
+import { regExpPattern } from "regexp-pattern"
+import { FormBinder } from "react-form-binder"
+import { sizeInfo } from "ui/style"
 
 export class ChangeEmailModal extends React.Component {
   static propTypes = {
     open: PropTypes.bool,
     oldEmail: PropTypes.string,
-    onDismiss: PropTypes.func
+    onDismiss: PropTypes.func,
   }
 
   static bindings = {
@@ -18,20 +18,26 @@ export class ChangeEmailModal extends React.Component {
       noValue: true,
     },
     newEmail: {
-      isValid: (r, v) => (v !== '' && regExpPattern.email.test(v) && v !== r.getFieldValue('oldEmail'))
+      isValid: (r, v) =>
+        v !== "" &&
+        regExpPattern.email.test(v) &&
+        v !== r.getBindingValue("oldEmail"),
     },
     submit: {
-      isDisabled: (r) => (!r.allValid),
-      noValue: true
-    }
+      isDisabled: (r) => !r.allValid,
+      noValue: true,
+    },
   }
 
   constructor(props) {
     super(props)
     this.state = {
-      binder: new FormBinder({
-        oldEmail: props.oldEmail,
-      }, ChangeEmailModal.bindings)
+      binder: new FormBinder(
+        {
+          oldEmail: props.oldEmail,
+        },
+        ChangeEmailModal.bindings
+      ),
     }
   }
 
@@ -48,7 +54,7 @@ export class ChangeEmailModal extends React.Component {
   @autobind
   handleSubmit(e) {
     e.preventDefault()
-    let newEmail = this.state.binder.getFieldValue('newEmail')
+    let newEmail = this.state.binder.getBindingValue("newEmail")
     this.close(newEmail)
   }
 
@@ -62,7 +68,7 @@ export class ChangeEmailModal extends React.Component {
 
     return (
       <Modal open={this.props.open} width={sizeInfo.modalWidth}>
-        <form id='changeEmailForm' onSubmit={this.handleSubmit}>
+        <form id="changeEmailForm" onSubmit={this.handleSubmit}>
           <Column>
             <Column.Item height={sizeInfo.formColumnSpacing} />
             <Column.Item>
@@ -71,8 +77,8 @@ export class ChangeEmailModal extends React.Component {
                 <Row.Item grow>
                   <Column>
                     <Column.Item height={sizeInfo.formColumnSpacing} />
-                    <Column.Item color='black' icon='edit'>
-                      <Text size='large'>Change Password</Text>
+                    <Column.Item color="black" icon="edit">
+                      <Text size="large">Change Password</Text>
                     </Column.Item>
                     <Column.Item height={sizeInfo.formColumnSpacing} />
                     <Column.Item>
@@ -80,20 +86,28 @@ export class ChangeEmailModal extends React.Component {
                     </Column.Item>
                     <Column.Item height={sizeInfo.formColumnSpacing} />
                     <Column.Item>
-                      <BoundInput label='New Email' name='newEmail'
-                        message='Your new email address, e.g. xyz@abc.com, cannot be blank'
-                        binder={binder} />
+                      <BoundInput
+                        label="New Email"
+                        name="newEmail"
+                        message="Your new email address, e.g. xyz@abc.com, cannot be blank"
+                        binder={binder}
+                      />
                     </Column.Item>
                     <Column.Item height={sizeInfo.formColumnSpacing} />
                     <Column.Item>
                       <Row>
                         <Row.Item grow />
                         <Row.Item>
-                          <Button onClick={this.handleClick} text='Cancel' />
+                          <Button onClick={this.handleClick} text="Cancel" />
                         </Row.Item>
                         <Row.Item width={sizeInfo.formRowSpacing} />
                         <Row.Item>
-                          <BoundButton submit='changeEmailForm' name='submit' binder={binder} text='OK' />
+                          <BoundButton
+                            submit="changeEmailForm"
+                            name="submit"
+                            binder={binder}
+                            text="OK"
+                          />
                         </Row.Item>
                       </Row>
                     </Column.Item>
diff --git a/website/src/Modal/ChangePasswordModal.js b/website/src/Modal/ChangePasswordModal.js
index fa2b369..a4e85a4 100644
--- a/website/src/Modal/ChangePasswordModal.js
+++ b/website/src/Modal/ChangePasswordModal.js
@@ -1,38 +1,38 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import autobind from 'autobind-decorator'
-import { Modal, Button, Column, Row, Text, BoundInput, BoundButton } from 'ui'
-import { FormBinder } from 'react-form-binder'
-import { sizeInfo } from 'ui/style'
+import React from "react"
+import PropTypes from "prop-types"
+import autobind from "autobind-decorator"
+import { Modal, Button, Column, Row, Text, BoundInput, BoundButton } from "ui"
+import { FormBinder } from "react-form-binder"
+import { sizeInfo } from "ui/style"
 
 export class ChangePasswordModal extends React.Component {
   static propTypes = {
     open: PropTypes.bool,
-    onDismiss: PropTypes.func
+    onDismiss: PropTypes.func,
   }
 
   static bindings = {
     oldPassword: {
       alwaysGet: true,
-      isValid: (r, v) => (v !== '')
+      isValid: (r, v) => v !== "",
     },
     newPassword: {
       alwaysGet: true,
-      isValid: (r, v) => (v !== '' && v !== r.fields.oldPassword.value)
+      isValid: (r, v) => v !== "" && v !== r.getBindingValue("oldPassword"),
     },
     reenteredNewPassword: {
-      isValid: (r, v) => (v !== '' && v === r.getFieldValue('newPassword')),
+      isValid: (r, v) => v !== "" && v === r.getBindingValue("newPassword"),
     },
     submit: {
-      isDisabled: (r) => (!r.allValid),
-      noValue: true
-    }
+      isDisabled: (r) => !r.allValid,
+      noValue: true,
+    },
   }
 
   constructor(props) {
     super(props)
     this.state = {
-      binder: new FormBinder({}, ChangePasswordModal.bindings)
+      binder: new FormBinder({}, ChangePasswordModal.bindings),
     }
   }
 
@@ -53,8 +53,8 @@ export class ChangePasswordModal extends React.Component {
     const { binder } = this.state
 
     if (binder.allValid) {
-      const oldPassword = binder.getFieldValue('oldPassword')
-      const newPassword = binder.getFieldValue('newPassword')
+      const oldPassword = binder.getBindingValue("oldPassword")
+      const newPassword = binder.getBindingValue("newPassword")
       passwords = { oldPassword, newPassword }
     }
     this.close(passwords)
@@ -70,32 +70,44 @@ export class ChangePasswordModal extends React.Component {
 
     return (
       <Modal open={this.props.open} width={sizeInfo.modalWidth}>
-        <form id='changePasswordForm' onSubmit={this.handleSubmit}>
+        <form id="changePasswordForm" onSubmit={this.handleSubmit}>
           <Row>
             <Row.Item width={sizeInfo.formRowSpacing} />
             <Row.Item grow>
               <Column>
                 <Column.Item height={sizeInfo.formColumnSpacing} />
-                <Column.Item color='black' icon='edit'>
-                  <Text size='large'>Change Password</Text>
+                <Column.Item color="black" icon="edit">
+                  <Text size="large">Change Password</Text>
                 </Column.Item>
                 <Column.Item height={sizeInfo.formColumnSpacing} />
                 <Column.Item>
                   <Column>
                     <Column.Item>
-                      <BoundInput label='Current Password' password name='oldPassword'
-                        message='Your existing password, cannot be blank'
-                        binder={binder} />
+                      <BoundInput
+                        label="Current Password"
+                        password
+                        name="oldPassword"
+                        message="Your existing password, cannot be blank"
+                        binder={binder}
+                      />
                     </Column.Item>
                     <Column.Item>
-                      <BoundInput label='New Password' password name='newPassword'
-                        message='A new password, cannot be blank or the same as your old password'
-                        binder={binder} />
+                      <BoundInput
+                        label="New Password"
+                        password
+                        name="newPassword"
+                        message="A new password, cannot be blank or the same as your old password"
+                        binder={binder}
+                      />
                     </Column.Item>
                     <Column.Item>
-                      <BoundInput label='Re-entered New Password' password name='reenteredNewPassword'
-                        message='The new password again, must match and cannot be blank'
-                        binder={binder} />
+                      <BoundInput
+                        label="Re-entered New Password"
+                        password
+                        name="reenteredNewPassword"
+                        message="The new password again, must match and cannot be blank"
+                        binder={binder}
+                      />
                     </Column.Item>
                   </Column>
                 </Column.Item>
@@ -104,11 +116,16 @@ export class ChangePasswordModal extends React.Component {
                   <Row>
                     <Row.Item grow />
                     <Row.Item>
-                      <Button onClick={this.handleClick} text='Cancel' />
+                      <Button onClick={this.handleClick} text="Cancel" />
                     </Row.Item>
                     <Row.Item width={sizeInfo.formRowSpacing} />
                     <Row.Item>
-                      <BoundButton text='Submit' submit='changePasswordForm' name='submit' binder={binder} />
+                      <BoundButton
+                        text="Submit"
+                        submit="changePasswordForm"
+                        name="submit"
+                        binder={binder}
+                      />
                     </Row.Item>
                   </Row>
                 </Column.Item>
diff --git a/website/src/Profile/ProfileForm.js b/website/src/Profile/ProfileForm.js
index 1e08a11..27e7c6e 100644
--- a/website/src/Profile/ProfileForm.js
+++ b/website/src/Profile/ProfileForm.js
@@ -1,9 +1,9 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Column, Row, Box, Button, BoundInput, BoundButton } from 'ui'
-import { sizeInfo, colorInfo } from 'ui/style'
-import { FormBinder } from 'react-form-binder'
-import autobind from 'autobind-decorator'
+import React from "react"
+import PropTypes from "prop-types"
+import { Column, Row, Box, Button, BoundInput, BoundButton } from "ui"
+import { sizeInfo, colorInfo } from "ui/style"
+import { FormBinder } from "react-form-binder"
+import autobind from "autobind-decorator"
 
 export class ProfileForm extends React.Component {
   static propTypes = {
@@ -11,31 +11,34 @@ export class ProfileForm extends React.Component {
     onSaved: PropTypes.func.isRequired,
     onModifiedChanged: PropTypes.func,
     onChangePassword: PropTypes.func,
-    onChangeEmail: PropTypes.func
+    onChangeEmail: PropTypes.func,
   }
 
   static bindings = {
     email: {
-      isValid: (r, v) => (v !== ''),
-      isDisabled: (r) => (!!r._id)
+      isValid: (r, v) => v !== "",
+      isDisabled: (r) => !!r._id,
     },
     firstName: {
-      isValid: (r, v) => (v !== '')
+      isValid: (r, v) => v !== "",
     },
     lastName: {
-      isValid: (r, v) => (v !== '')
+      isValid: (r, v) => v !== "",
     },
     save: {
       noValue: true,
-      isDisabled: (r) => (!r.anyModified || !r.allValid)
-    }
+      isDisabled: (r) => !r.anyModified || !r.allValid,
+    },
   }
 
   constructor(props) {
     super(props)
     this.state = {
       binder: new FormBinder(
-        this.props.user, ProfileForm.bindings, this.props.onModifiedChanged)
+        this.props.user,
+        ProfileForm.bindings,
+        this.props.onModifiedChanged
+      ),
     }
   }
 
@@ -43,7 +46,10 @@ export class ProfileForm extends React.Component {
     if (nextProps.user !== this.props.user) {
       this.setState({
         binder: new FormBinder(
-          nextProps.user, ProfileForm.bindings, nextProps.onModifiedChanged)
+          nextProps.user,
+          ProfileForm.bindings,
+          nextProps.onModifiedChanged
+        ),
       })
     }
   }
@@ -61,15 +67,19 @@ export class ProfileForm extends React.Component {
 
   @autobind
   handleChangeEmail() {
-    this.props.onChangeEmail(this.state.binder.getFieldValue('email'))
+    this.props.onChangeEmail(this.state.binder.getBindingValue("email"))
   }
 
   render() {
     const { binder } = this.state
 
     return (
-      <form onSubmit={this.handleSubmit} id='profileForm'>
-        <Box border={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }}
+      <form onSubmit={this.handleSubmit} id="profileForm">
+        <Box
+          border={{
+            width: sizeInfo.headerBorderWidth,
+            color: colorInfo.headerBorder,
+          }}
           radius={sizeInfo.formBoxRadius}>
           <Row>
             <Row.Item width={sizeInfo.formRowSpacing} />
@@ -77,34 +87,58 @@ export class ProfileForm extends React.Component {
               <Column>
                 <Column.Item height={sizeInfo.formColumnSpacing} />
                 <Column.Item>
-                  <BoundInput label='First Name' name='firstName'
-                    message='First name is required' binder={binder} />
+                  <BoundInput
+                    label="First Name"
+                    name="firstName"
+                    message="First name is required"
+                    binder={binder}
+                  />
                 </Column.Item>
                 <Column.Item>
-                  <BoundInput label='Last Name' name='lastName'
-                    binder={binder} />
+                  <BoundInput
+                    label="Last Name"
+                    name="lastName"
+                    binder={binder}
+                  />
                 </Column.Item>
                 <Column.Item>
-                  <BoundInput label='Email' name='email'
-                    message='Required. Must be a valid email address.'
-                    binder={binder} />
+                  <BoundInput
+                    label="Email"
+                    name="email"
+                    message="Required. Must be a valid email address."
+                    binder={binder}
+                  />
                 </Column.Item>
                 <Column.Item height={sizeInfo.formColumnSpacing} />
                 <Column.Item height={sizeInfo.buttonHeight}>
                   <Row>
                     <Row.Item>
-                      <Button text={'Change Email'} label='&nbsp;'
-                        width={sizeInfo.buttonWideWidth} onClick={this.handleChangeEmail} />
+                      <Button
+                        text={"Change Email"}
+                        label="&nbsp;"
+                        width={sizeInfo.buttonWideWidth}
+                        onClick={this.handleChangeEmail}
+                      />
                     </Row.Item>
                     <Row.Item width={sizeInfo.formRowSpacing} />
                     <Row.Item>
-                      <Button text={'Change Password'} label='&nbsp;'
-                        width={sizeInfo.buttonWideWidth} onClick={this.props.onChangePassword} />
+                      <Button
+                        text={"Change Password"}
+                        label="&nbsp;"
+                        width={sizeInfo.buttonWideWidth}
+                        onClick={this.props.onChangePassword}
+                      />
                     </Row.Item>
                     <Row.Item grow />
                     <Row.Item>
-                      <BoundButton submit='profileForm' size='medium' text='Save' label='&nbsp;' name='save'
-                        binder={binder} />
+                      <BoundButton
+                        submit="profileForm"
+                        size="medium"
+                        text="Save"
+                        label="&nbsp;"
+                        name="save"
+                        binder={binder}
+                      />
                     </Row.Item>
                   </Row>
                 </Column.Item>
diff --git a/website/src/Teams/TeamForm.js b/website/src/Teams/TeamForm.js
index c9f945e..8b95ffd 100644
--- a/website/src/Teams/TeamForm.js
+++ b/website/src/Teams/TeamForm.js
@@ -93,7 +93,7 @@ export class TeamForm extends React.Component {
   handleSubmit(e) {
     e.preventDefault()
 
-    let obj = this.state.binder.getModifiedFieldValues()
+    let obj = this.state.binder.getmodifiedBindingValues()
 
     if (obj) {
       this.props.onSave(obj)
diff --git a/website/src/Users/UserForm.js b/website/src/Users/UserForm.js
index a16d029..0708ec5 100644
--- a/website/src/Users/UserForm.js
+++ b/website/src/Users/UserForm.js
@@ -45,7 +45,7 @@ export class UserForm extends React.Component {
     },
     resendEmail: {
       noValue: true,
-      isDisabled: (r) => !r._id || !!r.getFieldValue("emailValidated"),
+      isDisabled: (r) => !r._id || !!r.getBindingValue("emailValidated"),
     },
     firstName: {
       isValid: (r, v) => v !== "",
@@ -128,7 +128,7 @@ export class UserForm extends React.Component {
   handleSubmit(e) {
     e.preventDefault()
 
-    let obj = this.state.binder.getModifiedFieldValues()
+    let obj = this.state.binder.getmodifiedBindingValues()
 
     if (obj) {
       this.props.onSave(obj)
diff --git a/website/src/ui/BoundButton.js b/website/src/ui/BoundButton.js
index 5e76867..67606c9 100644
--- a/website/src/ui/BoundButton.js
+++ b/website/src/ui/BoundButton.js
@@ -1,7 +1,7 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Button } from 'ui'
-import autobind from 'autobind-decorator'
+import React from "react"
+import PropTypes from "prop-types"
+import { Button } from "ui"
+import autobind from "autobind-decorator"
 
 export class BoundButton extends React.Component {
   static propTypes = {
@@ -10,14 +10,14 @@ export class BoundButton extends React.Component {
     binder: PropTypes.object.isRequired,
     submit: PropTypes.string,
     onClick: PropTypes.func,
-    width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
+    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   }
 
   constructor(props) {
     super(props)
     let { name, binder } = this.props
     binder.addListener(name, this.updateValue)
-    this.state = binder.getFieldState(name)
+    this.state = binder.getBindingState(name)
   }
 
   @autobind
@@ -33,7 +33,7 @@ export class BoundButton extends React.Component {
     if (nextProps.binder !== this.props.binder) {
       this.props.binder.removeListener(this.props.name, this.updateValue)
       nextProps.binder.addListener(nextProps.name, this.updateValue)
-      this.setState(nextProps.binder.getFieldState(nextProps.name))
+      this.setState(nextProps.binder.getBindingState(nextProps.name))
     }
   }
 
@@ -46,8 +46,14 @@ export class BoundButton extends React.Component {
     }
 
     return (
-      <Button disabled={disabled} submit={submit} onClick={onClick}
-        name={name} text={text} width={width} />
+      <Button
+        disabled={disabled}
+        submit={submit}
+        onClick={onClick}
+        name={name}
+        text={text}
+        width={width}
+      />
     )
   }
 }
diff --git a/website/src/ui/BoundCheckbox.js b/website/src/ui/BoundCheckbox.js
index 0c9a087..78d06ff 100644
--- a/website/src/ui/BoundCheckbox.js
+++ b/website/src/ui/BoundCheckbox.js
@@ -1,8 +1,8 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Checkbox } from 'ui'
-import autobind from 'autobind-decorator'
-import { fontInfo } from 'ui/style'
+import React from "react"
+import PropTypes from "prop-types"
+import { Checkbox } from "ui"
+import autobind from "autobind-decorator"
+import { fontInfo } from "ui/style"
 
 export class BoundCheckbox extends React.Component {
   static propTypes = {
@@ -13,22 +13,22 @@ export class BoundCheckbox extends React.Component {
 
   constructor(props) {
     super(props)
-    this.state = props.binder.getFieldState(props.name)
+    this.state = props.binder.getBindingState(props.name)
   }
 
   @autobind
   handleChange(e, data) {
     const { binder, name } = this.props
-    const state = binder.getFieldState(name)
+    const state = binder.getBindingState(name)
 
     if (!state.readOnly && !state.disabled) {
-      this.setState(binder.updateFieldValue(name, data.checked))
+      this.setState(binder.updateBindingValue(name, data.checked))
     }
   }
 
   componentWillReceiveProps(nextProps) {
     if (nextProps.binder !== this.props.binder) {
-      this.setState(nextProps.binder.getFieldState(nextProps.name))
+      this.setState(nextProps.binder.getBindingState(nextProps.name))
     }
   }
 
@@ -42,12 +42,17 @@ export class BoundCheckbox extends React.Component {
 
     return (
       <div>
-        <Checkbox id={name} disabled={disabled} value={value} onChange={this.handleChange} />
+        <Checkbox
+          id={name}
+          disabled={disabled}
+          value={value}
+          onChange={this.handleChange}
+        />
         <label
           htmlFor={name}
           style={{
             marginLeft: 10,
-            verticalAlign: 'top',
+            verticalAlign: "top",
             fontSize: fontInfo.size.medium,
             fontFamily: fontInfo.family,
             color: disabled ? fontInfo.color.dimmed : fontInfo.color.normal,
diff --git a/website/src/ui/BoundDropdown.js b/website/src/ui/BoundDropdown.js
index 36fee39..c0f76aa 100644
--- a/website/src/ui/BoundDropdown.js
+++ b/website/src/ui/BoundDropdown.js
@@ -1,36 +1,42 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Dropdown } from 'ui'
-import autobind from 'autobind-decorator'
-import { sizeInfo, fontInfo } from 'ui/style'
+import React from "react"
+import PropTypes from "prop-types"
+import { Dropdown } from "ui"
+import autobind from "autobind-decorator"
+import { sizeInfo, fontInfo } from "ui/style"
 
 export class BoundDropdown extends React.Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
     label: PropTypes.string,
     binder: PropTypes.object.isRequired,
-    items: PropTypes.arrayOf(PropTypes.shape({ value: PropTypes.string, text: PropTypes.string, icon: PropTypes.string })),
+    items: PropTypes.arrayOf(
+      PropTypes.shape({
+        value: PropTypes.string,
+        text: PropTypes.string,
+        icon: PropTypes.string,
+      })
+    ),
     icon: PropTypes.string,
   }
 
   constructor(props) {
     super(props)
-    this.state = props.binder.getFieldState(props.name)
+    this.state = props.binder.getBindingState(props.name)
   }
 
   @autobind
   handleChange(item) {
     const { binder, name } = this.props
-    const state = binder.getFieldState(name)
+    const state = binder.getBindingState(name)
 
     if (!state.readOnly && !state.disabled) {
-      this.setState(binder.updateFieldValue(name, item.value))
+      this.setState(binder.updateBindingValue(name, item.value))
     }
   }
 
   componentWillReceiveProps(nextProps) {
     if (nextProps.binder !== this.props.binder) {
-      this.setState(nextProps.binder.getFieldState(nextProps.name))
+      this.setState(nextProps.binder.getBindingState(nextProps.name))
     }
 
     if (nextProps.items !== this.props.items) {
@@ -59,15 +65,19 @@ export class BoundDropdown extends React.Component {
           <Dropdown
             items={items}
             value={value}
-            emptyItem={{ value: null, text: '', icon: 'team' }}
+            emptyItem={{ value: null, text: "", icon: "team" }}
             icon={icon}
             onChange={this.handleChange}
             render={(item) => (
               <Dropdown.Item key={item.value}>
-                <Dropdown.Icon name={item.icon} size={sizeInfo.dropdownIconSize} />
+                <Dropdown.Icon
+                  name={item.icon}
+                  size={sizeInfo.dropdownIconSize}
+                />
                 <Dropdown.Text>{item.text}</Dropdown.Text>
               </Dropdown.Item>
-            )} />
+            )}
+          />
         </label>
       </div>
     )
diff --git a/website/src/ui/BoundEmailIcon.js b/website/src/ui/BoundEmailIcon.js
index 016af50..23226b2 100644
--- a/website/src/ui/BoundEmailIcon.js
+++ b/website/src/ui/BoundEmailIcon.js
@@ -11,12 +11,12 @@ export class BoundEmailIcon extends React.Component {
 
   constructor(props) {
     super(props)
-    this.state = props.binder.getFieldState(props.name)
+    this.state = props.binder.getBindingState(props.name)
   }
 
   componentWillReceiveProps(nextProps) {
     if (nextProps.binder !== this.props.binder) {
-      this.setState(nextProps.binder.getFieldState(nextProps.name))
+      this.setState(nextProps.binder.getBindingState(nextProps.name))
     }
   }
 
diff --git a/website/src/ui/BoundInput.js b/website/src/ui/BoundInput.js
index 167957a..d0b48bd 100644
--- a/website/src/ui/BoundInput.js
+++ b/website/src/ui/BoundInput.js
@@ -15,22 +15,22 @@ export class BoundInput extends React.Component {
 
   constructor(props) {
     super(props)
-    this.state = props.binder.getFieldState(props.name)
+    this.state = props.binder.getBindingState(props.name)
   }
 
   @autobind
   handleChange(newValue) {
     const { binder, name } = this.props
-    const state = binder.getFieldState(name)
+    const state = binder.getBindingState(name)
 
     if (!state.readOnly && !state.disabled) {
-      this.setState(binder.updateFieldValue(name, newValue))
+      this.setState(binder.updateBindingValue(name, newValue))
     }
   }
 
   componentWillReceiveProps(nextProps) {
     if (nextProps.binder !== this.props.binder) {
-      this.setState(nextProps.binder.getFieldState(nextProps.name))
+      this.setState(nextProps.binder.getBindingState(nextProps.name))
     }
   }