diff --git a/src/components/inputs/Radio.stories.jsx b/src/components/inputs/Radio.stories.jsx
new file mode 100644
index 0000000..23816a7
--- /dev/null
+++ b/src/components/inputs/Radio.stories.jsx
@@ -0,0 +1,42 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Radio } from "./Radio"
+import { Box } from "../panels/Box"
+import { BaseElement } from "../BaseElement"
+
+
+export default {
+ component: Radio,
+ title: "Inputs/Radio",
+ decorators: [Decorators.Bluelib],
+ argTypes: {
+ customColor: {
+ control: {type: "color"},
+ },
+ },
+}
+
+
+export const Default = props => (
+
+)
+
+
+
+export const ThreeRadios = props => (
+
+
+ Articuno
+
+
+ Zapdos
+
+
+ Moltres
+
+
+)
+ThreeRadios.args = {
+ name: "example"
+}
diff --git a/src/components/inputs/Radio.tsx b/src/components/inputs/Radio.tsx
new file mode 100644
index 0000000..d31cfca
--- /dev/null
+++ b/src/components/inputs/Radio.tsx
@@ -0,0 +1,41 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Types from "../../types"
+import {BaseElement} from "../BaseElement"
+import mergeClassNames from "classnames"
+
+
+interface RadioProps {
+ disabled?: boolean,
+
+ onChange?: (checked: string) => boolean,
+
+ name: string,
+ value: string,
+
+ [props: string]: any,
+}
+
+
+export function Radio({onChange, ...props}: RadioProps): JSX.Element {
+ props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "input", "input-radio")
+
+ const onChangeWrapper = React.useCallback(
+
+ (event: React.ChangeEvent): boolean => {
+ const checked = event.target.value
+
+ if(onChange) {
+ return onChange(checked)
+ }
+
+ return false
+ },
+
+ [onChange]
+ )
+
+ return (
+
+ )
+}