diff --git a/.changeset/short-starfishes-sell.md b/.changeset/short-starfishes-sell.md
new file mode 100644
index 0000000000..dd4165c256
--- /dev/null
+++ b/.changeset/short-starfishes-sell.md
@@ -0,0 +1,7 @@
+---
+'@toptal/picasso-checkbox': patch
+'@toptal/picasso-radio': patch
+'@toptal/picasso-form': patch
+---
+
+- migrate styles of FormControlLabel to TailwindCSS
diff --git a/packages/base/Checkbox/src/Checkbox/Checkbox.tsx b/packages/base/Checkbox/src/Checkbox/Checkbox.tsx
index 7965690691..8b584e4a79 100644
--- a/packages/base/Checkbox/src/Checkbox/Checkbox.tsx
+++ b/packages/base/Checkbox/src/Checkbox/Checkbox.tsx
@@ -12,6 +12,7 @@ import React, { forwardRef } from 'react'
 import { Container } from '@toptal/picasso-container'
 import { FormControlLabel } from '@toptal/picasso-form'
 import type { RequiredDecoration } from '@toptal/picasso-form'
+import { twJoin } from '@toptal/picasso-tailwind-merge'
 
 import styles from './styles'
 
@@ -111,8 +112,11 @@ export const Checkbox = forwardRef<HTMLButtonElement | HTMLLabelElement, Props>(
         style={labelStyle}
         ref={ref as React.ForwardedRef<HTMLLabelElement>}
         classes={{
-          ...rootClasses,
-          label: classes.label,
+          label: twJoin(
+            'max-w-[calc(100%_-_1.5em_+_1px)]',
+            'ml-[0.5em]',
+            disabled && 'text-gray-500'
+          ),
         }}
         control={muiCheckbox}
         requiredDecoration={requiredDecoration}
diff --git a/packages/base/Checkbox/src/Checkbox/__snapshots__/test.tsx.snap b/packages/base/Checkbox/src/Checkbox/__snapshots__/test.tsx.snap
index 02ae772b82..fbcf30cfd1 100644
--- a/packages/base/Checkbox/src/Checkbox/__snapshots__/test.tsx.snap
+++ b/packages/base/Checkbox/src/Checkbox/__snapshots__/test.tsx.snap
@@ -15,7 +15,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
           class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]"
         >
           <label
-            class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
+            class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
           >
             <span
               class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -40,7 +40,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
               </span>
             </span>
             <span
-              class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label PicassoCheckbox-label"
+              class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
             >
               <span
                 class="align-top text-[0.8125rem]"
@@ -54,7 +54,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
           class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]"
         >
           <label
-            class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
+            class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
           >
             <span
               class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -79,7 +79,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
               </span>
             </span>
             <span
-              class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label PicassoCheckbox-label"
+              class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
             >
               <span
                 class="align-top text-[0.8125rem]"
@@ -93,7 +93,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
           class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]"
         >
           <label
-            class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
+            class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
           >
             <span
               class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -118,7 +118,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
               </span>
             </span>
             <span
-              class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label PicassoCheckbox-label"
+              class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
             >
               <span
                 class="align-top text-[0.8125rem]"
@@ -132,7 +132,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
           class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]"
         >
           <label
-            class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
+            class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
           >
             <span
               class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -157,7 +157,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
               </span>
             </span>
             <span
-              class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label PicassoCheckbox-label"
+              class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
             >
               <span
                 class="align-top text-[0.8125rem]"
@@ -171,7 +171,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
           class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]"
         >
           <label
-            class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
+            class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
           >
             <span
               class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -196,7 +196,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
               </span>
             </span>
             <span
-              class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label PicassoCheckbox-label"
+              class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
             >
               <span
                 class="align-top text-[0.8125rem]"
@@ -210,7 +210,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
           class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]"
         >
           <label
-            class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
+            class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
           >
             <span
               class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -235,7 +235,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
               </span>
             </span>
             <span
-              class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label PicassoCheckbox-label"
+              class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
             >
               <span
                 class="align-top text-[0.8125rem]"
@@ -257,7 +257,7 @@ exports[`Checkbox checkbox interaction should render checked checkbox 1`] = `
     class="Picasso-root"
   >
     <label
-      class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
+      class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
     >
       <span
         class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -282,7 +282,7 @@ exports[`Checkbox checkbox interaction should render checked checkbox 1`] = `
         </span>
       </span>
       <span
-        class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label PicassoCheckbox-label"
+        class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
       >
         <span
           class="align-top text-[0.8125rem]"
@@ -458,7 +458,7 @@ exports[`Checkbox should render default checkbox with label 1`] = `
     class="Picasso-root"
   >
     <label
-      class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
+      class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
     >
       <span
         class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -483,7 +483,7 @@ exports[`Checkbox should render default checkbox with label 1`] = `
         </span>
       </span>
       <span
-        class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label PicassoCheckbox-label"
+        class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
       >
         <span
           class="align-top text-[0.8125rem]"
diff --git a/packages/base/Checkbox/src/Checkbox/styles.ts b/packages/base/Checkbox/src/Checkbox/styles.ts
index fac319f795..a2eb77b257 100644
--- a/packages/base/Checkbox/src/Checkbox/styles.ts
+++ b/packages/base/Checkbox/src/Checkbox/styles.ts
@@ -3,9 +3,6 @@ import { createStyles } from '@material-ui/core/styles'
 import { mix, outline } from '@toptal/picasso-shared'
 import { PicassoProvider } from '@toptal/picasso-provider'
 
-const controlWidth = '1em'
-const labelMargin = '0.5em'
-
 PicassoProvider.override(() => ({
   MuiCheckbox: {
     root: {
@@ -51,9 +48,6 @@ export default ({ palette, sizes, transitions }: Theme) =>
       '&:hover $uncheckedIcon': {
         border: `${sizes.borderWidth} solid ${palette.grey.main}`,
       },
-      '& $label': {
-        color: palette.grey.main,
-      },
     },
     focused: {
       '& $uncheckedIcon': {
@@ -125,11 +119,6 @@ export default ({ palette, sizes, transitions }: Theme) =>
         transform: 'translate(-50%, -50%)',
       },
     },
-    label: {
-      marginLeft: labelMargin,
-      // 1px is needed for safari
-      maxWidth: `calc(100% - ${controlWidth} - ${labelMargin} + 1px)`,
-    },
     labelWithRightSpacing: {},
     checkboxWrapper: {
       alignSelf: 'flex-start',
diff --git a/packages/base/Form/src/FormControlLabel/FormControlLabel.tsx b/packages/base/Form/src/FormControlLabel/FormControlLabel.tsx
index 29bcc501ca..f459649e59 100644
--- a/packages/base/Form/src/FormControlLabel/FormControlLabel.tsx
+++ b/packages/base/Form/src/FormControlLabel/FormControlLabel.tsx
@@ -1,13 +1,10 @@
 import type { ReactElement, ReactNode, LabelHTMLAttributes } from 'react'
 import React, { forwardRef } from 'react'
 import type { FormControlLabelProps } from '@material-ui/core/FormControlLabel'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import type { StandardProps, TextLabelProps } from '@toptal/picasso-shared'
-import cx from 'classnames'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
 import type { RequiredDecoration } from '../FormLabel'
-import styles from './styles'
 import { FormCompound as Form } from '../FormCompound'
 import { useFieldsLayoutContext } from '../FieldsLayout'
 
@@ -27,12 +24,12 @@ export interface Props
   disabled?: boolean
   /** Whether to show asterisk or (optional) postfix as a 'required' decoration */
   requiredDecoration?: RequiredDecoration
+  classes?: {
+    root?: string
+    label?: string
+  }
 }
 
-const useStyles = makeStyles<Theme, Props>(styles, {
-  name: 'PicassoFormControlLabel',
-})
-
 const FormControlLabel = forwardRef<HTMLLabelElement, Props>(
   function FormControlLabel(props, ref) {
     const {
@@ -43,33 +40,33 @@ const FormControlLabel = forwardRef<HTMLLabelElement, Props>(
       disabled,
       requiredDecoration,
       titleCase,
-      // Avoid passing external classes inside the rest props
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      classes: externalClasses,
+      classes,
       ...rest
     } = props
 
-    const classes = useStyles(props)
-
     const { layout } = useFieldsLayoutContext()
+    const isHorizontalLayout = layout === 'horizontal'
 
     return (
       <label
         {...rest}
         ref={ref}
-        className={cx(
-          classes.root,
-          {
-            [classes.disabled]: disabled,
-            [classes.horizontalLayout]: layout === 'horizontal',
-          },
+        className={twMerge(
+          'inline-flex items-center',
+          'max-w-full',
+          'align-middle',
+          '-webkit-tap-highlight-color-transparent',
+          'mx-0',
+          disabled ? 'cursor-default' : 'cursor-pointer',
+          isHorizontalLayout && 'col-start-1 col-span-2',
+          classes?.root,
           className
         )}
         style={style}
       >
         {React.cloneElement(control, { disabled })}
         <Form.Label
-          className={classes.label}
+          className={twMerge(disabled && 'pointer-events-auto', classes?.label)}
           as='span'
           requiredDecoration={requiredDecoration}
           disabled={disabled}
diff --git a/packages/base/Form/src/FormControlLabel/styles.ts b/packages/base/Form/src/FormControlLabel/styles.ts
deleted file mode 100644
index 0ab2b5c63b..0000000000
--- a/packages/base/Form/src/FormControlLabel/styles.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
-import { PicassoProvider } from '@toptal/picasso-provider'
-
-PicassoProvider.override(({ palette, typography }: Theme) => ({
-  MuiFormControlLabel: {
-    root: {
-      marginLeft: 0,
-      marginRight: 0,
-    },
-    label: {
-      display: 'inline-flex',
-      alignItems: 'center',
-
-      fontSize: '1em',
-      color: palette.text.primary,
-      lineHeight: '1.5em',
-      fontWeight: typography.fontWeights.regular,
-      cursor: 'pointer',
-      userSelect: 'none',
-
-      '&$disabled': {
-        pointerEvents: 'auto',
-      },
-    },
-  },
-}))
-
-export default () =>
-  createStyles({
-    root: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      cursor: 'pointer',
-      // For ellipsis
-      maxWidth: '100%',
-      // For correct alignment with the text.
-      verticalAlign: 'middle',
-      WebkitTapHighlightColor: 'transparent',
-      '&$disabled': {
-        cursor: 'default',
-      },
-      marginLeft: 0,
-      marginRight: 0,
-    },
-    label: {
-      '&$disabled': {
-        pointerEvents: 'auto',
-      },
-    },
-    disabled: {},
-    horizontalLayout: {
-      gridColumn: '1 / span 2',
-    },
-  })
diff --git a/packages/base/Radio/src/Radio/Radio.tsx b/packages/base/Radio/src/Radio/Radio.tsx
index d30108a8f8..ee50a12763 100644
--- a/packages/base/Radio/src/Radio/Radio.tsx
+++ b/packages/base/Radio/src/Radio/Radio.tsx
@@ -90,10 +90,9 @@ export const Radio = forwardRef<HTMLButtonElement | HTMLLabelElement, Props>(
         {...externalEventListeners}
         ref={ref as React.ForwardedRef<HTMLLabelElement>}
         control={muiRadio}
-        className={classes.labelWithRightSpacing}
         classes={{
-          ...rootClasses,
-          label: classes.label,
+          label: 'mt-[0.25em] max-w-[calc(100%_-_1.5em_+_1px)]',
+          root: 'text-[1rem] items-start',
         }}
         style={style}
         label={label}
diff --git a/packages/base/Radio/src/Radio/__snapshots__/test.tsx.snap b/packages/base/Radio/src/Radio/__snapshots__/test.tsx.snap
index 5bc3266775..aa91458ba0 100644
--- a/packages/base/Radio/src/Radio/__snapshots__/test.tsx.snap
+++ b/packages/base/Radio/src/Radio/__snapshots__/test.tsx.snap
@@ -16,7 +16,7 @@ exports[`Radio Radio.Group renders radio in a grid group 1`] = `
           class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none [&&]:pt-0 [&&]:pb-0"
         >
           <label
-            class="PicassoFormControlLabel-root Radio-root Radio-labelWithRightSpacing"
+            class="inline-flex max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] items-start"
           >
             <span
               aria-disabled="false"
@@ -37,7 +37,7 @@ exports[`Radio Radio.Group renders radio in a grid group 1`] = `
               </span>
             </span>
             <span
-              class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label Radio-label"
+              class="inline-block leading-[1em] mb-0 text-graphite mt-[0.25em] max-w-[calc(100%_"
             >
               <span
                 class="align-top text-[0.8125rem]"
@@ -51,7 +51,7 @@ exports[`Radio Radio.Group renders radio in a grid group 1`] = `
           class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none [&&]:pt-0 [&&]:pb-0"
         >
           <label
-            class="PicassoFormControlLabel-root Radio-root Radio-labelWithRightSpacing"
+            class="inline-flex max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] items-start"
           >
             <span
               aria-disabled="false"
@@ -72,7 +72,7 @@ exports[`Radio Radio.Group renders radio in a grid group 1`] = `
               </span>
             </span>
             <span
-              class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label Radio-label"
+              class="inline-block leading-[1em] mb-0 text-graphite mt-[0.25em] max-w-[calc(100%_"
             >
               <span
                 class="align-top text-[0.8125rem]"
@@ -86,7 +86,7 @@ exports[`Radio Radio.Group renders radio in a grid group 1`] = `
           class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none [&&]:pt-0 [&&]:pb-0"
         >
           <label
-            class="PicassoFormControlLabel-root Radio-root Radio-labelWithRightSpacing"
+            class="inline-flex max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] items-start"
           >
             <span
               aria-disabled="false"
@@ -107,7 +107,7 @@ exports[`Radio Radio.Group renders radio in a grid group 1`] = `
               </span>
             </span>
             <span
-              class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label Radio-label"
+              class="inline-block leading-[1em] mb-0 text-graphite mt-[0.25em] max-w-[calc(100%_"
             >
               <span
                 class="align-top text-[0.8125rem]"
@@ -121,7 +121,7 @@ exports[`Radio Radio.Group renders radio in a grid group 1`] = `
           class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none [&&]:pt-0 [&&]:pb-0"
         >
           <label
-            class="PicassoFormControlLabel-root Radio-root Radio-labelWithRightSpacing"
+            class="inline-flex max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] items-start"
           >
             <span
               aria-disabled="false"
@@ -142,7 +142,7 @@ exports[`Radio Radio.Group renders radio in a grid group 1`] = `
               </span>
             </span>
             <span
-              class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label Radio-label"
+              class="inline-block leading-[1em] mb-0 text-graphite mt-[0.25em] max-w-[calc(100%_"
             >
               <span
                 class="align-top text-[0.8125rem]"
@@ -156,7 +156,7 @@ exports[`Radio Radio.Group renders radio in a grid group 1`] = `
           class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none [&&]:pt-0 [&&]:pb-0"
         >
           <label
-            class="PicassoFormControlLabel-root Radio-root Radio-labelWithRightSpacing"
+            class="inline-flex max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] items-start"
           >
             <span
               aria-disabled="false"
@@ -177,7 +177,7 @@ exports[`Radio Radio.Group renders radio in a grid group 1`] = `
               </span>
             </span>
             <span
-              class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label Radio-label"
+              class="inline-block leading-[1em] mb-0 text-graphite mt-[0.25em] max-w-[calc(100%_"
             >
               <span
                 class="align-top text-[0.8125rem]"
@@ -191,7 +191,7 @@ exports[`Radio Radio.Group renders radio in a grid group 1`] = `
           class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none [&&]:pt-0 [&&]:pb-0"
         >
           <label
-            class="PicassoFormControlLabel-root Radio-root Radio-labelWithRightSpacing"
+            class="inline-flex max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] items-start"
           >
             <span
               aria-disabled="false"
@@ -212,7 +212,7 @@ exports[`Radio Radio.Group renders radio in a grid group 1`] = `
               </span>
             </span>
             <span
-              class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label Radio-label"
+              class="inline-block leading-[1em] mb-0 text-graphite mt-[0.25em] max-w-[calc(100%_"
             >
               <span
                 class="align-top text-[0.8125rem]"
@@ -244,7 +244,7 @@ exports[`Radio Radio.Group renders radio in group 1`] = `
           class="box-border m-0 leading-none [&&]:pt-0 [&&]:pb-0"
         >
           <label
-            class="PicassoFormControlLabel-root Radio-root Radio-labelWithRightSpacing"
+            class="inline-flex max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] items-start"
           >
             <span
               aria-disabled="false"
@@ -265,7 +265,7 @@ exports[`Radio Radio.Group renders radio in group 1`] = `
               </span>
             </span>
             <span
-              class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label Radio-label"
+              class="inline-block leading-[1em] mb-0 text-graphite mt-[0.25em] max-w-[calc(100%_"
             >
               <span
                 class="align-top text-[0.8125rem]"
@@ -279,7 +279,7 @@ exports[`Radio Radio.Group renders radio in group 1`] = `
           class="box-border m-0 leading-none [&&]:pt-0 [&&]:pb-0"
         >
           <label
-            class="PicassoFormControlLabel-root Radio-root Radio-labelWithRightSpacing"
+            class="inline-flex max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] items-start"
           >
             <span
               aria-disabled="false"
@@ -300,7 +300,7 @@ exports[`Radio Radio.Group renders radio in group 1`] = `
               </span>
             </span>
             <span
-              class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label Radio-label"
+              class="inline-block leading-[1em] mb-0 text-graphite mt-[0.25em] max-w-[calc(100%_"
             >
               <span
                 class="align-top text-[0.8125rem]"
diff --git a/packages/base/Radio/src/Radio/styles.ts b/packages/base/Radio/src/Radio/styles.ts
index 0a37e70d41..1d9628ac6e 100644
--- a/packages/base/Radio/src/Radio/styles.ts
+++ b/packages/base/Radio/src/Radio/styles.ts
@@ -3,7 +3,6 @@ import { createStyles } from '@material-ui/core/styles'
 import { rem, outline, mix } from '@toptal/picasso-shared'
 import { PicassoProvider } from '@toptal/picasso-provider'
 
-const CONTROL_WIDTH = '1em'
 const CONTROL_MARGIN_RIGHT = '0.5em'
 const RADIO_VERTICAL_MARGIN = '0.25em'
 
@@ -142,10 +141,4 @@ export default ({ palette, sizes, transitions }: Theme) =>
       dotOpacity: 1,
       transition: `all ${transitions.duration.short}ms ${transitions.easing.easeInOut}`,
     }),
-    label: {
-      // 1px is needed for safari
-      maxWidth: `calc(100% - ${CONTROL_WIDTH} - ${CONTROL_MARGIN_RIGHT} + 1px)`,
-      marginTop: RADIO_VERTICAL_MARGIN,
-    },
-    labelWithRightSpacing: {},
   })
diff --git a/packages/base/Switch/src/Switch/__snapshots__/test.tsx.snap b/packages/base/Switch/src/Switch/__snapshots__/test.tsx.snap
index 18b113b4a2..8511892aa9 100644
--- a/packages/base/Switch/src/Switch/__snapshots__/test.tsx.snap
+++ b/packages/base/Switch/src/Switch/__snapshots__/test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Switch behaves correctly when interacting 1`] = `
 <label
-  class="PicassoFormControlLabel-root items-start text-lg"
+  class="inline-flex max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer items-start text-lg"
   data-testid="switch"
 >
   <span
@@ -22,7 +22,7 @@ exports[`Switch behaves correctly when interacting 1`] = `
     />
   </span>
   <span
-    class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label ml-[0.5em] mt-[0.25em] max-w-[calc(100%-1em"
+    class="inline-block leading-[1em] mb-0 text-graphite ml-[0.5em] mt-[0.25em] max-w-[calc(100%-1em"
   >
     <span
       class="align-top text-[0.8125rem]"
@@ -61,7 +61,7 @@ exports[`Switch renders default Switch without label 1`] = `
 
 exports[`Switch renders disabled state 1`] = `
 <label
-  class="PicassoFormControlLabel-root items-start text-lg PicassoFormControlLabel-disabled"
+  class="inline-flex max-w align-middle -webkit-tap-highlight-color mx-0 cursor-default items-start text-lg"
   data-testid="switch"
 >
   <span
@@ -82,7 +82,7 @@ exports[`Switch renders disabled state 1`] = `
     />
   </span>
   <span
-    class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label ml-[0.5em] mt-[0.25em] max-w-[calc(100%-1em"
+    class="inline-block leading-[1em] mb-0 text-graphite pointer-events ml-[0.5em] mt-[0.25em] max-w-[calc(100%-1em"
   >
     <span
       class="align-top text-[0.8125rem]"
diff --git a/packages/picasso-forms/src/Checkbox/__snapshots__/test.tsx.snap b/packages/picasso-forms/src/Checkbox/__snapshots__/test.tsx.snap
index 24da626bc7..14e354d61d 100644
--- a/packages/picasso-forms/src/Checkbox/__snapshots__/test.tsx.snap
+++ b/packages/picasso-forms/src/Checkbox/__snapshots__/test.tsx.snap
@@ -37,7 +37,7 @@ exports[`Form.Checkbox default render for checkboxes in a group 1`] = `
                 class="box-border m-0 leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]"
               >
                 <label
-                  class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
+                  class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
                 >
                   <span
                     class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -63,7 +63,7 @@ exports[`Form.Checkbox default render for checkboxes in a group 1`] = `
                     </span>
                   </span>
                   <span
-                    class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label PicassoCheckbox-label"
+                    class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
                   >
                     <span
                       class="align-top text-[0.8125rem]"
@@ -77,7 +77,7 @@ exports[`Form.Checkbox default render for checkboxes in a group 1`] = `
                 class="box-border m-0 leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]"
               >
                 <label
-                  class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
+                  class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
                 >
                   <span
                     class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -103,7 +103,7 @@ exports[`Form.Checkbox default render for checkboxes in a group 1`] = `
                     </span>
                   </span>
                   <span
-                    class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label PicassoCheckbox-label"
+                    class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
                   >
                     <span
                       class="align-top text-[0.8125rem]"
@@ -139,7 +139,7 @@ exports[`Form.Checkbox default render for single checkbox 1`] = `
           data-testid="single-checkbox"
         >
           <label
-            class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
+            class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
           >
             <span
               class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -166,7 +166,7 @@ exports[`Form.Checkbox default render for single checkbox 1`] = `
               </span>
             </span>
             <span
-              class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label PicassoCheckbox-label"
+              class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
             >
               <span
                 class="align-top text-[0.8125rem]"
@@ -199,7 +199,7 @@ exports[`Form.Checkbox required with asterisk single checkbox 1`] = `
           data-testid="single-checkbox"
         >
           <label
-            class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
+            class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
           >
             <span
               class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -226,7 +226,7 @@ exports[`Form.Checkbox required with asterisk single checkbox 1`] = `
               </span>
             </span>
             <span
-              class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label PicassoCheckbox-label"
+              class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
             >
               <span
                 class="align-top text-[0.8125rem]"
diff --git a/packages/picasso-forms/src/Radio/__snapshots__/test.tsx.snap b/packages/picasso-forms/src/Radio/__snapshots__/test.tsx.snap
index 632f4d1aa4..ba5dbc7c28 100644
--- a/packages/picasso-forms/src/Radio/__snapshots__/test.tsx.snap
+++ b/packages/picasso-forms/src/Radio/__snapshots__/test.tsx.snap
@@ -39,7 +39,7 @@ exports[`FormRadio renders 1`] = `
                 class="box-border m-0 leading-none [&&]:pt-0 [&&]:pb-0"
               >
                 <label
-                  class="PicassoFormControlLabel-root Radio-root Radio-labelWithRightSpacing"
+                  class="inline-flex max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] items-start"
                 >
                   <span
                     aria-disabled="false"
@@ -60,7 +60,7 @@ exports[`FormRadio renders 1`] = `
                     </span>
                   </span>
                   <span
-                    class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label Radio-label"
+                    class="inline-block leading-[1em] mb-0 text-graphite mt-[0.25em] max-w-[calc(100%_"
                   >
                     <span
                       class="align-top text-[0.8125rem]"
@@ -74,7 +74,7 @@ exports[`FormRadio renders 1`] = `
                 class="box-border m-0 leading-none [&&]:pt-0 [&&]:pb-0"
               >
                 <label
-                  class="PicassoFormControlLabel-root Radio-root Radio-labelWithRightSpacing"
+                  class="inline-flex max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] items-start"
                 >
                   <span
                     aria-disabled="false"
@@ -96,7 +96,7 @@ exports[`FormRadio renders 1`] = `
                     </span>
                   </span>
                   <span
-                    class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label Radio-label"
+                    class="inline-block leading-[1em] mb-0 text-graphite mt-[0.25em] max-w-[calc(100%_"
                   >
                     <span
                       class="align-top text-[0.8125rem]"
@@ -158,7 +158,7 @@ exports[`FormRadio required with asterisk 1`] = `
                 class="box-border m-0 leading-none [&&]:pt-0 [&&]:pb-0"
               >
                 <label
-                  class="PicassoFormControlLabel-root Radio-root Radio-labelWithRightSpacing"
+                  class="inline-flex max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] items-start"
                 >
                   <span
                     aria-disabled="false"
@@ -179,7 +179,7 @@ exports[`FormRadio required with asterisk 1`] = `
                     </span>
                   </span>
                   <span
-                    class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label Radio-label"
+                    class="inline-block leading-[1em] mb-0 text-graphite mt-[0.25em] max-w-[calc(100%_"
                   >
                     <span
                       class="align-top text-[0.8125rem]"
@@ -193,7 +193,7 @@ exports[`FormRadio required with asterisk 1`] = `
                 class="box-border m-0 leading-none [&&]:pt-0 [&&]:pb-0"
               >
                 <label
-                  class="PicassoFormControlLabel-root Radio-root Radio-labelWithRightSpacing"
+                  class="inline-flex max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] items-start"
                 >
                   <span
                     aria-disabled="false"
@@ -215,7 +215,7 @@ exports[`FormRadio required with asterisk 1`] = `
                     </span>
                   </span>
                   <span
-                    class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label Radio-label"
+                    class="inline-block leading-[1em] mb-0 text-graphite mt-[0.25em] max-w-[calc(100%_"
                   >
                     <span
                       class="align-top text-[0.8125rem]"