diff --git a/docs/docs/components/radio.mdx b/docs/docs/components/radio.mdx
new file mode 100644
index 0000000..497d46f
--- /dev/null
+++ b/docs/docs/components/radio.mdx
@@ -0,0 +1,193 @@
+# Radio
+
+### Quick start
+
+Here's a quick start guide to get started with the Radio component, Radios are for selecting one option from many.
+
+### Importing Component
+
+import "@hover-design/react/dist/style.css";
+import { Radio, RadioGroup, Card } from "@hover-design/react";
+import {
+ RadioExample,
+ RadioGroupExample
+} from "@site/src/components/examples/RadioExample";
+
+export const RadioContainer = ({ children }) => (
+ {children}
+);
+
+```jsx
+import { Radio, RadioGroup } from "@hover-design/react";
+```
+
+### Code Snippets and Examples
+
+##### Simple Radio
+
+```jsx
+import { Radio, RadioGroup } from "@hover-design/react";
+
+const Demo = () => {
+ const [radioVal, setRadioVal] = useState("apple");
+
+ return (
+
+
+
+
+
+ );
+};
+```
+
+
+
+
+
+##### Radio Group
+
+```jsx
+
+
+
+
+
+```
+
+
+
+
+
+##### Radio with styles
+
+```jsx
+
+
+
+
+
+```
+
+
+
+
+
+
+
+### Radio Props Reference
+
+| Key | type | Optional? |
+| :------------- | :-----------------------------: | --------: |
+| value | `string;` | No |
+| name | `string;` | No |
+| radioSize | `xs` `sm` `md` `lg` `xl` string | Yes |
+| isDisabled | `boolean` | Yes |
+| baseStyles | `baseStyles object` | Yes |
+| disabledStyles | `disabledStyles object` | Yes |
+| selectedStyles | `selectedStyles object` | Yes |
+
+##### Customizing Radio Base, Selected and Disabled
+
+You can customize the base, selected and disabled styles of the radio by passing in the baseStyles, selectedStyles and disabledStyles props. Refer this Spec for this:
+
+baseStyles
+
+| Property | Description | Default |
+| --------------- | ------------------- | ------------------ |
+| backgroundColor | Background of Radio | rgb(250, 250, 250) |
+| borderColor | Border Color | rgb(204, 204, 204) |
+
+selectedStyles
+
+| Property | Description | Default |
+| --------------- | ------------------------------ | ------------------ |
+| backgroundColor | Selected Radio BackgroundColor | rgb(250, 250, 250) |
+| borderColor | Selected Border Color | rgb(204, 204, 204) |
+
+disabledStyles
+
+| Property | Description | Default |
+| --------------- | ------------------------------ | ------------------ |
+| color | Disabled Radio Color | rgb(250, 250, 250) |
+| backgroundColor | Disabled Radio BackgroundColor | rgb(250, 128, 5) |
+| borderColor | Disabled Radio Border Color | rgb(174, 68, 10) |
+
+### RadioGroup Props Reference
+
+| Key | type | Optional? |
+| :---------- | :-----------------------------: | --------: |
+| children | `React.ReactNode` | No |
+| spacing | `xs` `sm` `md` `lg` `xl` string | Yes |
+| orientation | `verticle` `horizontal` | Yes |
+| ref | `RefObject;` | Yes |
diff --git a/docs/src/components/examples/RadioExample.tsx b/docs/src/components/examples/RadioExample.tsx
new file mode 100644
index 0000000..7efcf43
--- /dev/null
+++ b/docs/src/components/examples/RadioExample.tsx
@@ -0,0 +1,61 @@
+import {
+ Radio,
+ RadioGroup,
+ TRadioGroupProps,
+ IRadioProps
+} from "@hover-design/react";
+
+import React, { useState } from "react";
+
+const RadioExample = (radioProps: Omit) => {
+ return ;
+};
+const RadioGroupExample = ({
+ radioGroupProps,
+ radioProps
+}: {
+ radioGroupProps: Omit;
+ radioProps: Omit;
+}) => {
+ const [radioVal, setRadioVal] = useState("apple");
+
+ console.log("radioGroupProps", radioGroupProps);
+
+ return (
+
+
+
+
+
+ );
+};
+
+export { RadioExample, RadioGroupExample };
diff --git a/examples/vanilla-extract-react/src/App.tsx b/examples/vanilla-extract-react/src/App.tsx
index 04145cd..a9f8405 100755
--- a/examples/vanilla-extract-react/src/App.tsx
+++ b/examples/vanilla-extract-react/src/App.tsx
@@ -1,4 +1,4 @@
-import { Button } from "@hover-design/react";
+import { Button, Radio, RadioGroup } from "@hover-design/react";
import { StyleWrapper } from "components/appWraper/StyleWrapper";
import { BreakpointsExample } from "components/breakpointsExample/BreakpointsExample";
import { ColorsPreview } from "components/colorsPreview/colorsPreview";
@@ -7,17 +7,17 @@ import FontSizePreview from "components/fontSizePreview/FontSizePreview";
import { Footer } from "components/footer/footer";
import { Header } from "components/header/header";
import { PageMain } from "components/pageMain/PageMain";
-import React from "react";
+import React, { useState } from "react";
import { fonts, fontSizes } from "styles/index.css";
import "styles/reset.css";
const App: React.FC = () => {
+ const [radioVal, setRadioVal] = useState("radio1");
return (
-
👋 Welcome to Hover Design System Example
Colors
diff --git a/lib/src/components/Radio/Radio.stories.tsx b/lib/src/components/Radio/Radio.stories.tsx
new file mode 100644
index 0000000..e986ec9
--- /dev/null
+++ b/lib/src/components/Radio/Radio.stories.tsx
@@ -0,0 +1,19 @@
+import { Radio } from ".";
+import type { Story } from "@ladle/react";
+import { IRadioProps } from "./radio.types";
+import { useRef } from "react";
+
+export const Controls: Story> = ({
+ ...nativeProps
+}) => {
+ return (
+ <>
+
+
+ );
+};
+
+Controls.args = {
+ disabled: false
+};
+Controls.argTypes = {};
diff --git a/lib/src/components/Radio/Radio.tsx b/lib/src/components/Radio/Radio.tsx
new file mode 100644
index 0000000..41e758e
--- /dev/null
+++ b/lib/src/components/Radio/Radio.tsx
@@ -0,0 +1,76 @@
+import React, { ForwardRefRenderFunction } from "react";
+import { IRadioProps } from "./radio.types";
+import {
+ radioWrapperClass,
+ radioCheckMarkClass,
+ radioThemeVars,
+ radioSizes,
+ radioThemeClass
+} from "./radio.styles.css";
+import "./radio.global.styles.css";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { eliminateUndefinedKeys } from "src/utils/object-utils";
+import { SvgDot } from "../_internal/Icons/SvgDot";
+
+const Radio: ForwardRefRenderFunction = (
+ {
+ className,
+ style,
+ value,
+ name,
+ checked,
+ radioSize = "xs",
+ isDisabled = false,
+ baseStyles,
+ disabledStyles,
+ selectedStyles,
+ ...nativeProps
+ },
+ ref
+) => {
+ const assignVariables = assignInlineVars(
+ eliminateUndefinedKeys({
+ [radioThemeVars.radioStyleSize]: radioSizes[radioSize]
+ ? radioSizes[radioSize]
+ : undefined,
+ [radioThemeVars.baseStyles.backgroundColor]: baseStyles?.backgroundColor,
+ [radioThemeVars.baseStyles.borderColor]: baseStyles?.borderColor,
+ [radioThemeVars.selectedStyles.backgroundColor]:
+ selectedStyles?.backgroundColor,
+ [radioThemeVars.selectedStyles.borderColor]: selectedStyles?.borderColor,
+ [radioThemeVars.selectedStyles.color]: selectedStyles?.color,
+ [radioThemeVars.disabledStyles.backgroundColor]:
+ disabledStyles?.backgroundColor,
+ [radioThemeVars.disabledStyles.borderColor]: disabledStyles?.borderColor
+ })
+ );
+
+ return (
+
+
+
+ {checked ? : null}
+
+