diff --git a/packages/components/src/Switch.tsx b/packages/components/src/Switch.tsx
index 803548edb..f8ffbdaf3 100644
--- a/packages/components/src/Switch.tsx
+++ b/packages/components/src/Switch.tsx
@@ -12,6 +12,7 @@ const SIZE = 18
 
 export interface SwitchProps
   extends Assign<React.ComponentPropsWithRef<'input'>, BoxOwnProps> {
+  labelPosition?: 'start' | 'end',
   label?: string
 }
 
@@ -23,7 +24,7 @@ export interface SwitchProps
  */
 export const Switch: ForwardRef<HTMLInputElement, SwitchProps> =
   React.forwardRef(function Switch(
-    { className, label, sx, variant = 'switch', ...rest },
+    { className, label, sx, labelPosition = 'end', variant = 'switch', ...rest },
     ref
   ) {
     const __css: ThemeUICSSObject = {
@@ -33,7 +34,6 @@ export const Switch: ForwardRef<HTMLInputElement, SwitchProps> =
       borderRadius: SIZE,
       height: SIZE + GUTTER * 2,
       width: SIZE * 2 + GUTTER * 2,
-      mr: 2,
       'input:disabled ~ &': {
         opacity: 0.5,
         cursor: 'not-allowed',
@@ -58,34 +58,45 @@ export const Switch: ForwardRef<HTMLInputElement, SwitchProps> =
       },
     }
 
+    // Inner really checkbox (but hidden)
+    const reallyHiddenCheckbox = (
+      <Box
+        ref={ref}
+        as="input"
+        type="checkbox"
+        aria-label={label}
+        {...rest}
+        sx={{
+          position: 'absolute',
+          opacity: 0,
+          zIndex: -1,
+          width: 1,
+          height: 1,
+          overflow: 'hidden',
+        }}
+        {...__internalProps({ __themeKey: 'forms' })}
+      />
+    );
+
+    // Switch just for show
+    const switchForShow = (
+      <Box
+        css={{ padding: GUTTER }}
+        variant={variant}
+        className={className}
+        sx={sx}
+        {...__internalProps({ __themeKey: 'forms', __css })}
+      >
+        <Box />
+      </Box>
+    );
+
     return (
-      <Label sx={{ cursor: 'pointer' }}>
-        <Box
-          ref={ref}
-          as="input"
-          type="checkbox"
-          aria-label={label}
-          {...rest}
-          sx={{
-            position: 'absolute',
-            opacity: 0,
-            zIndex: -1,
-            width: 1,
-            height: 1,
-            overflow: 'hidden',
-          }}
-          {...__internalProps({ __themeKey: 'forms' })}
-        />
-        <Box
-          css={{ padding: GUTTER }}
-          variant={variant}
-          className={className}
-          sx={sx}
-          {...__internalProps({ __themeKey: 'forms', __css })}
-        >
-          <Box />
-        </Box>
-        <span>{label}</span>
+      <Label sx={{ cursor: 'pointer', gap: 2 }}>
+        { labelPosition === 'start' && label ? <span>{label}</span> : null }
+        {reallyHiddenCheckbox}
+        {switchForShow}
+        { labelPosition === 'end' && label ? <span>{label}</span> : null }
       </Label>
     )
   })
diff --git a/packages/components/test/__snapshots__/index.tsx.snap b/packages/components/test/__snapshots__/index.tsx.snap
index fc540e978..514d31084 100644
--- a/packages/components/test/__snapshots__/index.tsx.snap
+++ b/packages/components/test/__snapshots__/index.tsx.snap
@@ -1390,6 +1390,324 @@ exports[`Switch renders 1`] = `
   display: -ms-flexbox;
   display: flex;
   cursor: pointer;
+  gap: 8px;
+}
+
+.emotion-1 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+  position: absolute;
+  opacity: 0;
+  z-index: -1;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.emotion-2 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+  position: relative;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  background-color: gray;
+  border-radius: 18px;
+  height: 22px;
+  width: 40px;
+  padding: 2px;
+}
+
+input:disabled~.emotion-2 {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.emotion-2>div {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-radius: 50%;
+  height: 18px;
+  width: 18px;
+  background-color: white;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  position: relative;
+  -webkit-transform: translateX(0%);
+  -moz-transform: translateX(0%);
+  -ms-transform: translateX(0%);
+  transform: translateX(0%);
+  -webkit-transition: -webkit-transform 240ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
+  transition: transform 240ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
+}
+
+input:checked~.emotion-2 {
+  background-color: primary;
+}
+
+input:checked~.emotion-2>div {
+  -webkit-transform: translateX(100%);
+  -moz-transform: translateX(100%);
+  -ms-transform: translateX(100%);
+  transform: translateX(100%);
+}
+
+.emotion-3 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+}
+
+<label
+  className="emotion-0"
+>
+  <input
+    className="emotion-1"
+    type="checkbox"
+  />
+  <div
+    className="emotion-2"
+  >
+    <div
+      className="emotion-3"
+    />
+  </div>
+</label>
+`;
+
+exports[`Switch renders width labelPosition end 1`] = `
+.emotion-0 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: pointer;
+  gap: 8px;
+}
+
+.emotion-1 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+  position: absolute;
+  opacity: 0;
+  z-index: -1;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.emotion-2 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+  position: relative;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  background-color: gray;
+  border-radius: 18px;
+  height: 22px;
+  width: 40px;
+  padding: 2px;
+}
+
+input:disabled~.emotion-2 {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.emotion-2>div {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-radius: 50%;
+  height: 18px;
+  width: 18px;
+  background-color: white;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  position: relative;
+  -webkit-transform: translateX(0%);
+  -moz-transform: translateX(0%);
+  -ms-transform: translateX(0%);
+  transform: translateX(0%);
+  -webkit-transition: -webkit-transform 240ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
+  transition: transform 240ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
+}
+
+input:checked~.emotion-2 {
+  background-color: primary;
+}
+
+input:checked~.emotion-2>div {
+  -webkit-transform: translateX(100%);
+  -moz-transform: translateX(100%);
+  -ms-transform: translateX(100%);
+  transform: translateX(100%);
+}
+
+.emotion-3 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+}
+
+<label
+  className="emotion-0"
+>
+  <input
+    aria-label="Are you OK? Hello!"
+    className="emotion-1"
+    type="checkbox"
+  />
+  <div
+    className="emotion-2"
+  >
+    <div
+      className="emotion-3"
+    />
+  </div>
+  <span>
+    Are you OK? Hello!
+  </span>
+</label>
+`;
+
+exports[`Switch renders width labelPosition start 1`] = `
+.emotion-0 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: pointer;
+  gap: 8px;
+}
+
+.emotion-1 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+  position: absolute;
+  opacity: 0;
+  z-index: -1;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.emotion-2 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+  position: relative;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  background-color: gray;
+  border-radius: 18px;
+  height: 22px;
+  width: 40px;
+  padding: 2px;
+}
+
+input:disabled~.emotion-2 {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.emotion-2>div {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-radius: 50%;
+  height: 18px;
+  width: 18px;
+  background-color: white;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  position: relative;
+  -webkit-transform: translateX(0%);
+  -moz-transform: translateX(0%);
+  -ms-transform: translateX(0%);
+  transform: translateX(0%);
+  -webkit-transition: -webkit-transform 240ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
+  transition: transform 240ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
+}
+
+input:checked~.emotion-2 {
+  background-color: primary;
+}
+
+input:checked~.emotion-2>div {
+  -webkit-transform: translateX(100%);
+  -moz-transform: translateX(100%);
+  -ms-transform: translateX(100%);
+  transform: translateX(100%);
+}
+
+.emotion-3 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+}
+
+<label
+  className="emotion-0"
+>
+  <span>
+    Thanks you! Thank you very much
+  </span>
+  <input
+    aria-label="Thanks you! Thank you very much"
+    className="emotion-1"
+    type="checkbox"
+  />
+  <div
+    className="emotion-2"
+  >
+    <div
+      className="emotion-3"
+    />
+  </div>
+</label>
+`;
+
+exports[`Switch renders with label 1`] = `
+.emotion-0 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: pointer;
+  gap: 8px;
 }
 
 .emotion-1 {
@@ -1416,7 +1734,6 @@ exports[`Switch renders 1`] = `
   border-radius: 18px;
   height: 22px;
   width: 40px;
-  margin-right: 8px;
   padding: 2px;
 }
 
@@ -1469,6 +1786,7 @@ input:checked~.emotion-2>div {
   className="emotion-0"
 >
   <input
+    aria-label="Hello"
     className="emotion-1"
     type="checkbox"
   />
@@ -1479,7 +1797,9 @@ input:checked~.emotion-2>div {
       className="emotion-3"
     />
   </div>
-  <span />
+  <span>
+    Hello
+  </span>
 </label>
 `;
 
diff --git a/packages/components/test/index.tsx b/packages/components/test/index.tsx
index 0b17c31bf..a70b3ee3e 100644
--- a/packages/components/test/index.tsx
+++ b/packages/components/test/index.tsx
@@ -499,4 +499,34 @@ describe('Switch', () => {
     )
     expect(json).toMatchSnapshot()
   })
+
+  test('renders with label', () => {
+    const json = renderJSON(
+      <ThemeUIProvider theme={theme}>
+        <Switch label="Hello" />
+      </ThemeUIProvider>
+    )
+    expect(json).toMatchSnapshot()
+  })
+
+  test('renders width labelPosition end', () => {
+    const json = renderJSON(
+      <ThemeUIProvider theme={theme}>
+        <Switch label="Are you OK? Hello!" labelPosition="end" />
+      </ThemeUIProvider>
+    )
+    expect(json).toMatchSnapshot()
+  })
+
+  test('renders width labelPosition start', () => {
+    const json = renderJSON(
+      <ThemeUIProvider theme={theme}>
+        <Switch
+          label="Thanks you! Thank you very much"
+          labelPosition="start"
+        />
+      </ThemeUIProvider>
+    )
+    expect(json).toMatchSnapshot()
+  })
 })
diff --git a/packages/docs/src/pages/components/switch.mdx b/packages/docs/src/pages/components/switch.mdx
index 118b14eea..7178cf027 100644
--- a/packages/docs/src/pages/components/switch.mdx
+++ b/packages/docs/src/pages/components/switch.mdx
@@ -2,6 +2,8 @@
 title: Switch
 ---
 
+import Note from '../../components/note.js'
+
 # Switch
 
 Form switch input component
@@ -42,8 +44,24 @@ To show different style based on the input state, you can use
 />
 ```
 
+## `labelPosition`
+
+By default, the switch comes first, with the label to the right of it. If you'd
+like to change the ordering, set the `labelPosition` prop to `"start"`, or the
+default value, `"end"`.
+
+```jsx live=true
+<Switch label="Use 24-Hour Time" labelPosition="start" />
+```
+
+```jsx live=true
+<Switch label="Auto-Correction" labelPosition="end" />
+```
+
 ## External label
 
+<Note>Try to use `labelPosition` prop rather than another Label layer.</Note>
+
 Even though the Switch component already renders a label, but you can also
 opt-in for an external label instead.
 
@@ -57,7 +75,8 @@ import { Box, Flex, Label, Switch } from 'theme-ui'
     justifyContent: 'space-between',
     alignItems: 'center',
     py: 4,
-  }}>
+  }}
+>
   <Label htmlFor="enable-email-alerts" sx={{ flex: 1 }}>
     Enable email alerts?
   </Label>