diff --git a/src/atoms/Radio.js b/src/atoms/Radio.js
index 17cdb80d463031563c9173a0d814b1104a352b3d..034bb6ee22a1b10f67bd476c4d913c3a262e3d02 100644
--- a/src/atoms/Radio.js
+++ b/src/atoms/Radio.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import classes from './Radio.local.css'
 
-const Radio = ({ name, value, label, checked, required }) => (
+const Radio = ({ name, value, label, checked, required, onChange }) => (
   <label className={classes.root}>
     <input
       className={classes.input}
@@ -9,7 +9,8 @@ const Radio = ({ name, value, label, checked, required }) => (
       name={name}
       value={value}
       checked={checked}
-      required={required}/>
+      required={required}
+      onChange={onChange}/>
     {label}
   </label>
 )
diff --git a/src/atoms/Radio.md b/src/atoms/Radio.md
index 0304a7435f87b44fc3a6ae9167363dc8ab2f81fb..21bfdb8e306bc2cebe022a9815c22dc878d18334 100644
--- a/src/atoms/Radio.md
+++ b/src/atoms/Radio.md
@@ -10,7 +10,7 @@ A checked radio button.
 
 ```js
 <Radio 
-  name="bar" 
+  name="radio-bar" 
   checked 
   onChange={event => console.log(event.target.value)}/>
 ```
@@ -19,7 +19,7 @@ A radio button with a label.
 
 ```js
 <Radio 
-  name="foo" 
+  name="radio-foo" 
   label="Foo"
   onChange={event => console.log(event.target.value)}/>
 ```
diff --git a/src/index.js b/src/index.js
index 370bfa72d3e97a6ccb8c547bf623a38d19065ac4..9df53c4380825068afd5c752c8a274b3d2301511 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,5 @@
 export { default as Menu } from './atoms/Menu'
+export { default as Radio } from './atoms/Radio'
 export { default as Tags } from './atoms/Tags'
 export { default as AppBar } from './molecules/AppBar'
 export { default as YesOrNo } from './molecules/YesOrNo'
diff --git a/src/molecules/RadioGroup.js b/src/molecules/RadioGroup.js
index b5e3fac3de232bb7486b9fa61719f07036940b52..a3d7a7937fb429696ee50ab7c7406de1118d77e2 100644
--- a/src/molecules/RadioGroup.js
+++ b/src/molecules/RadioGroup.js
@@ -1,18 +1,42 @@
 import React from 'react'
 import Radio from '../atoms/Radio'
 
-const RadioGroup = ({ name, value, options, required }) => (
-  <div>
-    {options.map(option => (
-      <Radio
-        key={option.value}
-        name={name}
-        required={required}
-        value={option.value}
-        label={option.label}
-        checked={option.value === value}/>
-    ))}
-  </div>
-)
+class RadioGroup extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      value: props.value
+    }
+  }
+
+  handleChange = event => {
+    this.setState({
+      value: event.target.value
+    })
+
+    this.props.onChange(event)
+  }
+
+  render () {
+    const { name, options, required } = this.props
+    const { value } = this.state
+
+    return (
+      <div>
+        {options.map(option => (
+          <Radio
+            key={option.value}
+            name={name}
+            required={required}
+            value={option.value}
+            label={option.label}
+            checked={option.value === value}
+            onChange={this.handleChange}/>
+        ))}
+      </div>
+    )
+  }
+}
 
 export default RadioGroup
diff --git a/src/molecules/RadioGroup.md b/src/molecules/RadioGroup.md
index eab7df696c5cdbddd10f828b65ab1b7f2411c4e6..67acc7c45debe197bc6031afe6e5aca4bb684ac0 100644
--- a/src/molecules/RadioGroup.md
+++ b/src/molecules/RadioGroup.md
@@ -1,8 +1,6 @@
 A group of radio buttons.
 
 ```js
-initialState = { foo: undefined };
-
 const options = [
   {
     value: 'one',
@@ -20,7 +18,6 @@ const options = [
 
 <RadioGroup 
   options={options} 
-  name="foo"
-  value={state.foo} 
-  handleChange={event => setState({ foo: event.target.value })}/>
+  name="radiogroup-foo"
+  onChange={event => console.log(event.target.value)}/>
 ```
diff --git a/src/molecules/YesOrNo.js b/src/molecules/YesOrNo.js
index 2ec0274ea3782a96de676588b86b092c366f805e..206f20fa0ec4eeb5488cbe773462d9440909aafe 100644
--- a/src/molecules/YesOrNo.js
+++ b/src/molecules/YesOrNo.js
@@ -13,12 +13,14 @@ const options = [
   }
 ]
 
-const YesOrNo = ({ name, value }) => (
+const YesOrNo = ({ name, value, required, onChange }) => (
   <RadioGroup
     className={classes.root}
     name={name}
     options={options}
-    value={value}/>
+    value={value}
+    required={required}
+    onChange={onChange}/>
 )
 
 export default YesOrNo
diff --git a/src/molecules/YesOrNo.md b/src/molecules/YesOrNo.md
index 4f6cb070e9c1c4b0c1647b0ae15d8c335402fa58..1feb069fade39daf19e2dbf023b747a4d8fcacb7 100644
--- a/src/molecules/YesOrNo.md
+++ b/src/molecules/YesOrNo.md
@@ -1,10 +1,17 @@
 A group of radio buttons that provides just two options: "Yes" or "No"
 
 ```js
-initialState = { foo: undefined };
+<YesOrNo
+  name="yesorno" 
+  onChange={event => console.log(event.target.value)}/>
+```
+
+If a value is set, one option is selected.
 
+```js
 <YesOrNo
-  name="foo" 
-  value={state.foo} 
-  onChange={event => setState({ foo: event.target.value })}/>
+  name="yesorno-value" 
+  value="yes"
+  onChange={event => console.log(event.target.value)}/>
 ```
+