diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index 280e4827..83ca7345 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -148,13 +148,8 @@
         class="value-input"
         @input="updateSetting($event, settingGroup.group, settingGroup.key, setting.key)"/>
     </div>
-    <div v-if="settingGroup.group === ':auto_linker' && (setting.key === ':class' || setting.key === ':rel')">
-      <el-switch :value="autoLinkerBooleanValue(setting.key)" @change="processAutoLinker($event, 'auto_linker', 'opts', 'class')"/>
-      <el-input v-if="autoLinkerBooleanValue(setting.key)" :value="autoLinkerStringValue(setting.key)" @input="processAutoLinker($event, settingGroup.key, ':opts', setting.key)"/>
-    </div>
-    <div v-if="settingGroup.group === ':auto_linker' && (setting.key === ':truncate')">
-      <el-switch :value="autoLinkerBooleanValue(setting.key)" @change="processAutoLinker($event, 'auto_linker', 'opts', 'class')"/>
-      <el-input-number v-if="autoLinkerBooleanValue(setting.key)" :value="autoLinkerIntegerValue(setting.key)" @input="processAutoLinker($event, settingGroup.key, ':opts', setting.key)"/>
+    <div v-if="settingGroup.group === ':auto_linker'">
+      <auto-linker-input :setting-group="settingGroup" :setting="setting" :data="data"/>
     </div>
     <div v-if="setting.key === ':mascots'">
       <div v-for="([name, url, mimeType], index) in mascotsValue" :key="index" class="mascot-container">
@@ -192,11 +187,13 @@
 import AceEditor from 'vue2-ace-editor'
 import 'brace/mode/elixir'
 import 'default-passive-events'
+import AutoLinkerInput from './inputComponents/AutoLinkerInput'
 
 export default {
   name: 'Inputs',
   components: {
-    editor: AceEditor
+    editor: AceEditor,
+    AutoLinkerInput
   },
   props: {
     customLabelWidth: {
@@ -328,18 +325,6 @@ export default {
       }, {})
       this.updateSetting({ ...updatedValue, '': { url: '', mime_type: '' }}, this.settingGroup.group, 'assets', 'mascots')
     },
-    autoLinkerBooleanValue(key) {
-      const value = this.data[this.setting.key]
-      return typeof value === 'string' || typeof value === 'number'
-    },
-    autoLinkerIntegerValue(key) {
-      const value = this.data[this.setting.key]
-      return value || 0
-    },
-    autoLinkerStringValue(key) {
-      const value = this.data[this.setting.key]
-      return value || ''
-    },
     deleteEditableKeywordRow(index) {
       const filteredValues = this.editableKeywordData(this.data).filter((el, i) => index !== i)
       const updatedValue = filteredValues.reduce((acc, el, i) => {
@@ -413,8 +398,6 @@ export default {
         this.updateSetting(valueToSend, this.settingGroup.group, 'rate_limit', input)
       }
     },
-    processAutoLinker(value, tab, inputName, childName) {
-    },
     processNestedData(value, group, key, parentInput, parentType, childInput, childType) {
       const valueExists = value => value[group] && value[group][key] && value[group][key][parentInput]
       const updatedValueForState = valueExists(this.settings)
diff --git a/src/views/settings/components/inputComponents/AutoLinkerInput.vue b/src/views/settings/components/inputComponents/AutoLinkerInput.vue
new file mode 100644
index 00000000..0a305f9b
--- /dev/null
+++ b/src/views/settings/components/inputComponents/AutoLinkerInput.vue
@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <div v-if="setting.key === ':class' || setting.key === ':rel'">
+      <el-switch :value="autoLinkerBooleanValue(setting.key)" @change="processTwoTypeValue($event, setting.key)"/>
+      <el-input v-if="autoLinkerBooleanValue(setting.key)" :value="autoLinkerStringValue(setting.key)" @input="processTwoTypeValue($event, setting.key)"/>
+    </div>
+    <div v-if="setting.key === ':truncate'">
+      <el-switch :value="autoLinkerBooleanValue(setting.key)" @change="processTwoTypeValue($event, setting.key)"/>
+      <el-input-number v-if="autoLinkerBooleanValue(setting.key)" :value="autoLinkerIntegerValue(setting.key)" @input="processTwoTypeValue($event, setting.key)"/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AutoLinkerInput',
+  props: {
+    data: {
+      type: Object || Array,
+      default: function() {
+        return {}
+      }
+    },
+    setting: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    },
+    settingGroup: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  computed: {},
+  methods: {
+    autoLinkerBooleanValue(key) {
+      const value = this.data[this.setting.key]
+      return typeof value === 'string' || typeof value === 'number'
+    },
+    autoLinkerIntegerValue(key) {
+      const value = this.data[this.setting.key]
+      return value || 0
+    },
+    autoLinkerStringValue(key) {
+      const value = this.data[this.setting.key]
+      return value || ''
+    },
+    processTwoTypeValue(value, input) {
+      if (value === true) {
+        const data = input === ':truncate' ? 0 : ''
+        this.updateSetting(data, this.settingGroup.group, this.settingGroup.key, input, this.setting.type)
+      } else {
+        this.updateSetting(value, this.settingGroup.group, this.settingGroup.key, input, this.setting.type)
+      }
+    },
+    updateSetting(value, group, key, input, type) {
+      this.$store.dispatch('UpdateSettings', { group, key, input, value, type })
+      this.$store.dispatch('UpdateState', { group, key, input, value })
+    }
+  }
+}
+</script>
+
+<style rel='stylesheet/scss' lang='scss'>
+@import '../../styles/main';
+@include settings
+</style>