diff --git a/README.md b/README.md
index bf69776..00e5425 100644
--- a/README.md
+++ b/README.md
@@ -22,7 +22,8 @@ The block form emits a label wrapping the input element and any elements passed
 ```javascript
 <RadioButton
   @value="blue"
-  @groupValue=color
+  @groupValue={{this.color}}
+  @onBeforeChange={{fn (mut this.color)}}
   @changed={{this.colorChanged}}
 >
   <span>Blue</span>
@@ -44,6 +45,7 @@ If you want more control over the DOM, the non-block form only emits a single in
   @value="green"
   @groupValue={{this.color}}
   @name="colors"
+  @onBeforeChange={{fn (mut this.color)}}
   @changed={{this.colorChanged}}
 />
 
@@ -90,9 +92,10 @@ _Optional:_
 
 _Actions:_
 
-| name    | description                                                              |
-| ------- | ------------------------------------------------------------------------ |
-| changed | fires when user interaction causes a radio-button to update `groupValue` |
+| name    | description                                                              | optional |
+| ------- | ------------------------------------------------------------------------ |--------- |
+| changed | fires when user interaction causes a radio-button to update `groupValue` | true     |
+| onBeforeChange | mutate the passed prop i.e `groupValue` with selected radio value | false    |
 
 ## Installing
 
diff --git a/addon/components/radio-button-input.js b/addon/components/radio-button-input.js
index 7794161..d538450 100644
--- a/addon/components/radio-button-input.js
+++ b/addon/components/radio-button-input.js
@@ -15,7 +15,6 @@ export default class RadioButtonInputComponent extends Component {
 
   @action change() {
     if (this.args.groupValue !== this.args.value) {
-      // this.set('groupValue', value);
       once(this.args, 'changed', this.args.value);
     }
   }
diff --git a/addon/components/radio-button.js b/addon/components/radio-button.js
index fde7408..c8f427a 100644
--- a/addon/components/radio-button.js
+++ b/addon/components/radio-button.js
@@ -32,7 +32,13 @@ export default class RadioButtonComponent extends Component {
   }
 
   @action changed(newValue) {
-    let changedAction = this.args.changed;
+    let changedAction = this.args.changed,
+      onBeforeChangeAction = this.args.onBeforeChange;
+
+    //todo: make it required, instead of optional
+    if (onBeforeChangeAction) {
+      onBeforeChangeAction(newValue);
+    }
 
     // providing a closure action is optional
     if (changedAction) {
diff --git a/tests/integration/components/radio-button-test.js b/tests/integration/components/radio-button-test.js
index 99665df..8b39b8d 100644
--- a/tests/integration/components/radio-button-test.js
+++ b/tests/integration/components/radio-button-test.js
@@ -31,13 +31,13 @@ module('Integration | Components | Radio Button', function (hooks) {
     this.set('changed', (newValue) => {
       changedActionCallCount++;
       assert.strictEqual(newValue, 'component-value', 'updates groupValue');
-      this.set('groupValue', newValue);
     });
 
     await render(hbs`
       <RadioButton
         @groupValue={{this.groupValue}}
         @value='component-value'
+        @onBeforeChange={{fn (mut this.groupValue)}}
         @changed={{this.changed}}
       />
     `);