chore: add a Toggle component

1 files changed, 69 insertions, 0 deletions

diff --git a/src/components/atoms/forms/toggle.tsx b/src/components/atoms/forms/toggle.tsx
new file mode 100644
index 0000000..e8e8c0f
--- /dev/null
+++ b/src/components/atoms/forms/toggle.tsx
@@ -0,0 +1,69 @@
+import { FC, ReactElement } from 'react';
+import styles from './toggle.module.scss';
+
+export type ToggleChoices = {
+  left: ReactElement | string;
+  right: ReactElement | string;
+};
+
+export type ToggleProps = {
+  /**
+   * The toggle choices.
+   */
+  choices: ToggleChoices;
+  /**
+   * The input id.
+   */
+  id: string;
+  /**
+   * The toggle label.
+   */
+  label: string;
+  /**
+   * The input name.
+   */
+  name: string;
+  /**
+   * The toggle value. True if checked.
+   */
+  value: boolean;
+  /**
+   * A callback function to update the toggle value.
+   */
+  setValue: (value: boolean) => void;
+};
+
+/**
+ * Toggle component
+ *
+ * Render a toggle with a label and two choices.
+ */
+const Toggle: FC<ToggleProps> = ({
+  choices,
+  id,
+  label,
+  name,
+  value,
+  setValue,
+}) => {
+  return (
+    <>
+      <input
+        type="checkbox"
+        name={name}
+        id={id}
+        checked={value}
+        onChange={() => setValue(!value)}
+        className={styles.checkbox}
+      />
+      <label htmlFor={id} className={styles.label}>
+        <span className={styles.title}>{label}</span>
+        {choices.left}
+        <span className={styles.toggle}></span>
+        {choices.right}
+      </label>
+    </>
+  );
+};
+
+export default Toggle;