diff --git a/src/components/Radio.tsx b/src/components/Radio.tsx
new file mode 100644
index 0000000..0157cd3
--- /dev/null
+++ b/src/components/Radio.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+/**
+ * [*]This is a Radio component.
+ *
+ * [*]when you click on the label the radio will be selected
+ *
+ * [*] when you call this component pass the following:
+ * [1]. label
+ * [2]. id
+ * [3]. name
+ *
+ * [*] A good example will be:
+ * <Radio label=" Will Smith" id="one" name="radio" />
+ */
+type RadioProps = {
+  /**
+   * the text that will be shown besie the radio
+   */
+  label: string;
+  /**
+   * please provide a unique id
+   */
+  id: string;
+  /**
+   * The name of radio element
+   */
+  name: string;
+} & Omit<React.HTMLProps<HTMLInputElement>, "type">;
+
+const Radio = ({ label, id, name, ...props }: RadioProps) => {
+  return (
+    <div>
+      <input
+        className="hover:bg-sky-700 focus:bg-sky-900 active:bg-sky-300 "
+        type="Radio"
+        name={name}
+        value={label}
+        id={id}
+        {...props}
+      />
+      <label htmlFor={id}>{label}</label>
+    </div>
+  );
+};
+
+export default Radio;