diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx
index c67407f2e44..b2e0774032e 100644
--- a/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
-import { ColorPickerProps } from './ColorPickerPopover';
 import tinycolor from 'tinycolor2';
 import debounce from 'lodash/debounce';
 
+import { ColorPickerProps } from './ColorPickerPopover';
+import { Input } from '../Input/Input';
+
 interface ColorInputState {
   previousColor: string;
   value: string;
@@ -84,7 +86,7 @@ class ColorInput extends React.PureComponent<ColorInputProps, ColorInputState> {
             flexGrow: 1,
           }}
         >
-          <input className="gf-form-input" value={value} onChange={this.onChange} onBlur={this.onBlur} />
+          <Input className="gf-form-input" value={value} onChange={this.onChange} onBlur={this.onBlur} />
         </div>
       </div>
     );
diff --git a/packages/grafana-ui/src/components/Input/Input.tsx b/packages/grafana-ui/src/components/Input/Input.tsx
index f5f59e265c0..b9b4e186ef2 100644
--- a/packages/grafana-ui/src/components/Input/Input.tsx
+++ b/packages/grafana-ui/src/components/Input/Input.tsx
@@ -72,7 +72,7 @@ export class Input extends PureComponent<Props> {
     const inputElementProps = this.populateEventPropsWithStatus(restProps, validationEvents);
 
     return (
-      <div className="our-custom-wrapper-class">
+      <div>
         <input {...inputElementProps} className={inputClassName} />
         {error && !hideErrorMessage && <span>{error}</span>}
       </div>
diff --git a/packages/grafana-ui/src/components/Input/__snapshots__/Input.test.tsx.snap b/packages/grafana-ui/src/components/Input/__snapshots__/Input.test.tsx.snap
index 249d6b0be8d..a79fc828de6 100644
--- a/packages/grafana-ui/src/components/Input/__snapshots__/Input.test.tsx.snap
+++ b/packages/grafana-ui/src/components/Input/__snapshots__/Input.test.tsx.snap
@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Input renders correctly 1`] = `
-<div
-  className="our-custom-wrapper-class"
->
+<div>
   <input
     className="gf-form-input"
   />
diff --git a/packages/grafana-ui/src/components/Switch/Switch.tsx b/packages/grafana-ui/src/components/Switch/Switch.tsx
index e2a25682519..4f534c97a3a 100644
--- a/packages/grafana-ui/src/components/Switch/Switch.tsx
+++ b/packages/grafana-ui/src/components/Switch/Switch.tsx
@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import uniqueId from 'lodash/uniqueId';
+import { Input } from '@grafana/ui';
 
 export interface Props {
   label: string;
@@ -38,7 +39,7 @@ export class Switch extends PureComponent<Props, State> {
         <label htmlFor={labelId} className={`gf-form gf-form-switch-container ${className || ''}`}>
           {label && <div className={labelClassName}>{label}</div>}
           <div className={switchClassName}>
-            <input id={labelId} type="checkbox" checked={checked} onChange={this.internalOnChange} />
+            <Input id={labelId} type="checkbox" checked={checked} onChange={this.internalOnChange} />
             <span className="gf-form-switch__slider" />
           </div>
         </label>
diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
index daecff37dc8..12206b6f8bf 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
@@ -1,7 +1,7 @@
 import React, { PureComponent, ChangeEvent } from 'react';
 import { Threshold } from '../../types';
 import { ColorPicker } from '..';
-import { PanelOptionsGroup } from '..';
+import { Input, PanelOptionsGroup } from '..';
 import { colors } from '../../utils';
 import { ThemeContext } from '../../themes';
 import { getColorFromHexRgbOrName } from '../../utils';
@@ -176,16 +176,16 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
         </div>
         {threshold.index === 0 && (
           <div className="thresholds-row-input-inner-value">
-            <input type="text" value="Base" readOnly />
+            <Input type="text" value="Base" readOnly />
           </div>
         )}
         {threshold.index > 0 && (
           <>
             <div className="thresholds-row-input-inner-value">
-              <input
+              <Input
                 type="number"
                 step="0.0001"
-                onChange={event => this.onChangeThresholdValue(event, threshold)}
+                onChange={(event: ChangeEvent<HTMLInputElement>) => this.onChangeThresholdValue(event, threshold)}
                 value={threshold.value}
                 onBlur={this.onBlur}
                 readOnly={threshold.index === 0}
diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap b/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap
index 939f26b4dd8..275651687d5 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap
@@ -459,11 +459,21 @@ exports[`Render should render with base threshold 1`] = `
                 <div
                   className="thresholds-row-input-inner-value"
                 >
-                  <input
+                  <Input
+                    className=""
                     readOnly={true}
                     type="text"
                     value="Base"
-                  />
+                  >
+                    <div>
+                      <input
+                        className="gf-form-input"
+                        readOnly={true}
+                        type="text"
+                        value="Base"
+                      />
+                    </div>
+                  </Input>
                 </div>
               </div>
             </div>
diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx b/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx
index f5cfdfe6cbf..bb1a662c678 100644
--- a/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx
+++ b/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx
@@ -1,9 +1,8 @@
 import React, { ChangeEvent, PureComponent } from 'react';
 
+import { FormField, FormLabel, Input, Select } from '..';
+
 import { MappingType, ValueMapping } from '../../types';
-import { Select } from '../Select/Select';
-import { FormField } from '../FormField/FormField';
-import { FormLabel } from '../FormLabel/FormLabel';
 
 export interface Props {
   valueMapping: ValueMapping;
@@ -81,7 +80,7 @@ export default class MappingRow extends PureComponent<Props, State> {
           />
           <div className="gf-form gf-form--grow">
             <FormLabel width={4}>Text</FormLabel>
-            <input
+            <Input
               className="gf-form-input"
               onBlur={this.updateMapping}
               value={text}
@@ -104,7 +103,7 @@ export default class MappingRow extends PureComponent<Props, State> {
         />
         <div className="gf-form gf-form--grow">
           <FormLabel width={4}>Text</FormLabel>
-          <input
+          <Input
             className="gf-form-input"
             onBlur={this.updateMapping}
             value={text}
diff --git a/public/app/features/api-keys/ApiKeysPage.tsx b/public/app/features/api-keys/ApiKeysPage.tsx
index 538f21d0d34..62500fb98c8 100644
--- a/public/app/features/api-keys/ApiKeysPage.tsx
+++ b/public/app/features/api-keys/ApiKeysPage.tsx
@@ -12,7 +12,7 @@ import ApiKeysAddedModal from './ApiKeysAddedModal';
 import config from 'app/core/config';
 import appEvents from 'app/core/app_events';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
-import { DeleteButton } from '@grafana/ui';
+import { DeleteButton, Input } from '@grafana/ui';
 import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
 
 export interface Props {
@@ -143,7 +143,7 @@ export class ApiKeysPage extends PureComponent<Props, any> {
             <div className="gf-form-inline">
               <div className="gf-form max-width-21">
                 <span className="gf-form-label">Key name</span>
-                <input
+                <Input
                   type="text"
                   className="gf-form-input"
                   value={newApiKey.name}
diff --git a/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap b/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
index 2deb7fa5e7f..b11f81db69a 100644
--- a/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
+++ b/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
@@ -82,7 +82,7 @@ exports[`Render should render CTA if there are no API keys 1`] = `
               >
                 Key name
               </span>
-              <input
+              <Input
                 className="gf-form-input"
                 onChange={[Function]}
                 placeholder="Name"
diff --git a/public/app/features/dashboard/panel_editor/DataSourceOption.tsx b/public/app/features/dashboard/panel_editor/DataSourceOption.tsx
index a72eaae6ed9..f5edb6843b0 100644
--- a/public/app/features/dashboard/panel_editor/DataSourceOption.tsx
+++ b/public/app/features/dashboard/panel_editor/DataSourceOption.tsx
@@ -1,5 +1,5 @@
 import React, { FC, ChangeEvent } from 'react';
-import { FormLabel } from '@grafana/ui';
+import { FormLabel, Input } from '@grafana/ui';
 
 interface Props {
   label: string;
@@ -15,7 +15,7 @@ export const DataSourceOption: FC<Props> = ({ label, placeholder, name, value, o
   return (
     <div className="gf-form gf-form--flex-end">
       <FormLabel tooltip={tooltipInfo}>{label}</FormLabel>
-      <input
+      <Input
         type="text"
         className="gf-form-input width-6"
         placeholder={placeholder}
diff --git a/public/app/features/datasources/settings/BasicSettings.tsx b/public/app/features/datasources/settings/BasicSettings.tsx
index eef6776ffc4..d13af25a561 100644
--- a/public/app/features/datasources/settings/BasicSettings.tsx
+++ b/public/app/features/datasources/settings/BasicSettings.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { FormLabel, Switch } from '@grafana/ui';
+import { FormLabel, Input, Switch } from '@grafana/ui';
 
 export interface Props {
   dataSourceName: string;
@@ -21,7 +21,7 @@ const BasicSettings: FC<Props> = ({ dataSourceName, isDefault, onDefaultChange,
           >
             Name
           </FormLabel>
-          <input
+          <Input
             className="gf-form-input max-width-23"
             type="text"
             value={dataSourceName}
diff --git a/public/app/features/datasources/settings/__snapshots__/BasicSettings.test.tsx.snap b/public/app/features/datasources/settings/__snapshots__/BasicSettings.test.tsx.snap
index 951edf10dcc..4a1e7620f32 100644
--- a/public/app/features/datasources/settings/__snapshots__/BasicSettings.test.tsx.snap
+++ b/public/app/features/datasources/settings/__snapshots__/BasicSettings.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`Render should render component 1`] = `
       >
         Name
       </Component>
-      <input
+      <Input
         className="gf-form-input max-width-23"
         onChange={[Function]}
         placeholder="Name"
diff --git a/public/app/features/explore/TimePicker.tsx b/public/app/features/explore/TimePicker.tsx
index aec39370724..7735c63d58c 100644
--- a/public/app/features/explore/TimePicker.tsx
+++ b/public/app/features/explore/TimePicker.tsx
@@ -3,7 +3,7 @@ import moment from 'moment';
 
 import * as dateMath from 'app/core/utils/datemath';
 import * as rangeUtil from 'app/core/utils/rangeutil';
-import { RawTimeRange, TimeRange } from '@grafana/ui';
+import { Input, RawTimeRange, TimeRange } from '@grafana/ui';
 
 const DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss';
 export const DEFAULT_RANGE = {
@@ -260,7 +260,7 @@ export default class TimePicker extends PureComponent<TimePickerProps, TimePicke
             <label className="small">From:</label>
             <div className="gf-form-inline">
               <div className="gf-form max-width-28">
-                <input
+                <Input
                   type="text"
                   className="gf-form-input input-large timepicker-from"
                   value={fromRaw}
@@ -272,7 +272,7 @@ export default class TimePicker extends PureComponent<TimePickerProps, TimePicke
             <label className="small">To:</label>
             <div className="gf-form-inline">
               <div className="gf-form max-width-28">
-                <input
+                <Input
                   type="text"
                   className="gf-form-input input-large timepicker-to"
                   value={toRaw}
diff --git a/public/app/features/folders/FolderSettingsPage.tsx b/public/app/features/folders/FolderSettingsPage.tsx
index c82b9487840..ee5b364f398 100644
--- a/public/app/features/folders/FolderSettingsPage.tsx
+++ b/public/app/features/folders/FolderSettingsPage.tsx
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
+import { Input } from '@grafana/ui';
 import Page from 'app/core/components/Page/Page';
 import appEvents from 'app/core/app_events';
 import { getNavModel } from 'app/core/selectors/navModel';
@@ -73,7 +74,7 @@ export class FolderSettingsPage extends PureComponent<Props, State> {
             <form name="folderSettingsForm" onSubmit={this.onSave}>
               <div className="gf-form">
                 <label className="gf-form-label width-7">Name</label>
-                <input
+                <Input
                   type="text"
                   className="gf-form-input width-30"
                   value={folder.title}
diff --git a/public/app/features/folders/__snapshots__/FolderSettingsPage.test.tsx.snap b/public/app/features/folders/__snapshots__/FolderSettingsPage.test.tsx.snap
index e20273655b1..a3f1d5dd7a3 100644
--- a/public/app/features/folders/__snapshots__/FolderSettingsPage.test.tsx.snap
+++ b/public/app/features/folders/__snapshots__/FolderSettingsPage.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`Render should enable save button 1`] = `
           >
             Name
           </label>
-          <input
+          <Input
             className="gf-form-input width-30"
             onChange={[Function]}
             type="text"
@@ -85,7 +85,7 @@ exports[`Render should render component 1`] = `
           >
             Name
           </label>
-          <input
+          <Input
             className="gf-form-input width-30"
             onChange={[Function]}
             type="text"
diff --git a/public/app/features/org/OrgProfile.tsx b/public/app/features/org/OrgProfile.tsx
index 1cb6a4769fb..c3a8198a659 100644
--- a/public/app/features/org/OrgProfile.tsx
+++ b/public/app/features/org/OrgProfile.tsx
@@ -1,4 +1,5 @@
-import React, { FC } from 'react';
+import React, { ChangeEvent, FC } from 'react';
+import { Input } from '@grafana/ui';
 
 export interface Props {
   orgName: string;
@@ -21,12 +22,10 @@ const OrgProfile: FC<Props> = ({ onSubmit, onOrgNameChange, orgName }) => {
         <div className="gf-form-inline">
           <div className="gf-form max-width-28">
             <span className="gf-form-label">Organization name</span>
-            <input
+            <Input
               className="gf-form-input"
               type="text"
-              onChange={event => {
-                onOrgNameChange(event.target.value);
-              }}
+              onChange={(event: ChangeEvent<HTMLInputElement>) => onOrgNameChange(event.target.value)}
               value={orgName}
             />
           </div>
diff --git a/public/app/features/org/__snapshots__/OrgProfile.test.tsx.snap b/public/app/features/org/__snapshots__/OrgProfile.test.tsx.snap
index b67966df83b..4a9ba6addf3 100644
--- a/public/app/features/org/__snapshots__/OrgProfile.test.tsx.snap
+++ b/public/app/features/org/__snapshots__/OrgProfile.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`Render should render component 1`] = `
         >
           Organization name
         </span>
-        <input
+        <Input
           className="gf-form-input"
           onChange={[Function]}
           type="text"
diff --git a/public/app/features/teams/TeamGroupSync.tsx b/public/app/features/teams/TeamGroupSync.tsx
index 5f47c4b906d..ace8e9c8562 100644
--- a/public/app/features/teams/TeamGroupSync.tsx
+++ b/public/app/features/teams/TeamGroupSync.tsx
@@ -1,7 +1,9 @@
 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
+
 import { SlideDown } from 'app/core/components/Animations/SlideDown';
-import { Tooltip } from '@grafana/ui';
+import { Input, Tooltip } from '@grafana/ui';
+
 import { TeamGroup } from '../../types';
 import { addTeamGroup, loadTeamGroups, removeTeamGroup } from './state/actions';
 import { getTeamGroups } from './state/selectors';
@@ -98,7 +100,7 @@ export class TeamGroupSync extends PureComponent<Props, State> {
             <h5>Add External Group</h5>
             <form className="gf-form-inline" onSubmit={this.onAddGroup}>
               <div className="gf-form">
-                <input
+                <Input
                   type="text"
                   className="gf-form-input width-30"
                   value={newGroupId}
diff --git a/public/app/features/teams/TeamSettings.tsx b/public/app/features/teams/TeamSettings.tsx
index 2187be4fcc2..1661ab07a69 100644
--- a/public/app/features/teams/TeamSettings.tsx
+++ b/public/app/features/teams/TeamSettings.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { FormLabel } from '@grafana/ui';
+import { FormLabel, Input } from '@grafana/ui';
 
 import { SharedPreferences } from 'app/core/components/SharedPreferences/SharedPreferences';
 import { updateTeam } from './state/actions';
@@ -52,7 +52,7 @@ export class TeamSettings extends React.Component<Props, State> {
         <form name="teamDetailsForm" className="gf-form-group" onSubmit={this.onUpdate}>
           <div className="gf-form max-width-30">
             <FormLabel>Name</FormLabel>
-            <input
+            <Input
               type="text"
               required
               value={name}
@@ -65,7 +65,7 @@ export class TeamSettings extends React.Component<Props, State> {
             <FormLabel tooltip="This is optional and is primarily used to set the team profile avatar (via gravatar service)">
               Email
             </FormLabel>
-            <input
+            <Input
               type="email"
               className="gf-form-input max-width-22"
               value={email}
diff --git a/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap b/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap
index 5d384e99ef8..03130b638bc 100644
--- a/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap
+++ b/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap
@@ -50,7 +50,7 @@ exports[`Render should render component 1`] = `
         <div
           className="gf-form"
         >
-          <input
+          <Input
             className="gf-form-input width-30"
             onChange={[Function]}
             placeholder="cn=ops,ou=groups,dc=grafana,dc=org"
@@ -168,7 +168,7 @@ exports[`Render should render groups table 1`] = `
         <div
           className="gf-form"
         >
-          <input
+          <Input
             className="gf-form-input width-30"
             onChange={[Function]}
             placeholder="cn=ops,ou=groups,dc=grafana,dc=org"
diff --git a/public/app/features/teams/__snapshots__/TeamSettings.test.tsx.snap b/public/app/features/teams/__snapshots__/TeamSettings.test.tsx.snap
index 8363a4f2f38..0f7f8af6bdd 100644
--- a/public/app/features/teams/__snapshots__/TeamSettings.test.tsx.snap
+++ b/public/app/features/teams/__snapshots__/TeamSettings.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`Render should render component 1`] = `
       <Component>
         Name
       </Component>
-      <input
+      <Input
         className="gf-form-input max-width-22"
         onChange={[Function]}
         required={true}
@@ -34,7 +34,7 @@ exports[`Render should render component 1`] = `
       >
         Email
       </Component>
-      <input
+      <Input
         className="gf-form-input max-width-22"
         onChange={[Function]}
         placeholder="team@email.com"
diff --git a/public/app/features/templating/DefaultVariableQueryEditor.tsx b/public/app/features/templating/DefaultVariableQueryEditor.tsx
index ea5f2acaade..f1326799115 100644
--- a/public/app/features/templating/DefaultVariableQueryEditor.tsx
+++ b/public/app/features/templating/DefaultVariableQueryEditor.tsx
@@ -1,4 +1,5 @@
 import React, { PureComponent } from 'react';
+import { Input } from '@grafana/ui';
 import { VariableQueryProps } from 'app/types/plugins';
 
 export default class DefaultVariableQueryEditor extends PureComponent<VariableQueryProps, any> {
@@ -19,12 +20,12 @@ export default class DefaultVariableQueryEditor extends PureComponent<VariableQu
     return (
       <div className="gf-form">
         <span className="gf-form-label width-10">Query</span>
-        <input
+        <Input
           type="text"
           className="gf-form-input"
           value={this.state.value}
-          onChange={e => this.handleChange(e)}
-          onBlur={e => this.handleBlur(e)}
+          onChange={this.handleChange}
+          onBlur={this.handleBlur}
           placeholder="metric name or tags query"
           required
         />
diff --git a/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx b/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx
index 64bd6ebe28d..4acc2ecf1a7 100644
--- a/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { debounce } from 'lodash';
+import { Input } from '@grafana/ui';
 
 export interface Props {
   onChange: (alignmentPeriod) => void;
@@ -40,7 +41,7 @@ export class AliasBy extends Component<Props, State> {
         <div className="gf-form-inline">
           <div className="gf-form">
             <label className="gf-form-label query-keyword width-9">Alias By</label>
-            <input type="text" className="gf-form-input width-24" value={this.state.value} onChange={this.onChange} />
+            <Input type="text" className="gf-form-input width-24" value={this.state.value} onChange={this.onChange} />
           </div>
           <div className="gf-form gf-form--grow">
             <div className="gf-form-label gf-form-label--grow" />
diff --git a/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx
index f3264176a83..a00aa44559c 100644
--- a/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import _ from 'lodash';
+import { Input } from '@grafana/ui';
 
 import { TemplateSrv } from 'app/features/templating/template_srv';
 
@@ -91,7 +91,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
         <div className="gf-form gf-form-inline">
           <div className="gf-form">
             <span className="gf-form-label query-keyword width-9">Title</span>
-            <input
+            <Input
               type="text"
               className="gf-form-input width-20"
               value={title}
@@ -100,7 +100,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
           </div>
           <div className="gf-form">
             <span className="gf-form-label query-keyword width-9">Text</span>
-            <input
+            <Input
               type="text"
               className="gf-form-input width-20"
               value={text}
diff --git a/public/app/plugins/datasource/stackdriver/components/Project.tsx b/public/app/plugins/datasource/stackdriver/components/Project.tsx
index 8f3e1263ee3..188c80708e1 100644
--- a/public/app/plugins/datasource/stackdriver/components/Project.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Project.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Input } from '@grafana/ui';
 import StackdriverDatasource from '../datasource';
 
 export interface Props {
@@ -24,7 +25,7 @@ export class Project extends React.Component<Props, State> {
     return (
       <div className="gf-form">
         <span className="gf-form-label width-9 query-keyword">Project</span>
-        <input className="gf-form-input width-15" disabled type="text" value={projectName} />
+        <Input className="gf-form-input width-15" disabled type="text" value={projectName} />
       </div>
     );
   }
diff --git a/public/app/plugins/datasource/stackdriver/components/__snapshots__/QueryEditor.test.tsx.snap b/public/app/plugins/datasource/stackdriver/components/__snapshots__/QueryEditor.test.tsx.snap
index 8ab8bbfc83b..9d573dc6365 100644
--- a/public/app/plugins/datasource/stackdriver/components/__snapshots__/QueryEditor.test.tsx.snap
+++ b/public/app/plugins/datasource/stackdriver/components/__snapshots__/QueryEditor.test.tsx.snap
@@ -398,12 +398,14 @@ Array [
       >
         Alias By
       </label>
-      <input
-        className="gf-form-input width-24"
-        onChange={[Function]}
-        type="text"
-        value=""
-      />
+      <div>
+        <input
+          className="gf-form-input gf-form-input width-24"
+          onChange={[Function]}
+          type="text"
+          value=""
+        />
+      </div>
     </div>
     <div
       className="gf-form gf-form--grow"
@@ -424,12 +426,14 @@ Array [
       >
         Project
       </span>
-      <input
-        className="gf-form-input width-15"
-        disabled={true}
-        type="text"
-        value="Loading project..."
-      />
+      <div>
+        <input
+          className="gf-form-input gf-form-input width-15"
+          disabled={true}
+          type="text"
+          value="Loading project..."
+        />
+      </div>
     </div>
     <div
       className="gf-form"