diff --git a/package.json b/package.json
index a0bcac44..77d8cc97 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
{
- "version": "1.4.2",
+ "version": "1.5.0",
"license": "MIT",
"main": "dist/index.js",
"typings": "dist/index.d.ts",
diff --git a/src/radio/RadioGroup.tsx b/src/radio/RadioGroup.tsx
index 1c9906dc..515e5ebe 100644
--- a/src/radio/RadioGroup.tsx
+++ b/src/radio/RadioGroup.tsx
@@ -24,6 +24,10 @@ export interface RadioGroupProps {
* (Optional) For labelling the radio options
*/
label?: string;
+ /**
+ * The controlled value of the radio group
+ */
+ value?: string | null;
/**
* Matches the `value` option of one of the Radio Children components
*/
diff --git a/stories/Radio.stories.tsx b/stories/Radio.stories.tsx
index 99922a44..8af051be 100644
--- a/stories/Radio.stories.tsx
+++ b/stories/Radio.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
import { Meta, Story } from '@storybook/react';
import { Radio, RadioGroup, RadioGroupProps } from '../src/radio';
import { Card, Text, ActionButton } from '../src';
@@ -12,24 +12,25 @@ const meta: Meta = {
},
design: {
type: 'figma',
- url: 'https://www.figma.com/file/Gs8BthCViFvipFh0gknwgg/Drift-Monitors?node-id=90%3A44',
+ url:
+ 'https://www.figma.com/file/Gs8BthCViFvipFh0gknwgg/Drift-Monitors?node-id=90%3A44',
},
},
};
export default meta;
const DefaultChildren = [
- ,
- ,
- ,
+ ,
+ ,
+ ,
];
-const Template: Story = (args) => {
+const Template: Story = args => {
return (
alert('clicked radio option ' + value)}
+ onChange={value => alert('clicked radio option ' + value)}
>
{args.children || DefaultChildren}
@@ -38,11 +39,11 @@ const Template: Story = (args) => {
);
};
-const SelectorExample: Story = (args) => (
+const SelectorExample: Story = args => (
alert('clicked radio option ' + value)}
+ onChange={value => alert('clicked radio option ' + value)}
>
Dogs
@@ -86,18 +87,48 @@ const SomeChildren = () => (
>
);
-export const Gallery: Story = (args) => {
+export const Gallery: Story = args => {
return (
-
-
- {args.children || DefaultChildren}
-
-
-
-
- {args.children || DefaultChildren}
-
-
+
+
+
+ {args.children || DefaultChildren}
+
+
+
+
+ {args.children || DefaultChildren}
+
+
+
+ );
+};
+
+/**
+ * Controlled Radio Group
+ * Use this to control the selected value of the radio group via props
+ */
+export const Controlled: Story = args => {
+ const [value, setValue] = useState('cats');
+ return (
+
+ Controlled Radio Group
+
+
+ {args.children || DefaultChildren}
+
+
+
+
+ {args.children || DefaultChildren}
+
+
+
);
};