diff --git a/public/app/features/plugins/sql/components/configuration/ConnectionLimits.tsx b/public/app/features/plugins/sql/components/configuration/ConnectionLimits.tsx
index d7f97b8620b..10f0eebb147 100644
--- a/public/app/features/plugins/sql/components/configuration/ConnectionLimits.tsx
+++ b/public/app/features/plugins/sql/components/configuration/ConnectionLimits.tsx
@@ -1,20 +1,29 @@
 import React from 'react';
 
 import { DataSourceSettings } from '@grafana/data';
+import { ConfigSubSection, Stack } from '@grafana/experimental';
 import { config } from '@grafana/runtime';
-import { FieldSet, InlineField, InlineFieldRow, InlineSwitch } from '@grafana/ui';
-import { NumberInput } from 'app/core/components/OptionsUI/NumberInput';
+import { Field, Icon, InlineLabel, Input, Label, Switch, Tooltip } from '@grafana/ui';
 
 import { SQLConnectionLimits, SQLOptions } from '../../types';
 
 interface Props<T> {
   onOptionsChange: Function;
   options: DataSourceSettings<SQLOptions>;
-  labelWidth: number;
+}
+
+function toNumber(text: string): number {
+  if (text.trim() === '') {
+    // calling `Number('')` returns zero,
+    // so we have to handle this case
+    return NaN;
+  }
+
+  return Number(text);
 }
 
 export const ConnectionLimits = <T extends SQLConnectionLimits>(props: Props<T>) => {
-  const { onOptionsChange, options, labelWidth } = props;
+  const { onOptionsChange, options } = props;
   const jsonData = options.jsonData;
   const autoIdle = jsonData.maxIdleConnsAuto !== undefined ? jsonData.maxIdleConnsAuto : false;
 
@@ -81,67 +90,140 @@ export const ConnectionLimits = <T extends SQLConnectionLimits>(props: Props<T>)
     });
   };
 
+  const labelWidth = 40;
+
   return (
-    <FieldSet label="Connection limits">
-      <InlineField
-        tooltip={
-          <span>
-            The maximum number of open connections to the database.If <i>Max idle connections</i> is greater than 0 and
-            the <i>Max open connections</i> is less than <i>Max idle connections</i>, then
-            <i>Max idle connections</i> will be reduced to match the <i>Max open connections</i> limit. If set to 0,
-            there is no limit on the number of open connections.
-          </span>
+    <ConfigSubSection title="Connection limits">
+      <Field
+        label={
+          <Label>
+            <Stack gap={0.5}>
+              <span>Max open</span>
+              <Tooltip
+                content={
+                  <span>
+                    The maximum number of open connections to the database. If <i>Max idle connections</i> is greater
+                    than 0 and the <i>Max open connections</i> is less than <i>Max idle connections</i>, then
+                    <i>Max idle connections</i> will be reduced to match the <i>Max open connections</i> limit. If set
+                    to 0, there is no limit on the number of open connections.
+                  </span>
+                }
+              >
+                <Icon name="info-circle" size="sm" />
+              </Tooltip>
+            </Stack>
+          </Label>
         }
-        labelWidth={labelWidth}
-        label="Max open"
       >
-        <NumberInput placeholder="unlimited" value={jsonData.maxOpenConns} onChange={onMaxConnectionsChanged} />
-      </InlineField>
-      <InlineFieldRow>
-        <InlineField
-          tooltip={
-            <span>
-              The maximum number of connections in the idle connection pool.If <i>Max open connections</i> is greater
-              than 0 but less than the <i>Max idle connections</i>, then the <i>Max idle connections</i> will be reduced
-              to match the <i>Max open connections</i> limit. If set to 0, no idle connections are retained.
-            </span>
-          }
-          labelWidth={labelWidth}
-          label="Max idle"
-        >
-          <NumberInput
+        <Input
+          type="number"
+          placeholder="unlimited"
+          defaultValue={jsonData.maxOpenConns}
+          onChange={(e) => {
+            const newVal = toNumber(e.currentTarget.value);
+            if (!Number.isNaN(newVal)) {
+              onMaxConnectionsChanged(newVal);
+            }
+          }}
+          width={labelWidth}
+        />
+      </Field>
+
+      <Field
+        label={
+          <Label>
+            <Stack gap={0.5}>
+              <span>Auto Max Idle</span>
+              <Tooltip
+                content={
+                  <span>
+                    If enabled, automatically set the number of <i>Maximum idle connections</i> to the same value as
+                    <i> Max open connections</i>. If the number of maximum open connections is not set it will be set to
+                    the default ({config.sqlConnectionLimits.maxIdleConns}).
+                  </span>
+                }
+              >
+                <Icon name="info-circle" size="sm" />
+              </Tooltip>
+            </Stack>
+          </Label>
+        }
+      >
+        <Switch value={autoIdle} onChange={onConnectionIdleAutoChanged} />
+      </Field>
+
+      <Field
+        label={
+          <Label>
+            <Stack gap={0.5}>
+              <span>Max idle</span>
+              <Tooltip
+                content={
+                  <span>
+                    The maximum number of connections in the idle connection pool.If <i>Max open connections</i> is
+                    greater than 0 but less than the <i>Max idle connections</i>, then the <i>Max idle connections</i>{' '}
+                    will be reduced to match the <i>Max open connections</i> limit. If set to 0, no idle connections are
+                    retained.
+                  </span>
+                }
+              >
+                <Icon name="info-circle" size="sm" />
+              </Tooltip>
+            </Stack>
+          </Label>
+        }
+      >
+        {autoIdle ? (
+          <InlineLabel width={labelWidth}>{options.jsonData.maxIdleConns}</InlineLabel>
+        ) : (
+          <Input
+            type="number"
             placeholder="2"
-            value={jsonData.maxIdleConns}
-            onChange={onJSONDataNumberChanged('maxIdleConns')}
-            width={8}
-            fieldDisabled={autoIdle}
+            defaultValue={jsonData.maxIdleConns}
+            onChange={(e) => {
+              const newVal = toNumber(e.currentTarget.value);
+              if (!Number.isNaN(newVal)) {
+                onJSONDataNumberChanged('maxIdleConns')(newVal);
+              }
+            }}
+            width={labelWidth}
+            disabled={autoIdle}
           />
-        </InlineField>
-        <InlineField
-          label="Auto"
-          labelWidth={8}
-          tooltip={
-            <span>
-              If enabled, automatically set the number of <i>Maximum idle connections</i> to the same value as
-              <i> Max open connections</i>. If the number of maximum open connections is not set it will be set to the
-              default ({config.sqlConnectionLimits.maxIdleConns}).
-            </span>
-          }
-        >
-          <InlineSwitch value={autoIdle} onChange={onConnectionIdleAutoChanged} />
-        </InlineField>
-      </InlineFieldRow>
-      <InlineField
-        tooltip="The maximum amount of time in seconds a connection may be reused. If set to 0, connections are reused forever."
-        labelWidth={labelWidth}
-        label="Max lifetime"
+        )}
+      </Field>
+
+      <Field
+        label={
+          <Label>
+            <Stack gap={0.5}>
+              <span>Max lifetime</span>
+              <Tooltip
+                content={
+                  <span>
+                    The maximum amount of time in seconds a connection may be reused. If set to 0, connections are
+                    reused forever.
+                  </span>
+                }
+              >
+                <Icon name="info-circle" size="sm" />
+              </Tooltip>
+            </Stack>
+          </Label>
+        }
       >
-        <NumberInput
+        <Input
+          type="number"
           placeholder="14400"
-          value={jsonData.connMaxLifetime}
-          onChange={onJSONDataNumberChanged('connMaxLifetime')}
-        ></NumberInput>
-      </InlineField>
-    </FieldSet>
+          defaultValue={jsonData.connMaxLifetime}
+          onChange={(e) => {
+            const newVal = toNumber(e.currentTarget.value);
+            if (!Number.isNaN(newVal)) {
+              onJSONDataNumberChanged('connMaxLifetime')(newVal);
+            }
+          }}
+          width={labelWidth}
+        />
+      </Field>
+    </ConfigSubSection>
   );
 };
diff --git a/public/app/plugins/datasource/mssql/configuration/ConfigurationEditor.tsx b/public/app/plugins/datasource/mssql/configuration/ConfigurationEditor.tsx
index 22a56cc03eb..19e1e8a42c8 100644
--- a/public/app/plugins/datasource/mssql/configuration/ConfigurationEditor.tsx
+++ b/public/app/plugins/datasource/mssql/configuration/ConfigurationEditor.tsx
@@ -38,7 +38,6 @@ import {
   MssqlSecureOptions,
 } from '../types';
 
-const SHORT_WIDTH = 15;
 const LONG_WIDTH = 40;
 
 export const ConfigurationEditor = (props: DataSourcePluginOptionsEditorProps<MssqlOptions, MssqlSecureOptions>) => {
@@ -297,7 +296,7 @@ export const ConfigurationEditor = (props: DataSourcePluginOptionsEditorProps<Ms
         isCollapsible={true}
         isInitiallyOpen={true}
       >
-        <ConnectionLimits labelWidth={SHORT_WIDTH} options={dsSettings} onOptionsChange={onOptionsChange} />
+        <ConnectionLimits options={dsSettings} onOptionsChange={onOptionsChange} />
 
         <ConfigSubSection title="Connection details">
           <Field
diff --git a/public/app/plugins/datasource/mysql/configuration/ConfigurationEditor.tsx b/public/app/plugins/datasource/mysql/configuration/ConfigurationEditor.tsx
index 07cd9e50005..77253f0d3a4 100644
--- a/public/app/plugins/datasource/mysql/configuration/ConfigurationEditor.tsx
+++ b/public/app/plugins/datasource/mysql/configuration/ConfigurationEditor.tsx
@@ -50,7 +50,6 @@ export const ConfigurationEditor = (props: DataSourcePluginOptionsEditorProps<My
     };
   };
 
-  const WIDTH_SHORT = 15;
   const WIDTH_LONG = 40;
 
   return (
@@ -228,7 +227,7 @@ export const ConfigurationEditor = (props: DataSourcePluginOptionsEditorProps<My
 
       <Divider />
 
-      <ConnectionLimits labelWidth={WIDTH_SHORT} options={options} onOptionsChange={onOptionsChange} />
+      <ConnectionLimits options={options} onOptionsChange={onOptionsChange} />
 
       <Divider />
 
diff --git a/public/app/plugins/datasource/postgres/configuration/ConfigurationEditor.tsx b/public/app/plugins/datasource/postgres/configuration/ConfigurationEditor.tsx
index 253ed18d71e..0c9baf22211 100644
--- a/public/app/plugins/datasource/postgres/configuration/ConfigurationEditor.tsx
+++ b/public/app/plugins/datasource/postgres/configuration/ConfigurationEditor.tsx
@@ -246,7 +246,7 @@ export const PostgresConfigEditor = (props: DataSourcePluginOptionsEditorProps<P
         </FieldSet>
       ) : null}
 
-      <ConnectionLimits labelWidth={labelWidthShort} options={options} onOptionsChange={onOptionsChange} />
+      <ConnectionLimits options={options} onOptionsChange={onOptionsChange} />
 
       <FieldSet label="PostgreSQL details">
         <InlineField