diff --git a/src/components/views/auth/PasswordLogin.js b/src/components/views/auth/PasswordLogin.js
index 4b095d405f..ed3afede2f 100644
--- a/src/components/views/auth/PasswordLogin.js
+++ b/src/components/views/auth/PasswordLogin.js
@@ -70,11 +70,6 @@ class PasswordLogin extends React.Component {
         this.isLoginEmpty = this.isLoginEmpty.bind(this);
     }
 
-    componentWillMount() {
-        this._passwordField = null;
-        this._loginField = null;
-    }
-
     onForgotPasswordClick(ev) {
         ev.preventDefault();
         ev.stopPropagation();
@@ -180,7 +175,6 @@ class PasswordLogin extends React.Component {
                 return <Field
                     className={classNames(classes)}
                     id="mx_PasswordLogin_email"
-                    ref={(e) => { this._loginField = e; }}
                     name="username" // make it a little easier for browser's remember-password
                     key="email_input"
                     type="text"
@@ -196,7 +190,6 @@ class PasswordLogin extends React.Component {
                 return <Field
                     className={classNames(classes)}
                     id="mx_PasswordLogin_username"
-                    ref={(e) => { this._loginField = e; }}
                     name="username" // make it a little easier for browser's remember-password
                     key="username_input"
                     type="text"
@@ -223,7 +216,6 @@ class PasswordLogin extends React.Component {
                 return <Field
                     className={classNames(classes)}
                     id="mx_PasswordLogin_phoneNumber"
-                    ref={(e) => { this._loginField = e; }}
                     name="phoneNumber"
                     key="phone_input"
                     type="text"
@@ -344,7 +336,6 @@ class PasswordLogin extends React.Component {
                     <Field
                         className={pwFieldClass}
                         id="mx_PasswordLogin_password"
-                        ref={(e) => { this._passwordField = e; }}
                         type="password"
                         name="password"
                         label={_t('Password')}
diff --git a/src/components/views/elements/Field.js b/src/components/views/elements/Field.js
index 36f6f02ff2..cd06610c62 100644
--- a/src/components/views/elements/Field.js
+++ b/src/components/views/elements/Field.js
@@ -32,6 +32,9 @@ export default class Field extends React.PureComponent {
         label: PropTypes.string,
         // The field's placeholder string. Defaults to the label.
         placeholder: PropTypes.string,
+        // The field's value.
+        // This is a controlled component, so the value is required.
+        value: PropTypes.string.isRequired,
         // Optional component to include inside the field before the input.
         prefix: PropTypes.node,
         // The callback called whenever the contents of the field
@@ -50,6 +53,7 @@ export default class Field extends React.PureComponent {
         };
     }
 
+    /* TODO: Remove me */
     get value() {
         if (!this.refs.fieldInput) return null;
         return this.refs.fieldInput.value;
@@ -87,6 +91,8 @@ export default class Field extends React.PureComponent {
         inputProps.placeholder = inputProps.placeholder || inputProps.label;
 
         inputProps.onChange = this.onChange;
+
+        /* TODO: Remove me */
         // make sure we use the current `value` for the field and not the original one
         if (inputProps.value === undefined) {
             inputProps.value = this.value || "";
diff --git a/src/components/views/settings/ChangePassword.js b/src/components/views/settings/ChangePassword.js
index 69b80b03b3..ba708beaf4 100644
--- a/src/components/views/settings/ChangePassword.js
+++ b/src/components/views/settings/ChangePassword.js
@@ -32,6 +32,7 @@ import sessionStore from '../../../stores/SessionStore';
 
 module.exports = React.createClass({
     displayName: 'ChangePassword',
+
     propTypes: {
         onFinished: PropTypes.func,
         onError: PropTypes.func,
@@ -73,6 +74,9 @@ module.exports = React.createClass({
         return {
             phase: this.Phases.Edit,
             cachedPassword: null,
+            oldPassword: "",
+            newPassword: "",
+            newPasswordConfirm: "",
         };
     },
 
@@ -165,6 +169,9 @@ module.exports = React.createClass({
         }).finally(() => {
             this.setState({
                 phase: this.Phases.Edit,
+                oldPassword: "",
+                newPassword: "",
+                newPasswordConfirm: "",
             });
         }).done();
     },
@@ -192,11 +199,29 @@ module.exports = React.createClass({
         );
     },
 
+    onChangeOldPassword(ev) {
+        this.setState({
+            oldPassword: ev.target.value,
+        });
+    },
+
+    onChangeNewPassword(ev) {
+        this.setState({
+            newPassword: ev.target.value,
+        });
+    },
+
+    onChangeNewPasswordConfirm(ev) {
+        this.setState({
+            newPasswordConfirm: ev.target.value,
+        });
+    },
+
     onClickChange: function(ev) {
         ev.preventDefault();
-        const oldPassword = this.state.cachedPassword || this.refs.old_input.value;
-        const newPassword = this.refs.new_input.value;
-        const confirmPassword = this.refs.confirm_input.value;
+        const oldPassword = this.state.cachedPassword || this.state.oldPassword;
+        const newPassword = this.state.newPassword;
+        const confirmPassword = this.state.newPasswordConfirm;
         const err = this.props.onCheckPassword(
             oldPassword, newPassword, confirmPassword,
         );
@@ -217,7 +242,12 @@ module.exports = React.createClass({
         if (!this.state.cachedPassword) {
             currentPassword = (
                 <div className={rowClassName}>
-                    <Field id="passwordold" type="password" ref="old_input" label={_t('Current password')} />
+                    <Field id="mx_ChangePassword_oldPassword"
+                        type="password"
+                        label={_t('Current password')}
+                        value={this.state.oldPassword}
+                        onChange={this.onChangeOldPassword}
+                    />
                 </div>
             );
         }
@@ -230,11 +260,21 @@ module.exports = React.createClass({
                     <form className={this.props.className} onSubmit={this.onClickChange}>
                         { currentPassword }
                         <div className={rowClassName}>
-                            <Field id="password1" type="password" ref="new_input" label={passwordLabel}
-                                   autoFocus={this.props.autoFocusNewPasswordInput} />
+                            <Field id="mx_ChangePassword_newPassword"
+                                type="password"
+                                label={passwordLabel}
+                                value={this.state.newPassword}
+                                autoFocus={this.props.autoFocusNewPasswordInput}
+                                onChange={this.onChangeNewPassword}
+                            />
                         </div>
                         <div className={rowClassName}>
-                            <Field id="password2" type="password" ref="confirm_input" label={_t("Confirm password")} />
+                            <Field id="mx_ChangePassword_newPasswordConfirm"
+                                type="password"
+                                label={_t("Confirm password")}
+                                value={this.state.newPasswordConfirm}
+                                onChange={this.onChangeNewPasswordConfirm}
+                            />
                         </div>
                         <AccessibleButton className={buttonClassName} kind={this.props.buttonKind} onClick={this.onClickChange}>
                             { _t('Change Password') }
diff --git a/src/components/views/settings/EmailAddresses.js b/src/components/views/settings/EmailAddresses.js
index 1ded71a5c7..b221f91901 100644
--- a/src/components/views/settings/EmailAddresses.js
+++ b/src/components/views/settings/EmailAddresses.js
@@ -119,6 +119,7 @@ export default class EmailAddresses extends React.Component {
             verifying: false,
             addTask: null,
             continueDisabled: false,
+            newEmailAddress: "",
         };
     }
 
@@ -134,14 +135,20 @@ export default class EmailAddresses extends React.Component {
         this.setState({emails: this.state.emails.filter((e) => e !== address)});
     };
 
+    _onChangeNewEmailAddress = (e) => {
+        this.setState({
+            newEmailAddress: e.target.value,
+        });
+    };
+
     _onAddClick = (e) => {
         e.stopPropagation();
         e.preventDefault();
 
-        if (!this.refs.newEmailAddress) return;
+        if (!this.state.newEmailAddress) return;
 
         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-        const email = this.refs.newEmailAddress.value;
+        const email = this.state.newEmailAddress;
 
         // TODO: Inline field validation
         if (!Email.looksValid(email)) {
@@ -173,14 +180,14 @@ export default class EmailAddresses extends React.Component {
 
         this.setState({continueDisabled: true});
         this.state.addTask.checkEmailLinkClicked().then(() => {
-            const email = this.refs.newEmailAddress.value;
+            const email = this.state.newEmailAddress;
             this.setState({
                 emails: [...this.state.emails, {address: email, medium: "email"}],
                 addTask: null,
                 continueDisabled: false,
                 verifying: false,
+                newEmailAddress: "",
             });
-            this.refs.newEmailAddress.value = "";
         }).catch((err) => {
             this.setState({continueDisabled: false});
             if (err.errcode !== 'M_THREEPID_AUTH_FAILED') {
@@ -221,8 +228,14 @@ export default class EmailAddresses extends React.Component {
                 {existingEmailElements}
                 <form onSubmit={this._onAddClick} autoComplete={false}
                       noValidate={true} className="mx_EmailAddresses_new">
-                    <Field id="newEmailAddress" ref="newEmailAddress" label={_t("Email Address")}
-                           type="text" autoComplete="off" disabled={this.state.verifying} />
+                    <Field id="mx_EmailAddressses_newEmailAddress"
+                        type="text"
+                        label={_t("Email Address")}
+                        autoComplete="off"
+                        disabled={this.state.verifying}
+                        value={this.state.newEmailAddress}
+                        onChange={this._onChangeNewEmailAddress}
+                    />
                     {addButton}
                 </form>
             </div>
diff --git a/src/components/views/settings/PhoneNumbers.js b/src/components/views/settings/PhoneNumbers.js
index b809240956..5d1d9b849f 100644
--- a/src/components/views/settings/PhoneNumbers.js
+++ b/src/components/views/settings/PhoneNumbers.js
@@ -117,6 +117,8 @@ export default class PhoneNumbers extends React.Component {
             addTask: null,
             continueDisabled: false,
             phoneCountry: "",
+            newPhoneNumber: "",
+            newPhoneNumberCode: "",
         };
     }
 
@@ -132,14 +134,26 @@ export default class PhoneNumbers extends React.Component {
         this.setState({msisdns: this.state.msisdns.filter((e) => e !== address)});
     };
 
+    _onChangeNewPhoneNumber = (e) => {
+        this.setState({
+            newPhoneNumber: e.target.value,
+        });
+    };
+
+    _onChangeNewPhoneNumberCode = (e) => {
+        this.setState({
+            newPhoneNumberCode: e.target.value,
+        });
+    };
+
     _onAddClick = (e) => {
         e.stopPropagation();
         e.preventDefault();
 
-        if (!this.refs.newPhoneNumber) return;
+        if (!this.state.newPhoneNumber) return;
 
         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-        const phoneNumber = this.refs.newPhoneNumber.value;
+        const phoneNumber = this.state.newPhoneNumber;
         const phoneCountry = this.state.phoneCountry;
 
         const task = new AddThreepid();
@@ -162,7 +176,7 @@ export default class PhoneNumbers extends React.Component {
         e.preventDefault();
 
         this.setState({continueDisabled: true});
-        const token = this.refs.newPhoneNumberCode.value;
+        const token = this.state.newPhoneNumberCode;
         this.state.addTask.haveMsisdnToken(token).then(() => {
             this.setState({
                 msisdns: [...this.state.msisdns, {address: this.state.verifyMsisdn, medium: "msisdn"}],
@@ -171,8 +185,9 @@ export default class PhoneNumbers extends React.Component {
                 verifying: false,
                 verifyMsisdn: "",
                 verifyError: null,
+                newPhoneNumber: "",
+                newPhoneNumberCode: "",
             });
-            this.refs.newPhoneNumber.value = "";
         }).catch((err) => {
             this.setState({continueDisabled: false});
             if (err.errcode !== 'M_THREEPID_AUTH_FAILED') {
@@ -213,8 +228,14 @@ export default class PhoneNumbers extends React.Component {
                         {this.state.verifyError}
                     </div>
                     <form onSubmit={this._onContinueClick} autoComplete={false} noValidate={true}>
-                        <Field id="newPhoneNumberCode" ref="newPhoneNumberCode" label={_t("Verification code")}
-                               type="text" autoComplete="off" disabled={this.state.continueDisabled} />
+                        <Field id="mx_PhoneNumbers_newPhoneNumberCode"
+                            type="text"
+                            label={_t("Verification code")}
+                            autoComplete="off"
+                            disabled={this.state.continueDisabled}
+                            value={this.state.newPhoneNumberCode}
+                            onChange={this._onChangeNewPhoneNumberCode}
+                        />
                         <AccessibleButton onClick={this._onContinueClick} kind="primary"
                                           disabled={this.state.continueDisabled}>
                             {_t("Continue")}
@@ -238,9 +259,15 @@ export default class PhoneNumbers extends React.Component {
                 <form onSubmit={this._onAddClick} autoComplete={false}
                       noValidate={true} className="mx_PhoneNumbers_new">
                     <div className="mx_PhoneNumbers_input">
-                        <Field id="newPhoneNumber" ref="newPhoneNumber" label={_t("Phone Number")}
-                               type="text" autoComplete="off" disabled={this.state.verifying}
-                               prefix={phoneCountry} />
+                        <Field id="mx_PhoneNumbers_newPhoneNumber"
+                            type="text"
+                            label={_t("Phone Number")}
+                            autoComplete="off"
+                            disabled={this.state.verifying}
+                            prefix={phoneCountry}
+                            value={this.state.newPhoneNumber}
+                            onChange={this._onChangeNewPhoneNumber}
+                        />
                     </div>
                     {addVerifySection}
                 </form>