use parent events and value on checkbox

README.md

@@ -39,7 +39,8 @@ You can then use the following selector anywhere in your project:
 | property | Type  | Description |
 | --- | ---  | --- |
 | options | object | holds all toggle button style configurations |
-| isActive | false | holds the current boolean state of the button - can be `false` or `true` |
+| value | boolean | holds the current boolean state of the button - can be `false` or `true` (default is `false`) |
+| name | *(empty)* | name of the actual checkbox input (when unsed inside a form) |
 | handle | object | holds all handle style configurations |
 | track | object | holds all track style configurations |
 
@@ -63,12 +64,22 @@ You can then use the following selector anywhere in your project:
 
 ### events
 | Event Name | Returns | Description |
-| --- | ---  | --- |
-| **setIsActive** | `isActive` | Clicking the toggle button emits an its current `isActive` boolean state |
+| --- | ---  | --- |	
+| **change** | `(standard browser *change* event)` | When the element is :checked (by clicking or using the keyboard)  |
+| **input** | `(standard browser *input* event)` | When a user toggles the control, per the HTML5 specification  |
+| **focus** | `(standard browser *focus* event)` | when the input received focus  |
+
+
+All standard HTML <input> events (focus[in/out], blur, input, change, etc.) as you could put on any other standard input.
 
 Listening to the event e.g:
 ```html
-<vue-toggle-btn @isActive="myLocalSetterFunction($event)"></vue-toggle-btn>
+<vue-toggle-btn @input="myLocalSetterFunction($event)"></vue-toggle-btn>
+```
+
+If you prefer using v-model in your project for 2-way bindings between data and inputs, the component can also work with v-model e.g:
+```html
+<vue-toggle-btn v-model="myInput"></vue-toggle-btn>
 ```
 
 Feedback would be much appreciated, questions, suggestions, issues are more than welcome.

toggle-btn.vue

@@ -2,7 +2,7 @@
 	<!--Binding css variables to use as height/width of :before -> the slider -->
 	<div class="toggle-slider" :style="getStyleObject">
 		<label class="switch">
-			<input v-model="isActive" type="checkbox" @click="setNewToggleState">
+			<input :value="value" :name="name" v-on="$listeners" type="checkbox">
 			<span class="track">
 				<span class="handle"></span>
 			</span>
@@ -22,7 +22,11 @@ const PROP_KEYS = {
 };
 export default {
 	name: 'toggleButton',
-	props: ["options"],
+	props: {
+		options: Object,
+		value: Boolean,
+		name: String,
+	},
 	data() {
 		return {
 			handle: {
@@ -38,8 +42,7 @@ export default {
 				activeColor: '#2196F3', // optional
 				borderWidth: 0, // optional
 				borderRadius: '34px', // optional
-			},
-			isActive: true,
+			}
 		}
 	},
 	computed: {
@@ -97,20 +100,12 @@ export default {
 					this.setBindedProp('track', element);
 				});
 			}
-
-			if (this.options.isActive) {
-				this.isActive = this.options.isActive;
-			}
 		},
 		setBindedProp(key, propToBind) {
 			if (this.option[key][propToBind]) {
 				this[key][propToBind] = this.option[key][propToBind];
 			}
 		},
-		setNewToggleState() {
-			this.isActive = !this.isActive;
-			this.$emit('setIsActive', this.isActive);
-		}
 	},
 	created() {
 		this.setConfigData();