Finish basic ptt implemenation

src/input/Toggle.jsx

@@ -0,0 +1,36 @@
+import React, { useRef } from "react";
+import styles from "./Toggle.module.css";
+import { useToggleButton } from "@react-aria/button";
+import { useToggleState } from "@react-stately/toggle";
+import classNames from "classnames";
+import { Field } from "./Input";
+
+export function Toggle({ id, label, className, ...rest }) {
+  const buttonRef = useRef();
+  const state = useToggleState(rest);
+  const { buttonProps, isPressed } = useToggleButton(rest, state, buttonRef);
+
+  return (
+    <Field
+      className={classNames(
+        styles.toggle,
+        { [styles.on]: isPressed },
+        className
+      )}
+    >
+      <button
+        {...buttonProps}
+        ref={buttonRef}
+        id={id}
+        className={classNames(styles.button, {
+          [styles.isPressed]: isPressed,
+        })}
+      >
+        <div className={styles.ball} />
+      </button>
+      <label className={styles.label} htmlFor={id}>
+        {label}
+      </label>
+    </Field>
+  );
+}

src/input/Toggle.module.css

@@ -0,0 +1,46 @@
+.toggle {
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.button {
+  position: relative;
+  padding: 0;
+  transition: background-color 0.20s ease-out 0.1s;
+  width: 44px;
+  height: 24px;
+  border: none;
+  border-radius: 21px;
+  background-color: #6F7882;
+  cursor: pointer;
+  margin-right: 8px;
+}
+
+.ball {
+  transition: left 0.15s ease-out 0.1s;
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border-radius: 21px;
+  background-color: #15191E;
+  left: 2px;
+  top: 2px;
+}
+
+.label {
+  padding: 10px 8px;
+  line-height: 24px;
+  color: #6F7882;
+}
+
+.toggle.on .button {
+  background-color: #0DBD8B;
+}
+
+.toggle.on .ball {
+  left: 22px;
+}
+
+.toggle.on .label {
+  color: #ffffff;
+}