From 38f1aeda31466f17c170701537d3efb6b7c9dae2 Mon Sep 17 00:00:00 2001
From: Victoire Stahl <91953020+Vico4@users.noreply.github.com>
Date: Thu, 2 Feb 2023 11:42:48 +0100
Subject: [PATCH] fix: checkbox/radio alignment with long text label (#1898)

---
 packages/Field/styles.ts | 13 ++++++++++---
 packages/Radio/styles.ts |  6 +++++-
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/Field/styles.ts b/packages/Field/styles.ts
index 7e3c76612c..945ffa8adf 100644
--- a/packages/Field/styles.ts
+++ b/packages/Field/styles.ts
@@ -15,7 +15,12 @@ const columnStyles = css`
 
 const checkableFieldStyles = css`
   ${th('defaultFields.checkablelabel.default')};
-  margin-bottom: xs;
+  align-items: flex-start;
+  overflow-wrap: break-word;
+
+  input {
+    margin-top: xs;
+  }
 `
 
 type StyledFieldProps = {
@@ -33,11 +38,13 @@ export const Field = styled('div').withConfig({ shouldForwardProp })<StyledField
     ${StyledLabel} {
       ${flexDirection === 'row' && rowStyles};
       ${flexDirection === 'column' && !isCheckable && columnStyles};
-      ${isCheckable && !withHintText && checkableFieldStyles};
+      ${isCheckable && checkableFieldStyles};
+      ${isCheckable && withHintText && th('defaultFields.checkablelabel.default')}
       ${checked && th('defaultFields.checkablelabel.checked')}
+      margin-bottom: ${!withHintText && 'xs'}
     }
     ${StyledHint} {
-      ${isCheckable && withHintText && checkableFieldStyles};
+      margin-bottom: ${isCheckable && 'xxs'};
     }
     ${system};
   `
diff --git a/packages/Radio/styles.ts b/packages/Radio/styles.ts
index 2f3e9c9493..480ce47357 100644
--- a/packages/Radio/styles.ts
+++ b/packages/Radio/styles.ts
@@ -77,6 +77,10 @@ export const Input = styled.div`
 
 export const Wrapper = styled(Box)`
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: sm;
+
+  input {
+    margin-top: xs;
+  }
 `