diff --git a/packages/grafana-ui/src/components/Forms/Checkbox.story.tsx b/packages/grafana-ui/src/components/Forms/Checkbox.story.tsx
index 6416e996fd2..fac1bc339c0 100644
--- a/packages/grafana-ui/src/components/Forms/Checkbox.story.tsx
+++ b/packages/grafana-ui/src/components/Forms/Checkbox.story.tsx
@@ -2,6 +2,7 @@ import React, { useState, useCallback } from 'react';
 import mdx from './Checkbox.mdx';
 import { Checkbox } from './Checkbox';
 import { VerticalGroup } from '../Layout/Layout';
+import { Field } from './Field';
 
 export default {
   title: 'Forms/Checkbox',
@@ -57,3 +58,14 @@ export const StackedList = () => {
     </VerticalGroup>
   );
 };
+
+export const InAField = () => {
+  return (
+    <Field
+      label="Hidden"
+      description="Annotation queries can be toggled on or of at the top of the dashboard. With this option checked this toggle will be hidden."
+    >
+      <Checkbox name="hide" id="hide" defaultChecked={true} />
+    </Field>
+  );
+};
diff --git a/packages/grafana-ui/src/components/Forms/Checkbox.tsx b/packages/grafana-ui/src/components/Forms/Checkbox.tsx
index 8483357d0c1..c0631710e39 100644
--- a/packages/grafana-ui/src/components/Forms/Checkbox.tsx
+++ b/packages/grafana-ui/src/components/Forms/Checkbox.tsx
@@ -65,6 +65,7 @@ export const getCheckboxStyles = stylesFactory((theme: GrafanaTheme2) => {
       position: relative;
       padding-left: ${checkboxSize};
       vertical-align: middle;
+      min-height: ${theme.spacing(3)};
     `,
     input: css`
       position: absolute;