diff --git a/src/components/SettingsCheckbox/SettingsCheckbox.vue b/src/components/SettingsCheckbox/SettingsCheckbox.vue
index a536eaed7a..979b4575f1 100644
--- a/src/components/SettingsCheckbox/SettingsCheckbox.vue
+++ b/src/components/SettingsCheckbox/SettingsCheckbox.vue
@@ -20,11 +20,64 @@
   - along with this program. If not, see <http://www.gnu.org/licenses/>.
   -
   -->
+<docs>
+## One checkbox
+
+```vue
+	<template>
+		<div>
+			<settings-checkbox
+				label="some text"
+				v-model="status" />
+		</div>
+	</template>
+	<script>
+		export default {
+			data() {
+				return {
+					status: true
+				}
+			}
+		}
+	</script>
+```
+
+## Multiple checkboxes
+
+```vue
+
+	<template>
+		<div>
+			<span>Multiline message is:</span>>
+				<settings-checkbox
+					id="id"
+					v-model="selected"
+					:options="options"
+				>
+
+				</settings-checkbox>
+		</div>
+	</template>
+	<script>
+		export default {
+			data() {
+				return {
+					selected: [], // Must be an array reference
+					options: [
+						{ text: '', value: '' },
+					]
+				}
+			}
+		}
+	</script>
+```
+
+</docs>
 
 <template>
 	<div class="section">
 		<p>
-			<input :id="id" type="checkbox" class="checkbox">
+			<input :id="id" type="checkbox" class="checkbox"
 			:checked="inputVal" :disabled="disabled" @change="$emit('input', $event.target.checked)">
 			<label :for="id">{{ label }}</label><br>
 			<em v-if="hint !== ''">{{ hint }}</em>
@@ -33,7 +86,7 @@
 </template>
 
 <script>
-let uuid = 0
+import GenRandomId from 'Utils/GenRandomId'
 export default {
 	name: 'SettingsCheckbox',
 	props: {
@@ -61,7 +114,7 @@ export default {
 	},
 	computed: {
 		id() {
-			return 'settings-checkbox-' + this.uuid
+			return 'settings-checkbox-' + this.GenRandomId
 		}
 	},
 	watch: {
@@ -70,8 +123,8 @@ export default {
 		}
 	},
 	beforeCreate: function() {
-		this.uuid = uuid.toString()
-		uuid += 1
+		this.GenRandomId = GenRandomId.toString()
+		GenRandomId += 1
 	}
 }
 </script>