diff --git a/internal/Navigation/Navigation.js b/internal/Navigation/Navigation.js
index e194392..1a1e7ab 100644
--- a/internal/Navigation/Navigation.js
+++ b/internal/Navigation/Navigation.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import Link from 'next/link'
+import Link from 'next/link';
 import styles from './Navigation.module.css';
 
 const pages = [
@@ -23,12 +23,13 @@ const pages = [
   'payment',
   'radio',
   'select',
+  'switch',
   'tag',
   'tag-input',
   'table',
   'tooltip',
   'typography',
-]
+];
 
 const Navigation = () => (
   <div className={styles.navigation}>
diff --git a/package-lock.json b/package-lock.json
index e3549c3..2dce0ea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@macpaw/macpaw-ui",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@macpaw/macpaw-ui",
-      "version": "4.0.0",
+      "version": "4.1.0",
       "license": "MIT",
       "dependencies": {
         "react-toastify": "^7.0.4"
@@ -37,8 +37,8 @@
       },
       "peerDependencies": {
         "clsx": "^1.1.1",
-        "react": "^17.0.0",
-        "react-dom": "^17.0.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0",
         "react-transition-group": "^4.4.0"
       }
     },
diff --git a/package.json b/package.json
index 9a205d8..092d615 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@macpaw/macpaw-ui",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "main": "lib/ui.js",
   "scripts": {
     "dev": "next -p 1234",
diff --git a/pages/switch.mdx b/pages/switch.mdx
new file mode 100644
index 0000000..ab3bb83
--- /dev/null
+++ b/pages/switch.mdx
@@ -0,0 +1,55 @@
+import { Switch, FormRow } from '../src/ui';
+
+# Switch
+
+<FormRow variety>
+  <h3>Default</h3>
+  <Switch />
+</FormRow>
+
+<FormRow variety>
+  <h3>Disabled</h3>
+  <Switch disabled />
+</FormRow>
+
+<FormRow variety>
+  <h3>Error</h3>
+  <Switch error>Some label</Switch>
+</FormRow>
+
+<FormRow variety>
+  <h3>With handler</h3>
+  <Switch onChange={() => alert('Value is change')} />
+</FormRow>
+
+<FormRow variety>
+  <h3>With Label</h3>
+  <Switch>change settings</Switch>
+</FormRow>
+
+```
+<FormRow variety>
+  <h3>Default</h3>
+  <Switch />
+</FormRow>
+
+<FormRow variety>
+  <h3>Disabled</h3>
+  <Switch disabled />
+</FormRow>
+
+<FormRow variety>
+  <h3>Error</h3>
+  <Switch error />
+</FormRow>
+
+<FormRow variety>
+  <h3>With handler</h3>
+  <Switch onChange={() => alert('Value is change')} />
+</FormRow>
+
+<FormRow variety>
+  <h3>With Label</h3>
+  <Switch>change settings</Switch>
+</FormRow>
+```
diff --git a/src/Switch/Switch.scss b/src/Switch/Switch.scss
new file mode 100644
index 0000000..4b3b332
--- /dev/null
+++ b/src/Switch/Switch.scss
@@ -0,0 +1,72 @@
+.switch {
+  display: inline-flex;
+  position: relative;
+  user-select: none;
+  align-items: center;
+
+  &.-error {
+    color: var(--color-error);
+
+    .switch-track {
+      box-shadow: 0 0 0 2px var(--color-error);
+    }
+  }
+
+  input {
+    position: absolute;
+    opacity: 0;
+    z-index: 1;
+    cursor: pointer;
+    width: 106%;
+    height: 106%;
+    margin: 0;
+    left: -3%;
+    top: -3%;
+
+    &:checked + .switch-track {
+      background-color: var(--color-primary);
+    }
+
+    &:checked + .switch-track .switch-thumb {
+      transform: translateX(16px);
+    }
+
+    &:focus + .switch-track {
+      border-color: var(--color-secondary);
+      box-shadow: 0 0 0 3px var(--color-outline);
+    }
+
+    &[disabled] {
+      cursor: not-allowed;
+    }
+
+    &[disabled] + .switch-track {
+      background-color: var(--color-black-16);
+    }
+  }
+
+  .switch-track {
+    width: 32px;
+    height: 16px;
+    border-radius: 10px;
+    background-color: var(--color-black-16);
+    position: relative;
+    display: inline-flex;
+    transition: 0.1s background-color ease-in-out;
+
+    & + * {
+      margin-left: 8px;
+    }
+  }
+
+  .switch-thumb {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: var(--color-white);
+    display: inline-flex;
+    margin: 2px;
+    transform: translateX(0);
+    transition: 0.1s transform ease-in-out;
+  }
+}
diff --git a/src/Switch/Switch.tsx b/src/Switch/Switch.tsx
new file mode 100644
index 0000000..b72415e
--- /dev/null
+++ b/src/Switch/Switch.tsx
@@ -0,0 +1,22 @@
+import React, { FC, InputHTMLAttributes, PropsWithChildren } from 'react';
+import cx from 'clsx';
+
+export interface SwitchProps extends InputHTMLAttributes<HTMLInputElement> {
+  error?: boolean;
+}
+
+const Switch: FC<PropsWithChildren<SwitchProps>> = (props) => {
+  const { className, style, children, error, ...other } = props;
+
+  return (
+    <span className={cx('switch', className, error && '-error')} style={style}>
+      <input type="checkbox" {...other} />
+      <span className="switch-track">
+        <span className="switch-thumb" />
+      </span>
+      {!!children && <span>{children}</span>}
+    </span>
+  );
+};
+
+export default Switch;
diff --git a/src/ui.js b/src/ui.js
index 1e6dabd..c45b78d 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -37,3 +37,4 @@ export { default as Table } from './Table/Table';
 export { default as Tooltip } from './Tooltip/Tooltip';
 export { default as TableRow } from './TableRow/TableRow';
 export { default as TagInput, TagInputListItem } from './TagInput/TagInput';
+export { default as Switch } from './Switch/Switch';
diff --git a/src/ui.scss b/src/ui.scss
index d55bc17..3dc525f 100644
--- a/src/ui.scss
+++ b/src/ui.scss
@@ -36,3 +36,4 @@
 @import './Tooltip/Tooltip.scss';
 @import './Typography/Typography.scss';
 @import './TagInput/TagInput.scss';
+@import './Switch/Switch.scss';