diff --git a/lib/components/src/controls/options/Checkbox.tsx b/lib/components/src/controls/options/Checkbox.tsx
index 88b491cd5e5..95b77aeb73a 100644
--- a/lib/components/src/controls/options/Checkbox.tsx
+++ b/lib/components/src/controls/options/Checkbox.tsx
@@ -1,31 +1,42 @@
-import React, { FC, ChangeEvent, useState } from 'react';
+import React, { FC, ChangeEvent, useState, Fragment } from 'react';
 import { styled } from '@storybook/theming';
 import { ControlProps, OptionsMultiSelection, NormalizedOptionsConfig } from '../types';
 import { selectedKeys, selectedValues } from './helpers';
 
-const CheckboxesWrapper = styled.div<{ isInline: boolean }>(({ isInline }) =>
+const Wrapper = styled.div<{ isInline: boolean }>(({ isInline }) =>
   isInline
     ? {
         display: 'flex',
         flexWrap: 'wrap',
-        alignItems: 'center',
-        '> * + *': {
-          marginLeft: 10,
+        alignItems: 'flex-start',
+
+        label: {
+          display: 'inline-flex',
+          marginRight: 15,
+        },
+      }
+    : {
+        label: {
+          display: 'flex',
         },
       }
-    : {}
 );
 
-const CheckboxFieldset = styled.fieldset({
-  border: 0,
-  padding: 0,
-  margin: 0,
-});
+const Text = styled.span({});
 
-const CheckboxLabel = styled.label({
-  padding: '3px 0 3px 5px',
-  lineHeight: '18px',
-  display: 'inline-block',
+const Label = styled.label({
+  lineHeight: '20px',
+  alignItems: 'center',
+  marginBottom: 8,
+
+  '&:last-child': {
+    marginBottom: 0,
+  },
+
+  input: {
+    margin: 0,
+    marginRight: 6,
+  },
 });
 
 type CheckboxConfig = NormalizedOptionsConfig & { isInline: boolean };
@@ -53,25 +64,23 @@ export const CheckboxControl: FC<CheckboxProps> = ({
   };
 
   return (
-    <CheckboxFieldset>
-      <CheckboxesWrapper isInline={isInline}>
-        {Object.keys(options).map((key: string) => {
-          const id = `${name}-${key}`;
-          return (
-            <div key={id}>
-              <input
-                type="checkbox"
-                id={id}
-                name={name}
-                value={key}
-                onChange={handleChange}
-                checked={selected?.includes(key)}
-              />
-              <CheckboxLabel htmlFor={id}>{key}</CheckboxLabel>
-            </div>
-          );
-        })}
-      </CheckboxesWrapper>
-    </CheckboxFieldset>
+    <Wrapper isInline={isInline}>
+      {Object.keys(options).map((key: string) => {
+        const id = `${name}-${key}`;
+        return (
+          <Label key={id} htmlFor={id}>
+            <input
+              type="checkbox"
+              id={id}
+              name={name}
+              value={key}
+              onChange={handleChange}
+              checked={selected?.includes(key)}
+            />
+            <Text>{key}</Text>
+          </Label>
+        );
+      })}
+    </Wrapper>
   );
 };
diff --git a/lib/components/src/controls/options/Radio.tsx b/lib/components/src/controls/options/Radio.tsx
index 1f0febb4f05..5830d49e2b6 100644
--- a/lib/components/src/controls/options/Radio.tsx
+++ b/lib/components/src/controls/options/Radio.tsx
@@ -3,23 +3,46 @@ import { styled } from '@storybook/theming';
 import { ControlProps, OptionsSingleSelection, NormalizedOptionsConfig } from '../types';
 import { selectedKey } from './helpers';
 
-const RadiosWrapper = styled.div<{ isInline: boolean }>(({ isInline }) =>
+const Wrapper = styled.div<{ isInline: boolean }>(({ isInline }) =>
   isInline
     ? {
         display: 'flex',
         flexWrap: 'wrap',
-        alignItems: 'center',
-        '> * + *': {
-          marginLeft: 10,
+        alignItems: 'flex-start',
+
+        label: {
+          display: 'inline-flex',
+          marginRight: 15,
+        },
+      }
+    : {
+        label: {
+          display: 'flex',
         },
       }
-    : {}
 );
 
-const RadioLabel = styled.label({
-  padding: '3px 0 3px 5px',
-  lineHeight: '18px',
-  display: 'inline-block',
+const Fieldset = styled.fieldset({
+  border: 0,
+  padding: 0,
+  margin: 0,
+});
+
+const Text = styled.span({});
+
+const Label = styled.label({
+  lineHeight: '20px',
+  alignItems: 'center',
+  marginBottom: 8,
+
+  '&:last-child': {
+    marginBottom: 0,
+  },
+
+  input: {
+    margin: 0,
+    marginRight: 6,
+  },
 });
 
 type RadioConfig = NormalizedOptionsConfig & { isInline: boolean };
@@ -27,11 +50,11 @@ type RadioProps = ControlProps<OptionsSingleSelection> & RadioConfig;
 export const RadioControl: FC<RadioProps> = ({ name, options, value, onChange, isInline }) => {
   const selection = selectedKey(value, options);
   return (
-    <RadiosWrapper isInline={isInline}>
+    <Wrapper isInline={isInline}>
       {Object.keys(options).map((key) => {
         const id = `${name}-${key}`;
         return (
-          <div key={id}>
+          <Label key={id} htmlFor={id}>
             <input
               type="radio"
               id={id}
@@ -40,10 +63,10 @@ export const RadioControl: FC<RadioProps> = ({ name, options, value, onChange, i
               onChange={(e) => onChange(name, options[e.currentTarget.value])}
               checked={key === selection}
             />
-            <RadioLabel htmlFor={id}>{key}</RadioLabel>
-          </div>
+            <Text>{key}</Text>
+          </Label>
         );
       })}
-    </RadiosWrapper>
+    </Wrapper>
   );
 };