diff --git a/frontend/src/metabase/components/form/widgets/FormInputWidget.jsx b/frontend/src/metabase/components/form/widgets/FormInputWidget.jsx
index 06fa25fdbbe34881b63940800720b10a40f7e6f3..1d21d010f580dbe81d92290997b65ee51bdf61ee 100644
--- a/frontend/src/metabase/components/form/widgets/FormInputWidget.jsx
+++ b/frontend/src/metabase/components/form/widgets/FormInputWidget.jsx
@@ -14,6 +14,7 @@ const propTypes = {
   autoFocus: PropTypes.bool,
   helperText: PropTypes.node,
   tabIndex: PropTypes.string,
+  subtitle: PropTypes.string,
 };
 
 const FormInputWidget = forwardRef(function FormInputWidget(
@@ -25,6 +26,7 @@ const FormInputWidget = forwardRef(function FormInputWidget(
     autoFocus,
     helperText,
     tabIndex,
+    subtitle,
   },
   ref,
 ) {
@@ -41,6 +43,7 @@ const FormInputWidget = forwardRef(function FormInputWidget(
       rightIconTooltip={helperText}
       tabIndex={tabIndex}
       fullWidth
+      subtitle={subtitle}
       ref={ref}
     />
   );
diff --git a/frontend/src/metabase/core/components/Input/Input.styled.tsx b/frontend/src/metabase/core/components/Input/Input.styled.tsx
index 29bb3bf31299c48c8fcdd2897c07f01d2f88b633..9494f747f48590d0e568ac9cda65076a4b4c9042 100644
--- a/frontend/src/metabase/core/components/Input/Input.styled.tsx
+++ b/frontend/src/metabase/core/components/Input/Input.styled.tsx
@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 import { color } from "metabase/lib/colors";
-import { space } from "metabase/styled-components/theme";
+import { monospaceFontFamily, space } from "metabase/styled-components/theme";
 import IconButtonWrapper from "metabase/components/IconButtonWrapper";
 import { InputSize } from "./types";
 
@@ -11,6 +11,7 @@ export interface InputProps {
   fullWidth?: boolean;
   hasLeftIcon?: boolean;
   hasRightIcon?: boolean;
+  subtitle?: string;
 }
 
 export const InputRoot = styled.div<InputProps>`
@@ -68,6 +69,12 @@ export const InputField = styled.input<InputProps>`
       line-height: 1rem;
       padding: 0.4375rem 0.625rem;
     `};
+
+  ${props =>
+    props.subtitle &&
+    css`
+      padding-top: 1.75rem;
+    `};
 `;
 
 export const InputButton = styled(IconButtonWrapper)`
@@ -84,3 +91,12 @@ export const InputLeftButton = styled(InputButton)`
 export const InputRightButton = styled(InputButton)`
   right: 0;
 `;
+
+export const InputSubtitle = styled.div`
+  color: ${color("text-light")};
+  position: absolute;
+  top: 1.25em;
+  left: 1.25em;
+  font-family: ${monospaceFontFamily};
+  font-size: 0.75em;
+`;
diff --git a/frontend/src/metabase/core/components/Input/Input.tsx b/frontend/src/metabase/core/components/Input/Input.tsx
index 989d614dde72a5456d1068eefe2cf3190ef027c0..037fce33d75aaec672f847fb31114a4764ddb9ca 100644
--- a/frontend/src/metabase/core/components/Input/Input.tsx
+++ b/frontend/src/metabase/core/components/Input/Input.tsx
@@ -12,6 +12,7 @@ import {
   InputLeftButton,
   InputRightButton,
   InputRoot,
+  InputSubtitle,
 } from "./Input.styled";
 import { InputSize } from "./types";
 
@@ -29,6 +30,7 @@ export interface InputProps extends InputAttributes {
   leftIconTooltip?: ReactNode;
   rightIcon?: string;
   rightIconTooltip?: ReactNode;
+  subtitle?: string;
   onLeftIconClick?: (event: MouseEvent<HTMLButtonElement>) => void;
   onRightIconClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 }
@@ -47,6 +49,7 @@ const Input = forwardRef(function Input(
     rightIconTooltip,
     onLeftIconClick,
     onRightIconClick,
+    subtitle,
     ...props
   }: InputProps,
   ref: Ref<HTMLDivElement>,
@@ -58,6 +61,8 @@ const Input = forwardRef(function Input(
       style={style}
       fullWidth={fullWidth}
     >
+      {subtitle && <InputSubtitle>{subtitle}</InputSubtitle>}
+
       <InputField
         {...props}
         ref={inputRef}
@@ -65,6 +70,7 @@ const Input = forwardRef(function Input(
         hasError={error}
         fullWidth={fullWidth}
         hasRightIcon={Boolean(rightIcon)}
+        subtitle={subtitle}
       />
       {leftIcon && (
         <Tooltip tooltip={leftIconTooltip} placement="left" offset={[0, 24]}>
diff --git a/frontend/src/metabase/query_builder/components/DatasetEditor/DatasetFieldMetadataSidebar/DatasetFieldMetadataSidebar.jsx b/frontend/src/metabase/query_builder/components/DatasetEditor/DatasetFieldMetadataSidebar/DatasetFieldMetadataSidebar.jsx
index 07e56627b5e0250a55275865fdf2a1db5d952c9c..cb4c6bb715963022ba6b37b8e52e157f0c6af8fd 100644
--- a/frontend/src/metabase/query_builder/components/DatasetEditor/DatasetFieldMetadataSidebar/DatasetFieldMetadataSidebar.jsx
+++ b/frontend/src/metabase/query_builder/components/DatasetEditor/DatasetFieldMetadataSidebar/DatasetFieldMetadataSidebar.jsx
@@ -68,7 +68,7 @@ function getSemanticTypeOptions() {
   ];
 }
 
-function getFormFields({ dataset }) {
+function getFormFields({ dataset, field }) {
   const visibilityTypeOptions = field_visibility_types
     .filter(type => type.id !== "sensitive")
     .map(type => ({
@@ -78,7 +78,11 @@ function getFormFields({ dataset }) {
 
   return formFieldValues =>
     [
-      { name: "display_name", title: t`Display name` },
+      {
+        name: "display_name",
+        title: t`Display name`,
+        subtitle: field.name,
+      },
       {
         name: "description",
         title: t`Description`,
@@ -172,9 +176,9 @@ function DatasetFieldMetadataSidebar({
 
   const form = useMemo(
     () => ({
-      fields: getFormFields({ dataset }),
+      fields: getFormFields({ dataset, field }),
     }),
-    [dataset],
+    [field, dataset],
   );
 
   const [tab, setTab] = useState(TAB.SETTINGS);
diff --git a/frontend/src/metabase/styled-components/theme/index.ts b/frontend/src/metabase/styled-components/theme/index.ts
index 9d0b5ba75805ef491d482f227591e6b2db7c7576..6b60ecbfab1cfcda5b86b3c168eb21630896887e 100644
--- a/frontend/src/metabase/styled-components/theme/index.ts
+++ b/frontend/src/metabase/styled-components/theme/index.ts
@@ -1,2 +1,3 @@
 export * from "./media-queries";
 export * from "./space";
+export * from "./typography";
diff --git a/frontend/src/metabase/styled-components/theme/typography.ts b/frontend/src/metabase/styled-components/theme/typography.ts
new file mode 100644
index 0000000000000000000000000000000000000000..609b289c31e538b8a554cf2805bb9de82f1f4084
--- /dev/null
+++ b/frontend/src/metabase/styled-components/theme/typography.ts
@@ -0,0 +1 @@
+export const monospaceFontFamily = "Monaco, monospace";