diff --git a/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.js b/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.js
index 371fdcaf64..3d7249b5a1 100644
--- a/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.js
+++ b/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.js
@@ -168,7 +168,6 @@ export default class ManageEventIndexDialog extends React.Component {
                         totalRooms: formatCountLong(this.state.roomCount),
                     })} <br />
                     <Field
-                        id={"crawlerSleepTimeMs"}
                         label={_t('Message downloading sleep time(ms)')}
                         type='number'
                         value={this.state.crawlerSleepTime}
diff --git a/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js b/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js
index 35529fbc5b..78e750b817 100644
--- a/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js
+++ b/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js
@@ -412,7 +412,6 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                 <div>{_t("Enter your account password to confirm the upgrade:")}</div>
                 <div><Field
                     type="password"
-                    id="mx_CreateSecretStorage_accountPassword"
                     label={_t("Password")}
                     value={this.state.accountPassword}
                     onChange={this._onAccountPasswordChange}
@@ -497,7 +496,6 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
             <div className="mx_CreateSecretStorageDialog_passPhraseContainer">
                 <Field
                     type="password"
-                    id="mx_CreateSecretStorageDialog_passPhraseField"
                     className="mx_CreateSecretStorageDialog_passPhraseField"
                     onChange={this._onPassPhraseChange}
                     value={this.state.passPhrase}
@@ -574,7 +572,6 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
             <div className="mx_CreateSecretStorageDialog_passPhraseContainer">
                 <Field
                     type="password"
-                    id="mx_CreateSecretStorageDialog_passPhraseField"
                     onChange={this._onPassPhraseConfirmChange}
                     value={this.state.passPhraseConfirm}
                     className="mx_CreateSecretStorageDialog_passPhraseField"
diff --git a/src/components/structures/auth/ForgotPassword.js b/src/components/structures/auth/ForgotPassword.js
index e921951512..c849edf260 100644
--- a/src/components/structures/auth/ForgotPassword.js
+++ b/src/components/structures/auth/ForgotPassword.js
@@ -296,7 +296,6 @@ export default createReactClass({
             <form onSubmit={this.onSubmitForm}>
                 <div className="mx_AuthBody_fieldRow">
                     <Field
-                        id="mx_ForgotPassword_email"
                         name="reset_email" // define a name so browser's password autofill gets less confused
                         type="text"
                         label={_t('Email')}
@@ -307,7 +306,6 @@ export default createReactClass({
                 </div>
                 <div className="mx_AuthBody_fieldRow">
                     <Field
-                        id="mx_ForgotPassword_password"
                         name="reset_password"
                         type="password"
                         label={_t('Password')}
@@ -315,7 +313,6 @@ export default createReactClass({
                         onChange={this.onInputChanged.bind(this, "password")}
                     />
                     <Field
-                        id="mx_ForgotPassword_passwordConfirm"
                         name="reset_password_confirm"
                         type="password"
                         label={_t('Confirm')}
diff --git a/src/components/structures/auth/SoftLogout.js b/src/components/structures/auth/SoftLogout.js
index d38fcf3883..287f7e5605 100644
--- a/src/components/structures/auth/SoftLogout.js
+++ b/src/components/structures/auth/SoftLogout.js
@@ -213,7 +213,6 @@ export default class SoftLogout extends React.Component {
                     <p>{introText}</p>
                     {error}
                     <Field
-                        id="softlogout_password"
                         type="password"
                         label={_t("Password")}
                         onChange={this.onPasswordChange}
diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.js b/src/components/views/auth/InteractiveAuthEntryComponents.js
index aaf8c88440..e731b4cc01 100644
--- a/src/components/views/auth/InteractiveAuthEntryComponents.js
+++ b/src/components/views/auth/InteractiveAuthEntryComponents.js
@@ -145,7 +145,6 @@ export const PasswordAuthEntry = createReactClass({
                 <p>{ _t("Confirm your identity by entering your account password below.") }</p>
                 <form onSubmit={this._onSubmit} className="mx_InteractiveAuthEntryComponents_passwordSection">
                     <Field
-                        id="mx_InteractiveAuthEntryComponents_password"
                         className={passwordBoxClass}
                         type="password"
                         name="passwordField"
diff --git a/src/components/views/auth/ModularServerConfig.js b/src/components/views/auth/ModularServerConfig.js
index d8ce145e20..1216202a23 100644
--- a/src/components/views/auth/ModularServerConfig.js
+++ b/src/components/views/auth/ModularServerConfig.js
@@ -106,7 +106,8 @@ export default class ModularServerConfig extends ServerConfig {
                 )}
                 <form onSubmit={this.onSubmit} autoComplete="off" action={null}>
                     <div className="mx_ServerConfig_fields">
-                        <Field id="mx_ServerConfig_hsUrl"
+                        <Field
+                            id="mx_ServerConfig_hsUrl"
                             label={_t("Server Name")}
                             placeholder={this.props.serverConfig.hsUrl}
                             value={this.state.hsUrl}
diff --git a/src/components/views/auth/PasswordLogin.js b/src/components/views/auth/PasswordLogin.js
index 11717fac00..e64b8360c3 100644
--- a/src/components/views/auth/PasswordLogin.js
+++ b/src/components/views/auth/PasswordLogin.js
@@ -193,7 +193,6 @@ export default class PasswordLogin extends React.Component {
                 classes.error = this.props.loginIncorrect && !this.state.username;
                 return <Field
                     className={classNames(classes)}
-                    id="mx_PasswordLogin_email"
                     name="username" // make it a little easier for browser's remember-password
                     key="email_input"
                     type="text"
@@ -209,7 +208,6 @@ export default class PasswordLogin extends React.Component {
                 classes.error = this.props.loginIncorrect && !this.state.username;
                 return <Field
                     className={classNames(classes)}
-                    id="mx_PasswordLogin_username"
                     name="username" // make it a little easier for browser's remember-password
                     key="username_input"
                     type="text"
@@ -233,7 +231,6 @@ export default class PasswordLogin extends React.Component {
 
                 return <Field
                     className={classNames(classes)}
-                    id="mx_PasswordLogin_phoneNumber"
                     name="phoneNumber"
                     key="phone_input"
                     type="text"
@@ -290,7 +287,6 @@ export default class PasswordLogin extends React.Component {
                 <div className="mx_Login_type_container">
                     <label className="mx_Login_type_label">{ _t('Sign in with') }</label>
                     <Field
-                        id="mx_PasswordLogin_type"
                         element="select"
                         value={this.state.loginType}
                         onChange={this.onLoginTypeChange}
@@ -328,7 +324,6 @@ export default class PasswordLogin extends React.Component {
                     {loginField}
                     <Field
                         className={pwFieldClass}
-                        id="mx_PasswordLogin_password"
                         type="password"
                         name="password"
                         label={_t('Password')}
diff --git a/src/components/views/auth/RegistrationForm.js b/src/components/views/auth/RegistrationForm.js
index 8ca454dabd..a89f8c6298 100644
--- a/src/components/views/auth/RegistrationForm.js
+++ b/src/components/views/auth/RegistrationForm.js
@@ -470,7 +470,6 @@ export default createReactClass({
             _t("Email") :
             _t("Email (optional)");
         return <Field
-            id="mx_RegistrationForm_email"
             ref={field => this[FIELD_EMAIL] = field}
             type="text"
             label={emailPlaceholder}
@@ -524,7 +523,6 @@ export default createReactClass({
             onOptionChange={this.onPhoneCountryChange}
         />;
         return <Field
-            id="mx_RegistrationForm_phoneNumber"
             ref={field => this[FIELD_PHONE_NUMBER] = field}
             type="text"
             label={phoneLabel}
diff --git a/src/components/views/auth/ServerConfig.js b/src/components/views/auth/ServerConfig.js
index a9e26b8fb7..37517c7484 100644
--- a/src/components/views/auth/ServerConfig.js
+++ b/src/components/views/auth/ServerConfig.js
@@ -223,7 +223,8 @@ export default class ServerConfig extends React.PureComponent {
                     {sub}
                 </a>,
             })}
-            <Field id="mx_ServerConfig_hsUrl"
+            <Field
+                id="mx_ServerConfig_hsUrl"
                 label={_t("Homeserver URL")}
                 placeholder={this.props.serverConfig.hsUrl}
                 value={this.state.hsUrl}
@@ -246,7 +247,7 @@ export default class ServerConfig extends React.PureComponent {
                     {sub}
             </a>,
             })}
-            <Field id="mx_ServerConfig_isUrl"
+            <Field
                 label={_t("Identity Server URL")}
                 placeholder={this.props.serverConfig.isUrl}
                 value={this.state.isUrl || ''}
diff --git a/src/components/views/dialogs/BugReportDialog.js b/src/components/views/dialogs/BugReportDialog.js
index fe95041373..6e337d53dc 100644
--- a/src/components/views/dialogs/BugReportDialog.js
+++ b/src/components/views/dialogs/BugReportDialog.js
@@ -166,7 +166,6 @@ export default class BugReportDialog extends React.Component {
                         ) }
                     </b></p>
                     <Field
-                        id="mx_BugReportDialog_issueUrl"
                         type="text"
                         className="mx_BugReportDialog_field_input"
                         label={_t("GitHub issue")}
@@ -175,7 +174,6 @@ export default class BugReportDialog extends React.Component {
                         placeholder="https://github.com/vector-im/riot-web/issues/..."
                     />
                     <Field
-                        id="mx_BugReportDialog_notes"
                         className="mx_BugReportDialog_field_input"
                         element="textarea"
                         label={_t("Notes")}
diff --git a/src/components/views/dialogs/CreateRoomDialog.js b/src/components/views/dialogs/CreateRoomDialog.js
index 9380226381..77014db21d 100644
--- a/src/components/views/dialogs/CreateRoomDialog.js
+++ b/src/components/views/dialogs/CreateRoomDialog.js
@@ -174,7 +174,7 @@ export default createReactClass({
             const domain = MatrixClientPeg.get().getDomain();
             aliasField = (
                 <div className="mx_CreateRoomDialog_aliasContainer">
-                    <RoomAliasField id="alias" ref={ref => this._aliasFieldRef = ref} onChange={this.onAliasChange} domain={domain} value={this.state.alias} />
+                    <RoomAliasField ref={ref => this._aliasFieldRef = ref} onChange={this.onAliasChange} domain={domain} value={this.state.alias} />
                 </div>
             );
         } else {
@@ -188,8 +188,8 @@ export default createReactClass({
             >
                 <form onSubmit={this.onOk} onKeyDown={this._onKeyDown}>
                     <div className="mx_Dialog_content">
-                        <Field id="name" ref={ref => this._nameFieldRef = ref} label={ _t('Name') } onChange={this.onNameChange} onValidate={this.onNameValidate} value={this.state.name} className="mx_CreateRoomDialog_name" />
-                        <Field id="topic" label={ _t('Topic (optional)') } onChange={this.onTopicChange} value={this.state.topic} />
+                        <Field ref={ref => this._nameFieldRef = ref} label={ _t('Name') } onChange={this.onNameChange} onValidate={this.onNameValidate} value={this.state.name} className="mx_CreateRoomDialog_name" />
+                        <Field label={ _t('Topic (optional)') } onChange={this.onTopicChange} value={this.state.topic} />
                         <LabelledToggleSwitch label={ _t("Make this room public")} onChange={this.onPublicChange} value={this.state.isPublic} />
                         { privateLabel }
                         { publicLabel }
diff --git a/src/components/views/dialogs/DeactivateAccountDialog.js b/src/components/views/dialogs/DeactivateAccountDialog.js
index d7468933df..4c14f356e4 100644
--- a/src/components/views/dialogs/DeactivateAccountDialog.js
+++ b/src/components/views/dialogs/DeactivateAccountDialog.js
@@ -174,7 +174,6 @@ export default class DeactivateAccountDialog extends React.Component {
 
                         <p>{ _t("To continue, please enter your password:") }</p>
                         <Field
-                            id="mx_DeactivateAccountDialog_password"
                             type="password"
                             label={_t('Password')}
                             onChange={this._onPasswordFieldChange}
diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js
index 348965582b..0f3fa8f5b5 100644
--- a/src/components/views/dialogs/DevtoolsDialog.js
+++ b/src/components/views/dialogs/DevtoolsDialog.js
@@ -302,7 +302,7 @@ class FilteredList extends React.PureComponent {
     render() {
         const TruncatedList = sdk.getComponent("elements.TruncatedList");
         return <div>
-            <Field id="DevtoolsDialog_FilteredList_filter" label={_t('Filter results')} autoFocus={true} size={64}
+            <Field label={_t('Filter results')} autoFocus={true} size={64}
                    type="text" autoComplete="off" value={this.props.query} onChange={this.onQuery}
                    className="mx_TextInputDialog_input mx_DevTools_RoomStateExplorer_query"
                    // force re-render so that autoFocus is applied when this component is re-used
diff --git a/src/components/views/dialogs/ReportEventDialog.js b/src/components/views/dialogs/ReportEventDialog.js
index 99853582dd..f5509dec4d 100644
--- a/src/components/views/dialogs/ReportEventDialog.js
+++ b/src/components/views/dialogs/ReportEventDialog.js
@@ -123,7 +123,6 @@ export default class ReportEventDialog extends PureComponent {
                     </p>
                     {adminMessage}
                     <Field
-                        id="mx_ReportEventDialog_reason"
                         className="mx_ReportEventDialog_reason"
                         element="textarea"
                         label={_t("Reason")}
diff --git a/src/components/views/dialogs/TextInputDialog.js b/src/components/views/dialogs/TextInputDialog.js
index b9f6f6ebce..b6b29f4350 100644
--- a/src/components/views/dialogs/TextInputDialog.js
+++ b/src/components/views/dialogs/TextInputDialog.js
@@ -116,7 +116,6 @@ export default createReactClass({
                         </div>
                         <div>
                             <Field
-                                id="mx_TextInputDialog_field"
                                 className="mx_TextInputDialog_input"
                                 ref={this._field}
                                 type="text"
diff --git a/src/components/views/elements/EditableItemList.js b/src/components/views/elements/EditableItemList.js
index 6e649e777a..50d5a3d10f 100644
--- a/src/components/views/elements/EditableItemList.js
+++ b/src/components/views/elements/EditableItemList.js
@@ -121,7 +121,7 @@ export default class EditableItemList extends React.Component {
         return (
             <form onSubmit={this._onItemAdded} autoComplete="off"
                   noValidate={true} className="mx_EditableItemList_newItem">
-                <Field id={`mx_EditableItemList_new_${this.props.id}`} label={this.props.placeholder} type="text"
+                <Field label={this.props.placeholder} type="text"
                        autoComplete="off" value={this.props.newItem || ""} onChange={this._onNewItemChanged}
                        list={this.props.suggestionsListId} />
                 <AccessibleButton onClick={this._onItemAdded} kind="primary" type="submit">
diff --git a/src/components/views/elements/Field.js b/src/components/views/elements/Field.js
index 8583c91a01..862b2cda96 100644
--- a/src/components/views/elements/Field.js
+++ b/src/components/views/elements/Field.js
@@ -23,9 +23,15 @@ import { debounce } from 'lodash';
 // Invoke validation from user input (when typing, etc.) at most once every N ms.
 const VALIDATION_THROTTLE_MS = 200;
 
+const BASE_ID = "mx_Field";
+let count = 1;
+function getId() {
+    return `${BASE_ID}_${count++}`;
+}
+
 export default class Field extends React.PureComponent {
     static propTypes = {
-        // The field's ID, which binds the input and label together.
+        // The field's ID, which binds the input and label together. Immutable.
         id: PropTypes.string.isRequired,
         // The element to create. Defaults to "input".
         // To define options for a select, use <Field><option ... /></Field>
@@ -70,6 +76,8 @@ export default class Field extends React.PureComponent {
             feedback: undefined,
             focused: false,
         };
+
+        this.id = this.props.id || getId();
     }
 
     onFocus = (ev) => {
@@ -167,6 +175,7 @@ export default class Field extends React.PureComponent {
         inputProps.type = inputProps.type || "text";
         inputProps.ref = input => this.input = input;
         inputProps.placeholder = inputProps.placeholder || inputProps.label;
+        inputProps.id = this.id; // this overwrites the id from props
 
         inputProps.onFocus = this.onFocus;
         inputProps.onChange = this.onChange;
@@ -211,7 +220,7 @@ export default class Field extends React.PureComponent {
         return <div className={fieldClasses}>
             {prefixContainer}
             {fieldInput}
-            <label htmlFor={this.props.id}>{this.props.label}</label>
+            <label htmlFor={this.id}>{this.props.label}</label>
             {postfixContainer}
             {fieldTooltip}
         </div>;
diff --git a/src/components/views/elements/PowerSelector.js b/src/components/views/elements/PowerSelector.js
index 2f4c08922a..eff14979a9 100644
--- a/src/components/views/elements/PowerSelector.js
+++ b/src/components/views/elements/PowerSelector.js
@@ -132,7 +132,7 @@ export default createReactClass({
         const label = typeof this.props.label === "undefined" ? _t("Power level") : this.props.label;
         if (this.state.custom) {
             picker = (
-                <Field id={`powerSelector_custom_${this.props.powerLevelKey}`} type="number"
+                <Field type="number"
                        label={label} max={this.props.maxValue}
                        onBlur={this.onCustomBlur} onKeyDown={this.onCustomKeyDown} onChange={this.onCustomChange}
                        value={String(this.state.customValue)} disabled={this.props.disabled} />
@@ -151,7 +151,7 @@ export default createReactClass({
             });
 
             picker = (
-                <Field id={`powerSelector_notCustom_${this.props.powerLevelKey}`} element="select"
+                <Field element="select"
                        label={label} onChange={this.onSelectChange}
                        value={String(this.state.selectValue)} disabled={this.props.disabled}>
                     {options}
diff --git a/src/components/views/elements/RoomAliasField.js b/src/components/views/elements/RoomAliasField.js
index b38047cd3b..d3de6a5d34 100644
--- a/src/components/views/elements/RoomAliasField.js
+++ b/src/components/views/elements/RoomAliasField.js
@@ -23,7 +23,6 @@ import {MatrixClientPeg} from '../../../MatrixClientPeg';
 // Controlled form component wrapping Field for inputting a room alias scoped to a given domain
 export default class RoomAliasField extends React.PureComponent {
     static propTypes = {
-        id: PropTypes.string.isRequired,
         domain: PropTypes.string.isRequired,
         onChange: PropTypes.func,
         value: PropTypes.string.isRequired,
@@ -50,7 +49,6 @@ export default class RoomAliasField extends React.PureComponent {
                     className="mx_RoomAliasField"
                     prefix={poundSign}
                     postfix={domain}
-                    id={this.props.id}
                     ref={ref => this._fieldRef = ref}
                     onValidate={this._onValidate}
                     placeholder={_t("e.g. my-room")}
diff --git a/src/components/views/room_settings/AliasSettings.js b/src/components/views/room_settings/AliasSettings.js
index 857a80c34a..3994d78390 100644
--- a/src/components/views/room_settings/AliasSettings.js
+++ b/src/components/views/room_settings/AliasSettings.js
@@ -62,7 +62,6 @@ class EditableAliasesList extends EditableItemList {
                 className="mx_EditableItemList_newItem"
             >
                 <RoomAliasField
-                    id={`mx_EditableItemList_new_${this.props.id}`}
                     ref={this._aliasField}
                     onChange={onChange}
                     value={this.props.newItem || ""}
diff --git a/src/components/views/room_settings/RoomProfileSettings.js b/src/components/views/room_settings/RoomProfileSettings.js
index a1816df71a..f657fbf509 100644
--- a/src/components/views/room_settings/RoomProfileSettings.js
+++ b/src/components/views/room_settings/RoomProfileSettings.js
@@ -155,7 +155,7 @@ export default class RoomProfileSettings extends React.Component {
                        onChange={this._onAvatarChanged} accept="image/*" />
                 <div className="mx_ProfileSettings_profile">
                     <div className="mx_ProfileSettings_controls">
-                        <Field id="profileDisplayName" label={_t("Room Name")}
+                        <Field label={_t("Room Name")}
                                type="text" value={this.state.displayName} autoComplete="off"
                                onChange={this._onDisplayNameChanged} disabled={!this.state.canSetName} />
                         <Field id="profileTopic" label={_t("Room Topic")} disabled={!this.state.canSetTopic}
diff --git a/src/components/views/settings/ChangePassword.js b/src/components/views/settings/ChangePassword.js
index b51ff6cf9d..6607458b40 100644
--- a/src/components/views/settings/ChangePassword.js
+++ b/src/components/views/settings/ChangePassword.js
@@ -235,7 +235,7 @@ export default createReactClass({
         if (!this.state.cachedPassword) {
             currentPassword = (
                 <div className={rowClassName}>
-                    <Field id="mx_ChangePassword_oldPassword"
+                    <Field
                         type="password"
                         label={_t('Current password')}
                         value={this.state.oldPassword}
@@ -254,7 +254,6 @@ export default createReactClass({
                         { currentPassword }
                         <div className={rowClassName}>
                             <Field
-                                id="mx_ChangePassword_newPassword"
                                 type="password"
                                 label={passwordLabel}
                                 value={this.state.newPassword}
@@ -265,7 +264,6 @@ export default createReactClass({
                         </div>
                         <div className={rowClassName}>
                             <Field
-                                id="mx_ChangePassword_newPasswordConfirm"
                                 type="password"
                                 label={_t("Confirm password")}
                                 value={this.state.newPasswordConfirm}
diff --git a/src/components/views/settings/ProfileSettings.js b/src/components/views/settings/ProfileSettings.js
index 72dfe7a983..23ab60423a 100644
--- a/src/components/views/settings/ProfileSettings.js
+++ b/src/components/views/settings/ProfileSettings.js
@@ -153,7 +153,7 @@ export default class ProfileSettings extends React.Component {
                             {this.state.userId}
                             {hostingSignup}
                         </p>
-                        <Field id="profileDisplayName" label={_t("Display Name")}
+                        <Field label={_t("Display Name")}
                                type="text" value={this.state.displayName} autoComplete="off"
                                onChange={this._onDisplayNameChanged} />
                     </div>
diff --git a/src/components/views/settings/SetIdServer.js b/src/components/views/settings/SetIdServer.js
index 995959dc90..cb37271452 100644
--- a/src/components/views/settings/SetIdServer.js
+++ b/src/components/views/settings/SetIdServer.js
@@ -403,8 +403,8 @@ export default class SetIdServer extends React.Component {
                 <span className="mx_SettingsTab_subsectionText">
                     {bodyText}
                 </span>
-                <Field label={_t("Enter a new identity server")}
-                    id="mx_SetIdServer_idServer"
+                <Field
+                    label={_t("Enter a new identity server")}
                     type="text"
                     autoComplete="off"
                     placeholder={this.state.defaultIdServer}
diff --git a/src/components/views/settings/account/EmailAddresses.js b/src/components/views/settings/account/EmailAddresses.js
index 5c7f9b24d3..ca66d5df65 100644
--- a/src/components/views/settings/account/EmailAddresses.js
+++ b/src/components/views/settings/account/EmailAddresses.js
@@ -237,7 +237,7 @@ export default class EmailAddresses extends React.Component {
                 {existingEmailElements}
                 <form onSubmit={this._onAddClick} autoComplete="off"
                       noValidate={true} className="mx_EmailAddresses_new">
-                    <Field id="mx_EmailAddressses_newEmailAddress"
+                    <Field
                         type="text"
                         label={_t("Email Address")}
                         autoComplete="off"
diff --git a/src/components/views/settings/account/PhoneNumbers.js b/src/components/views/settings/account/PhoneNumbers.js
index a59fd60eca..ad2dabd8ae 100644
--- a/src/components/views/settings/account/PhoneNumbers.js
+++ b/src/components/views/settings/account/PhoneNumbers.js
@@ -232,7 +232,7 @@ export default class PhoneNumbers extends React.Component {
                         {this.state.verifyError}
                     </div>
                     <form onSubmit={this._onContinueClick} autoComplete="off" noValidate={true}>
-                        <Field id="mx_PhoneNumbers_newPhoneNumberCode"
+                        <Field
                             type="text"
                             label={_t("Verification code")}
                             autoComplete="off"
@@ -262,7 +262,7 @@ export default class PhoneNumbers extends React.Component {
                 {existingPhoneElements}
                 <form onSubmit={this._onAddClick} autoComplete="off" noValidate={true} className="mx_PhoneNumbers_new">
                     <div className="mx_PhoneNumbers_input">
-                        <Field id="mx_PhoneNumbers_newPhoneNumber"
+                        <Field
                             type="text"
                             label={_t("Phone Number")}
                             autoComplete="off"
diff --git a/src/components/views/settings/discovery/PhoneNumbers.js b/src/components/views/settings/discovery/PhoneNumbers.js
index 17fc99458f..9addcda093 100644
--- a/src/components/views/settings/discovery/PhoneNumbers.js
+++ b/src/components/views/settings/discovery/PhoneNumbers.js
@@ -208,7 +208,7 @@ export class PhoneNumber extends React.Component {
                     {this.state.verifyError}
                 </span>
                 <form onSubmit={this.onContinueClick} autoComplete="off" noValidate={true}>
-                    <Field id="mx_PhoneNumbers_newPhoneNumberCode"
+                    <Field
                         type="text"
                         label={_t("Verification code")}
                         autoComplete="off"
diff --git a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js
index e9b30430a3..f67c56f3d6 100644
--- a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js
@@ -422,7 +422,6 @@ export default class GeneralUserSettingsTab extends React.Component {
                         <Field
                             label={_t("Custom theme URL")}
                             type='text'
-                            id='mx_GeneralUserSettingsTab_customThemeInput'
                             autoComplete="off"
                             onChange={this._onCustomThemeChange}
                             value={this.state.customThemeUrl}
@@ -448,7 +447,7 @@ export default class GeneralUserSettingsTab extends React.Component {
             <div className="mx_SettingsTab_section mx_GeneralUserSettingsTab_themeSection">
                 <span className="mx_SettingsTab_subheading">{_t("Theme")}</span>
                 {systemThemeSection}
-                <Field id="theme" label={_t("Theme")} element="select"
+                <Field label={_t("Theme")} element="select"
                        value={this.state.theme} onChange={this._onThemeChange}
                        disabled={this.state.useSystemTheme}
                 >
diff --git a/src/components/views/settings/tabs/user/MjolnirUserSettingsTab.js b/src/components/views/settings/tabs/user/MjolnirUserSettingsTab.js
index 7f3a2c401d..d22b7ec183 100644
--- a/src/components/views/settings/tabs/user/MjolnirUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/MjolnirUserSettingsTab.js
@@ -272,7 +272,6 @@ export default class MjolnirUserSettingsTab extends React.Component {
                     <div>
                         <form onSubmit={this._onAddPersonalRule} autoComplete="off">
                             <Field
-                                id="mx_MjolnirUserSettingsTab_personalAdd"
                                 type="text"
                                 label={_t("Server or user ID to ignore")}
                                 placeholder={_t("eg: @bot:* or example.org")}
@@ -305,7 +304,6 @@ export default class MjolnirUserSettingsTab extends React.Component {
                     <div>
                         <form onSubmit={this._onSubscribeList} autoComplete="off">
                             <Field
-                                id="mx_MjolnirUserSettingsTab_subscriptionAdd"
                                 type="text"
                                 label={_t("Room ID or alias of ban list")}
                                 value={this.state.newList}
diff --git a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js
index 8df65e6590..bdcb25dd51 100644
--- a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js
@@ -195,19 +195,16 @@ export default class PreferencesUserSettingsTab extends React.Component {
                     {autoHideMenuOption}
                     {autoLaunchOption}
                     <Field
-                        id={"autocompleteDelay"}
                         label={_t('Autocomplete delay (ms)')}
                         type='number'
                         value={this.state.autocompleteDelay}
                         onChange={this._onAutocompleteDelayChange} />
                     <Field
-                        id={"readMarkerInViewThresholdMs"}
                         label={_t('Read Marker lifetime (ms)')}
                         type='number'
                         value={this.state.readMarkerInViewThresholdMs}
                         onChange={this._onReadMarkerInViewThresholdMs} />
                     <Field
-                        id={"readMarkerOutOfViewThresholdMs"}
                         label={_t('Read Marker off-screen lifetime (ms)')}
                         type='number'
                         value={this.state.readMarkerOutOfViewThresholdMs}
diff --git a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js b/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js
index f4fbcada3a..71ed2bab65 100644
--- a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js
@@ -163,7 +163,7 @@ export default class VoiceUserSettingsTab extends React.Component {
             if (audioOutputs.length > 0) {
                 const defaultDevice = getDefaultDevice(audioOutputs);
                 speakerDropdown = (
-                    <Field element="select" label={_t("Audio Output")} id="audioOutput"
+                    <Field element="select" label={_t("Audio Output")}
                            value={this.state.activeAudioOutput || defaultDevice}
                            onChange={this._setAudioOutput}>
                         {this._renderDeviceOptions(audioOutputs, 'audioOutput')}
@@ -175,7 +175,7 @@ export default class VoiceUserSettingsTab extends React.Component {
             if (audioInputs.length > 0) {
                 const defaultDevice = getDefaultDevice(audioInputs);
                 microphoneDropdown = (
-                    <Field element="select" label={_t("Microphone")} id="audioInput"
+                    <Field element="select" label={_t("Microphone")}
                            value={this.state.activeAudioInput || defaultDevice}
                            onChange={this._setAudioInput}>
                         {this._renderDeviceOptions(audioInputs, 'audioInput')}
@@ -187,7 +187,7 @@ export default class VoiceUserSettingsTab extends React.Component {
             if (videoInputs.length > 0) {
                 const defaultDevice = getDefaultDevice(videoInputs);
                 webcamDropdown = (
-                    <Field element="select" label={_t("Camera")} id="videoInput"
+                    <Field element="select" label={_t("Camera")}
                            value={this.state.activeVideoInput || defaultDevice}
                            onChange={this._setVideoInput}>
                         {this._renderDeviceOptions(videoInputs, 'videoInput')}