diff --git a/src/documentation/DocsPage.vue b/src/documentation/DocsPage.vue
index 0cf425b..e9fa31d 100644
--- a/src/documentation/DocsPage.vue
+++ b/src/documentation/DocsPage.vue
@@ -131,5 +131,24 @@ const componentVersion = ref(packageInfo.version);
 provide('classes', classes);
 </script>
 
+<style lang="scss" scoped>
+:deep(code) {
+	&.ic {
+		background-color: rgba(255, 255, 255, 0.1) !important;
+		border-radius: 3px;
+		font-size: 85%;
+		font-weight: normal;
+		padding: 0.2em 0.4em;
+	}
+}
+</style>
+
 <style lang="scss">
+.v-theme--light {
+	code {
+		&.ic {
+			background-color: rgba(0, 0, 0, 0.1) !important;
+		}
+	}
+}
 </style>
diff --git a/src/documentation/components/CheckboxComponent.vue b/src/documentation/components/CheckboxComponent.vue
index e296b1a..49a51c5 100644
--- a/src/documentation/components/CheckboxComponent.vue
+++ b/src/documentation/components/CheckboxComponent.vue
@@ -25,8 +25,8 @@
 						<VInlineCheckbox
 							v-model="values.boolean"
 							:density="density"
-							do-not-save
 							hide-details
+							:loading-wait="false"
 						/>
 					</v-col>
 
@@ -52,7 +52,7 @@
 			:items="propsStore.vInlineCheckboxProps"
 			section-id="inline-checkbox-props"
 			section-title="Props"
-			subtitle="These are all props for the <code>VInlineCheckbox</code> component"
+			subtitle="These are all props for the <code class='ic'>VInlineCheckbox</code> component"
 		/>
 	</v-col>
 </template>
diff --git a/src/documentation/components/SelectComponent.vue b/src/documentation/components/SelectComponent.vue
index c012a2d..48dc3a4 100644
--- a/src/documentation/components/SelectComponent.vue
+++ b/src/documentation/components/SelectComponent.vue
@@ -26,10 +26,11 @@
 							v-model="values.select"
 							align-items="flex-end"
 							:density="density"
-							do-not-save
 							item-title="state"
 							item-value="abbr"
 							:items="items"
+							:loading-wait="false"
+							return-object
 							:table-field="false"
 							:variant="variant"
 						>
@@ -64,7 +65,7 @@
 			:items="propsStore.vInlineSelectProps"
 			section-id="inline-select-props"
 			section-title="Props"
-			subtitle="These are all props for the <code>VInlineSelect</code> component"
+			subtitle="These are all props for the <code class='ic'>VInlineSelect</code> component"
 		/>
 	</v-col>
 </template>
@@ -83,17 +84,13 @@ const variant = ref('underlined');
 const values = reactive({
 	boolean: true,
 	select: {
-		abbr: 'FL',
-		state: 'Florida',
+		abbr: 'CA',
+		state: 'California',
 	},
 	textField: 'Hello World',
 });
 
 const items = reactive([
-	{
-		abbr: 'FL',
-		state: 'Florida',
-	},
 	{
 		abbr: 'GA',
 		state: 'Georgia',
diff --git a/src/documentation/components/SwitchComponent.vue b/src/documentation/components/SwitchComponent.vue
index 058ce45..69aa63d 100644
--- a/src/documentation/components/SwitchComponent.vue
+++ b/src/documentation/components/SwitchComponent.vue
@@ -25,8 +25,8 @@
 						<VInlineSwitch
 							v-model="values.boolean"
 							:density="density"
-							do-not-save
 							hide-details
+							:loading-wait="false"
 						/>
 					</v-col>
 
@@ -51,7 +51,7 @@
 			:items="propsStore.vInlineSwitchProps"
 			section-id="inline-switch-props"
 			section-title="Props"
-			subtitle="These are all props for the <code>VInlineSwitch</code> component"
+			subtitle="These are all props for the <code class='ic'>VInlineSwitch</code> component"
 		/>
 	</v-col>
 </template>
diff --git a/src/documentation/components/TextFieldComponent.vue b/src/documentation/components/TextFieldComponent.vue
index 0cba430..924c594 100644
--- a/src/documentation/components/TextFieldComponent.vue
+++ b/src/documentation/components/TextFieldComponent.vue
@@ -26,7 +26,7 @@
 							v-model="values.textField"
 							align-items="flex-end"
 							:density="density"
-							do-not-save
+							:loading-wait="false"
 							:table-field="false"
 							:variant="variant"
 						></VInlineTextField>
diff --git a/src/documentation/components/TextareaComponent.vue b/src/documentation/components/TextareaComponent.vue
index cf62a59..34d9328 100644
--- a/src/documentation/components/TextareaComponent.vue
+++ b/src/documentation/components/TextareaComponent.vue
@@ -26,7 +26,7 @@
 							v-model="values.textField"
 							align-items="flex-start"
 							:density="density"
-							do-not-save
+							:loading-wait="false"
 							rows="1"
 							:table-field="true"
 							:variant="variant"
@@ -55,7 +55,7 @@
 			:items="propsStore.vInlineTextareaProps"
 			section-id="inline-textarea-props"
 			section-title="Props"
-			subtitle="These are all props for the <code>VInlineTextarea</code> component"
+			subtitle="These are all props for the <code class='ic'>VInlineTextarea</code> component"
 		/>
 	</v-col>
 </template>
diff --git a/src/documentation/sections/ComponentsSection.vue b/src/documentation/sections/ComponentsSection.vue
index fdb6dd0..7740f9c 100644
--- a/src/documentation/sections/ComponentsSection.vue
+++ b/src/documentation/sections/ComponentsSection.vue
@@ -47,25 +47,6 @@ const store = useCoreStore();
 </script>
 
 <style lang="scss" scoped>
-:deep(code) {
-	background-color: rgba(255, 255, 255, 0.1) !important;
-	border-radius: 3px;
-	font-size: 85%;
-	font-weight: normal;
-	padding: 0.2em 0.4em;
-}
-
-:deep(.v-theme--light) {
-	code {
-		background-color: rgba(0, 0, 0, 0.1) !important;
-	}
-}
-
-:deep(.v-input__details) {
-	max-height: 10px;
-	min-height: 10px;
-}
-
 .switch-label {
 	:deep(.v-label) {
 		opacity: 1 !important;
diff --git a/src/documentation/sections/PropsSection.vue b/src/documentation/sections/PropsSection.vue
index c9208d4..980b983 100644
--- a/src/documentation/sections/PropsSection.vue
+++ b/src/documentation/sections/PropsSection.vue
@@ -36,7 +36,7 @@
 				:items="propsStore.saveAndLoadingIconProps"
 				section-id="props-save-and-loading-icon"
 				section-title="Save &amp; Loading Props"
-				subtitle="These are all props for the for the <code>VInlineSelect</code>, <code>VInlineTextarea</code>, and <code>VInlineTextField</code> components"
+				subtitle="These are all props for the for the <code class='ic'>VInlineSelect</code>, <code class='ic'>VInlineTextarea</code>, and <code class='ic'>VInlineTextField</code> components"
 			/>
 
 			<PropsTable
@@ -44,7 +44,7 @@
 				:items="propsStore.trueFalseIconProps"
 				section-id="props-true-false-icon"
 				section-title="True/False Icon Props"
-				subtitle="These are all props for the for the <code>VInlineCheckbox</code> and <code>VInlineSwitch</code> components"
+				subtitle="These are all props for the for the <code class='ic'>VInlineCheckbox</code> and <code class='ic'>VInlineSwitch</code> components"
 			/>
 		</v-col>
 	</v-row>
diff --git a/src/playground/configs/templates/PlaygroundPage.vue b/src/playground/configs/templates/PlaygroundPage.vue
index 2c521ac..d31a5ec 100644
--- a/src/playground/configs/templates/PlaygroundPage.vue
+++ b/src/playground/configs/templates/PlaygroundPage.vue
@@ -30,6 +30,7 @@
 								:item="item"
 								:label="componentOptions.label"
 								:loading="item.raw.loading"
+								:loading-wait="componentOptions.loadingWait"
 								name="active"
 								:underline-color="componentOptions.underlineColor"
 								:underline-style="componentOptions.underlineStyle"
@@ -48,6 +49,7 @@
 								:cancel-button-variant="componentOptions.cancelButtonVariant"
 								:cancel-icon-color="componentOptions.cancelIconColor"
 								:cancel-icon-text="componentOptions.cancelIconText"
+								:clearable="componentOptions.clearable"
 								:close-siblings="componentOptions.closeSiblings"
 								:color="componentOptions.color"
 								:density="componentOptions.density"
@@ -62,9 +64,10 @@
 								:items="users"
 								:label="componentOptions.label"
 								:loading="item.raw.loading"
+								:loading-wait="componentOptions.loadingWait"
 								:menu="componentOptions.menu"
 								name="userId"
-								:return-object="true"
+								return-object
 								:save-button-color="componentOptions.saveButtonColor"
 								:save-icon="componentOptions.saveIcon"
 								:save-icon-color="componentOptions.saveIconColor"
@@ -97,9 +100,11 @@
 								:item="item"
 								:label="componentOptions.label"
 								:loading="item.raw.loading"
+								:loading-wait="componentOptions.loadingWait"
 								name="title"
 								required
 								:save-button-color="componentOptions.saveButtonColor"
+								:save-button-variant="componentOptions.saveButtonVariant"
 								:save-icon-color="componentOptions.saveIconColor"
 								:save-icon-text="componentOptions.saveIconText"
 								:truncate-length="componentOptions.truncateTextFieldLength"
@@ -130,6 +135,7 @@
 								:item="item"
 								:label="componentOptions.label"
 								:loading="item.raw.loading"
+								:loading-wait="componentOptions.loadingWait"
 								name="body"
 								:rules="[componentOptions.rules.required, componentOptions.rules.minLength]"
 								:save-button-color="componentOptions.saveButtonColor"
@@ -162,6 +168,8 @@
 								:icon-false-title="componentOptions.iconFalseTitle"
 								:icon-true-title="componentOptions.iconTrueTitle"
 								:item="item"
+								:loading="item.raw.loading"
+								:loading-wait="componentOptions.loadingWait"
 								name="reviewed"
 								:underline-color="componentOptions.underlineColor"
 								:underline-style="componentOptions.underlineStyle"
@@ -208,6 +216,7 @@ const componentOptions = reactive({
 	cancelIcon: undefined,
 	cancelIconColor: 'default',
 	cancelIconText: 'Cancel',
+	clearable: false,
 	closeSiblings: true,
 	color: 'primary',
 	density: 'compact',
@@ -221,6 +230,7 @@ const componentOptions = reactive({
 	iconTrue: undefined,
 	iconTrueTitle: undefined,
 	label: '',
+	loadingWait: true,
 	menu: true,
 	rules: {
 		minLength(value) {
@@ -229,6 +239,7 @@ const componentOptions = reactive({
 		required: value => !!value || 'Field is required',
 	},
 	saveButtonColor: 'default',
+	saveButtonVariant: 'text',
 	saveIcon: undefined,
 	saveIconColor: 'primary',
 	saveIconText: 'Save',
diff --git a/src/plugin/VInlineCheckbox.vue b/src/plugin/VInlineCheckbox.vue
index 02443af..6640c38 100644
--- a/src/plugin/VInlineCheckbox.vue
+++ b/src/plugin/VInlineCheckbox.vue
@@ -46,11 +46,11 @@
 			:class="fieldContainerClass"
 		>
 			<v-checkbox
-				v-bind="$attrs"
+				v-bind="bindingSettings"
 				v-model="modelValue"
 				:color="settings.color"
 				:density="settings.density"
-				:disabled="loading"
+				:disabled="loadingProp"
 				:error="error"
 				:false-icon="theFalseIcon"
 				:false-value="settings.falseValue"
@@ -75,22 +75,28 @@
 					v-if="!slots.append"
 					#append
 				>
-					<v-btn
-						v-if="!settings.fieldOnly"
-						class="ms-1"
-						:color="settings.cancelButtonColor"
-						:disabled="loading"
-						icon
-						:size="settings.cancelButtonSize"
-						:title="settings.cancelButtonTitle"
-						:variant="settings.cancelButtonVariant"
-						@click="toggleField"
-					>
-						<v-icon
-							:color="settings.cancelIconColor"
-							:icon="theCancelIcon"
-						/>
-					</v-btn>
+					<SaveFieldButtons
+						:cancel-button-color="settings.cancelButtonColor"
+						:cancel-button-size="settings.cancelButtonSize"
+						:cancel-button-title="settings.cancelButtonTitle"
+						:cancel-button-variant="settings.cancelButtonVariant"
+						:cancel-icon="settings.cancelIcon"
+						:cancel-icon-color="settings.cancelIconColor"
+						:error="error"
+						:field-only="settings.fieldOnly"
+						:hide-save-icon="true"
+						:loading="loadingProp"
+						:loading-icon="settings.loadingIcon"
+						:loading-icon-color="settings.loadingIconColor"
+						:save-button-color="settings.saveButtonColor"
+						:save-button-size="settings.saveButtonSize"
+						:save-button-title="settings.saveButtonTitle"
+						:save-button-variant="settings.saveButtonVariant"
+						:save-icon="settings.saveIcon"
+						:save-icon-color="settings.saveIconColor"
+						@close="closeField"
+						@save="saveValue"
+					/>
 				</template>
 			</v-checkbox>
 		</div>
@@ -106,7 +112,10 @@ import {
 } from '@/types';
 import type { IconOptions } from 'vuetify';
 import { checkboxProps } from './utils/props';
-import { BooleanIcons } from './components/index';
+import {
+	BooleanIcons,
+	SaveFieldButtons,
+} from './components/index';
 import { useToggleField } from './composables/methods';
 import { useGetIcon } from './composables/icons';
 import {
@@ -130,18 +139,21 @@ const slots = useSlots();
 const emit = defineEmits([...inlineEmits]);
 const iconOptions = inject<IconOptions>(Symbol.for('vuetify:icons'));
 
-console.log(iconOptions);
-
 const props = withDefaults(defineProps<VInlineCheckboxProps>(), { ...checkboxProps });
 let settings = reactive({ ...attrs, ...props });
+const loadingProp = computed(() => props.loading);
 
 const error = ref<boolean>(false);
 const showField = ref<boolean>(false);
 const timeOpened = ref<TimeOpened>(null);
 
 
+// ------------------------------------------------ Binding Events & Props //
+const bindingSettings = computed(() => settings);
+
+
 // ------------------------------------------------ Loading //
-watch(() => props.loading, (newVal, oldVal) => {
+watch(() => loadingProp.value, (newVal, oldVal) => {
 	if (!newVal && oldVal && showField.value) {
 		toggleField();
 	}
@@ -149,14 +161,6 @@ watch(() => props.loading, (newVal, oldVal) => {
 
 
 // ------------------------------------------------ Icons //
-const theCancelIcon = computed(() => {
-	return useGetIcon({
-		icon: settings.cancelIcon,
-		iconOptions,
-		name: 'false',
-	});
-});
-
 const theFalseIcon = computed(() => {
 	return useGetIcon({
 		icon: props.trueIcon,
@@ -184,7 +188,7 @@ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass(
 	density: settings.density,
 	disabled: settings.disabled,
 	field: 'v-checkbox',
-	loading: props.loading,
+	loading: loadingProp.value,
 	loadingWait: settings.loadingWait,
 	tableField: settings.tableField,
 }));
@@ -225,9 +229,16 @@ const displayValueStyle = computed(() => useDisplayValueStyles({
 }));
 
 
+// ------------------------------------------------ Key event to cancel/close field //
+function closeField() {
+	error.value = false;
+	toggleField();
+}
+
+
 // ------------------------------------------------ Toggle the field //
 function toggleField() {
-	if (settings.disabled || (settings.loadingWait && props.loading)) {
+	if (settings.disabled || (settings.loadingWait && loadingProp.value)) {
 		return;
 	}
 
@@ -256,7 +267,10 @@ function saveValue(value: any) {
 	modelValue.value = value;
 
 	emit('update', value);
-	toggleField();
+
+	if (!settings.loadingWait) {
+		toggleField();
+	}
 }
 
 
diff --git a/src/plugin/VInlineSelect.vue b/src/plugin/VInlineSelect.vue
index c5ac8be..f14eed7 100644
--- a/src/plugin/VInlineSelect.vue
+++ b/src/plugin/VInlineSelect.vue
@@ -26,14 +26,14 @@
 			:class="fieldContainerClass"
 		>
 			<v-select
-				v-bind="$attrs"
+				v-bind="bindingSettings"
 				v-model="modelValue"
 				:autofocus="!settings.fieldOnly || settings.autofocus"
 				:clear-icon="theClearIcon"
 				:clearable="settings.clearable"
 				:color="settings.color"
 				:density="settings.density"
-				:disabled="loading"
+				:disabled="loadingProp"
 				:error="error"
 				:error-messages="internalErrorMessages"
 				:hide-details="settings.hideDetails"
@@ -42,7 +42,7 @@
 				:item-value="settings.itemValue"
 				:items="items"
 				:label="settings.label"
-				:loading="loading"
+				:loading="loadingProp"
 				:menu="settings.menu"
 				:variant="settings.variant"
 				width="100%"
@@ -73,7 +73,7 @@
 						:error="error"
 						:field-only="settings.fieldOnly"
 						:hide-save-icon="settings.hideSaveIcon"
-						:loading="loading"
+						:loading="loadingProp"
 						:loading-icon="settings.loadingIcon"
 						:loading-icon-color="settings.loadingIconColor"
 						:save-button-color="settings.saveButtonColor"
@@ -130,6 +130,7 @@ const slots = useSlots();
 const props = withDefaults(defineProps<VInlineSelectProps>(), { ...selectProps });
 const iconOptions = inject<IconOptions>(Symbol.for('vuetify:icons'));
 let settings = reactive({ ...attrs, ...props });
+const loadingProp = computed(() => props.loading);
 
 const empty = ref<boolean>(false);
 const error = ref<boolean>(false);
@@ -139,8 +140,12 @@ const timeOpened = ref<TimeOpened>(null);
 let originalValue = modelValue.value;
 
 
+// ------------------------------------------------ Binding Events & Props //
+const bindingSettings = computed(() => settings);
+
+
 // ------------------------------------------------ Loading //
-watch(() => props.loading, (newVal, oldVal) => {
+watch(() => loadingProp.value, (newVal, oldVal) => {
 	if (!newVal && oldVal && showField.value) {
 		toggleField();
 	}
@@ -183,7 +188,7 @@ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass(
 	disabled: settings.disabled,
 	field: 'v-select',
 	iconSet: iconOptions?.defaultSet,
-	loading: props.loading,
+	loading: loadingProp.value,
 	loadingWait: settings.loadingWait,
 	tableField: settings.tableField,
 }));
@@ -236,7 +241,7 @@ function closeField() {
 
 // ------------------------------------------------ Toggle the field //
 function toggleField() {
-	if (settings.disabled || (settings.loadingWait && props.loading)) {
+	if (settings.disabled || (settings.loadingWait && loadingProp.value)) {
 		return;
 	}
 
@@ -294,6 +299,10 @@ function saveValue() {
 	originalValue = modelValue.value;
 
 	emit('update', modelValue.value);
+
+	if (!settings.loadingWait) {
+		toggleField();
+	}
 }
 
 
diff --git a/src/plugin/VInlineSwitch.vue b/src/plugin/VInlineSwitch.vue
index 73d6e4b..c26a161 100644
--- a/src/plugin/VInlineSwitch.vue
+++ b/src/plugin/VInlineSwitch.vue
@@ -44,17 +44,17 @@
 			:class="fieldContainerClass"
 		>
 			<v-switch
-				v-bind="$attrs"
+				v-bind="bindingSettings"
 				v-model="modelValue"
 				:color="settings.color"
 				:density="settings.density"
-				:disabled="loading"
+				:disabled="loadingProp"
 				:error="error"
 				:false-icon="settings.falseIcon"
 				:false-value="settings.falseValue"
 				:hide-details="settings.hideDetails"
 				:label="settings.label"
-				:loading="loading"
+				:loading="loadingProp"
 				:value="settings.trueValue"
 				@update:model-value="saveValue"
 			>
@@ -129,14 +129,19 @@ const iconOptions = inject<IconOptions>(Symbol.for('vuetify:icons'));
 
 const props = withDefaults(defineProps<VInlineSwitchProps>(), { ...switchProps });
 let settings = reactive({ ...attrs, ...props });
+const loadingProp = computed(() => props.loading);
 
 const error = ref<boolean>(false);
 const showField = ref<boolean>(false);
 const timeOpened = ref<TimeOpened>(null);
 
 
+// ------------------------------------------------ Binding Events & Props //
+const bindingSettings = computed(() => settings);
+
+
 // ------------------------------------------------ Loading //
-watch(() => props.loading, (newVal, oldVal) => {
+watch(() => loadingProp.value, (newVal, oldVal) => {
 	if (!newVal && oldVal && showField.value) {
 		toggleField();
 	}
@@ -164,7 +169,7 @@ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass(
 	density: settings.density,
 	disabled: settings.disabled,
 	field: 'v-switch',
-	loading: props.loading,
+	loading: loadingProp.value,
 	loadingWait: settings.loadingWait,
 	tableField: settings.tableField,
 }));
@@ -207,7 +212,7 @@ const displayValueStyle = computed(() => useDisplayValueStyles({
 
 // ------------------------------------------------ Toggle the field //
 function toggleField() {
-	if (settings.disabled || (settings.loadingWait && props.loading)) {
+	if (settings.disabled || (settings.loadingWait && loadingProp.value)) {
 		return;
 	}
 
@@ -236,6 +241,10 @@ function saveValue(value: any) {
 	modelValue.value = value;
 
 	emit('update', value);
+
+	if (!settings.loadingWait) {
+		toggleField();
+	}
 }
 
 
diff --git a/src/plugin/VInlineTextField.vue b/src/plugin/VInlineTextField.vue
index bc875c0..526627c 100644
--- a/src/plugin/VInlineTextField.vue
+++ b/src/plugin/VInlineTextField.vue
@@ -26,17 +26,17 @@
 			:class="fieldContainerClass"
 		>
 			<v-text-field
-				v-bind="$attrs"
+				v-bind="bindingSettings"
 				v-model="modelValue"
 				:autofocus="!settings.fieldOnly || settings.autofocus"
 				:color="settings.color"
 				:density="settings.density"
-				:disabled="loading"
+				:disabled="loadingProp"
 				:error="error"
 				:error-messages="internalErrorMessages"
 				:hide-details="settings.hideDetails"
 				:label="settings.label"
-				:loading="loading"
+				:loading="loadingProp"
 				:variant="settings.variant"
 				width="100%"
 				@keyup.enter="saveValue"
@@ -68,7 +68,7 @@
 						:error="error"
 						:field-only="settings.fieldOnly"
 						:hide-save-icon="settings.hideSaveIcon"
-						:loading="loading"
+						:loading="loadingProp"
 						:loading-icon="settings.loadingIcon"
 						:loading-icon-color="settings.loadingIconColor"
 						:required="settings.required"
@@ -122,6 +122,7 @@ const slots = useSlots();
 const emit = defineEmits([...inlineEmits]);
 const props = withDefaults(defineProps<VInlineTextFieldProps>(), { ...textFieldProps });
 let settings = reactive({ ...attrs, ...props });
+const loadingProp = computed(() => props.loading);
 
 const empty = ref<boolean>(false);
 const error = ref<boolean>(false);
@@ -130,7 +131,12 @@ const timeOpened = ref<TimeOpened>(null);
 let originalValue = modelValue.value;
 
 
-watch(() => props.loading, (newVal, oldVal) => {
+// ------------------------------------------------ Binding Events & Props //
+const bindingSettings = computed(() => settings);
+
+
+// ------------------------------------------------ Loading //
+watch(() => loadingProp.value, (newVal, oldVal) => {
 	if (!newVal && oldVal && showField.value) {
 		toggleField();
 	}
@@ -163,7 +169,7 @@ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass(
 	density: settings.density,
 	disabled: settings.disabled,
 	field: 'v-text-field',
-	loading: props.loading,
+	loading: loadingProp.value,
 	loadingWait: settings.loadingWait,
 	tableField: settings.tableField,
 }));
@@ -216,7 +222,7 @@ function closeField() {
 
 // ------------------------------------------------ Toggle the field //
 function toggleField() {
-	if (settings.disabled || (settings.loadingWait && props.loading)) {
+	if (settings.disabled || (settings.loadingWait && loadingProp.value)) {
 		return;
 	}
 
@@ -278,6 +284,10 @@ function saveValue() {
 
 	originalValue = modelValue.value;
 	emit('update', modelValue.value);
+
+	if (!settings.loadingWait) {
+		toggleField();
+	}
 }
 
 
diff --git a/src/plugin/VInlineTextarea.vue b/src/plugin/VInlineTextarea.vue
index 378b10c..3aea159 100644
--- a/src/plugin/VInlineTextarea.vue
+++ b/src/plugin/VInlineTextarea.vue
@@ -27,18 +27,18 @@
 			:class="fieldContainerClass"
 		>
 			<v-textarea
-				v-bind="$attrs"
+				v-bind="bindingSettings"
 				v-model="modelValue"
 				:auto-grow="settings.autoGrow"
 				:autofocus="!settings.fieldOnly || settings.autofocus"
 				:color="settings.color"
 				:density="settings.density"
-				:disabled="loading"
+				:disabled="loadingProp"
 				:error="error"
 				:error-messages="internalErrorMessages"
 				:hide-details="settings.hideDetails"
 				:label="settings.label"
-				:loading="loading"
+				:loading="loadingProp"
 				:rows="settings.rows"
 				:variant="settings.variant"
 				width="100%"
@@ -69,7 +69,7 @@
 						:error="error"
 						:field-only="settings.fieldOnly"
 						:hide-save-icon="settings.hideSaveIcon"
-						:loading="loading"
+						:loading="loadingProp"
 						:loading-icon="settings.loadingIcon"
 						:loading-icon-color="settings.loadingIconColor"
 						:save-button-color="settings.saveButtonColor"
@@ -122,6 +122,7 @@ const slots = useSlots();
 const emit = defineEmits([...inlineEmits]);
 const props = withDefaults(defineProps<VInlineTextareaProps>(), { ...textareaProps });
 let settings = reactive({ ...attrs, ...props });
+const loadingProp = computed(() => props.loading);
 
 const empty = ref<boolean>(false);
 const error = ref<boolean>(false);
@@ -130,8 +131,12 @@ const timeOpened = ref<TimeOpened>(null);
 let originalValue = modelValue.value;
 
 
+// ------------------------------------------------ Binding Events & Props //
+const bindingSettings = computed(() => settings);
+
+
 // ------------------------------------------------ Loading //
-watch(() => props.loading, (newVal, oldVal) => {
+watch(() => loadingProp.value, (newVal, oldVal) => {
 	if (!newVal && oldVal && showField.value) {
 		toggleField();
 	}
@@ -164,7 +169,7 @@ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass(
 	density: settings.density,
 	disabled: settings.disabled,
 	field: 'v-textarea',
-	loading: props.loading,
+	loading: loadingProp.value,
 	loadingWait: settings.loadingWait,
 	tableField: settings.tableField,
 }));
@@ -217,7 +222,7 @@ function closeField() {
 
 // ------------------------------------------------ Toggle the field //
 function toggleField() {
-	if (settings.disabled || (settings.loadingWait && props.loading)) {
+	if (settings.disabled || (settings.loadingWait && loadingProp.value)) {
 		return;
 	}
 
@@ -275,6 +280,10 @@ function saveValue() {
 	originalValue = modelValue.value;
 
 	emit('update', modelValue.value);
+
+	if (!settings.loadingWait) {
+		toggleField();
+	}
 }
 
 
diff --git a/src/plugin/components/SaveFieldButtons.vue b/src/plugin/components/SaveFieldButtons.vue
index 4cf134a..9cc5a5b 100644
--- a/src/plugin/components/SaveFieldButtons.vue
+++ b/src/plugin/components/SaveFieldButtons.vue
@@ -4,6 +4,7 @@
 		v-bind="$attrs"
 	>
 		<v-btn
+			v-if="!settings.hideSaveIcon"
 			class="ms-1"
 			:color="settings.saveButtonColor"
 			:disabled="hasErrors"
@@ -14,19 +15,20 @@
 			@click="saveValue"
 		>
 			<v-icon
-				v-if="!loading && !settings.hideSaveIcon"
+				v-if="!loading"
 				:color="hasErrors ? 'error' : settings.saveIconColor"
 				:icon="theSaveIcon"
 			/>
 			<v-icon
-				v-else-if="!settings.hideSaveIcon"
+				v-else
 				:class="loadingIconClasses"
 				:color="settings.loadingIconColor"
 				:icon="theLoadingIcon"
 			/>
 		</v-btn>
+
 		<v-btn
-			class="ms-1"
+			:class="cancelButtonClasses"
 			:color="settings.cancelButtonColor"
 			icon
 			:size="settings.cancelButtonSize"
@@ -35,6 +37,13 @@
 			@click="closeField"
 		>
 			<v-icon
+				v-if="settings.hideSaveIcon && loading"
+				:class="loadingIconClasses"
+				:color="settings.loadingIconColor"
+				:icon="theLoadingIcon"
+			/>
+			<v-icon
+				v-else
 				class="text-default"
 				:color="settings.cancelIconColor"
 				:icon="theCancelIcon"
@@ -46,7 +55,10 @@
 <script setup lang="ts">
 import { SaveFieldButtons } from '@/types';
 import type { IconOptions } from 'vuetify';
-import { useSaveFieldsContainerClass } from '../composables/classes';
+import {
+	useCancelButtonClass,
+	useSaveFieldsContainerClass,
+} from '../composables/classes';
 import { useGetIcon } from '../composables/icons';
 
 const attrs = useAttrs();
@@ -76,6 +88,12 @@ const loadingIconClasses = computed(() => {
 	return '';
 });
 
+const cancelButtonClasses = computed(() => {
+	return useCancelButtonClass({
+		cancelButtonVariant: settings.cancelButtonVariant,
+	});
+});
+
 const theCancelIcon = computed(() => {
 	return useGetIcon({
 		icon: props.cancelIcon,
diff --git a/src/plugin/composables/classes.ts b/src/plugin/composables/classes.ts
index 1010938..3726cf0 100644
--- a/src/plugin/composables/classes.ts
+++ b/src/plugin/composables/classes.ts
@@ -1,4 +1,5 @@
 import {
+	UseCancelButtonClass,
 	UseDisplayContainerClass,
 	UseDisplayInputControlClass,
 	UseDisplaySelectionControlClass,
@@ -89,6 +90,8 @@ export const useFieldContainerClass: UseFieldContainerClass = (options): object
 	};
 };
 
+
+// ------------------------------------------------ Save Field Buttons //
 export const useSaveFieldsContainerClass = (): object => {
 	return {
 		[`${componentName}--save-fields-container`]: true,
@@ -96,3 +99,12 @@ export const useSaveFieldsContainerClass = (): object => {
 		'd-flex': true,
 	};
 };
+
+export const useCancelButtonClass: UseCancelButtonClass = (options): object => {
+	const { cancelButtonVariant } = options;
+
+	return {
+		'me-1': cancelButtonVariant === 'elevated',
+		'ms-1': true,
+	};
+};
diff --git a/src/plugin/utils/props.ts b/src/plugin/utils/props.ts
index 79565ac..e78557f 100644
--- a/src/plugin/utils/props.ts
+++ b/src/plugin/utils/props.ts
@@ -4,7 +4,7 @@ export const sharedProps = {
 	cancelButtonColor: 'default',
 	cancelButtonSize: 'x-small',
 	cancelButtonTitle: 'Cancel',
-	cancelButtonVariant: 'tonal' as const,
+	cancelButtonVariant: 'text' as const,
 	cancelIcon: undefined,
 	cancelIconColor: 'default',
 	closeSiblings: false,
@@ -68,6 +68,7 @@ const valueIcons = {
 const checkboxProps = {
 	...sharedProps,
 	...trueFalseIcons,
+	...saveAndLoadingIconProps,
 	...{
 		falseIcon: undefined,
 		icons: true,
@@ -125,5 +126,11 @@ const textFieldProps = {
 };
 
 
-// Default Export //
-export { checkboxProps, selectProps, switchProps, textFieldProps, textareaProps };
+// Export //
+export {
+	checkboxProps,
+	selectProps,
+	switchProps,
+	textFieldProps,
+	textareaProps,
+};
diff --git a/src/stores/props.ts b/src/stores/props.ts
index 8570826..c4b6c6b 100644
--- a/src/stores/props.ts
+++ b/src/stores/props.ts
@@ -53,13 +53,13 @@ const sharedProps = [
 		default: 'default',
 		desc: `${colorDesc} cancel button`,
 		name: 'cancel-button-color',
-		type: "VBtn['$props']['color']",
+		type: "string | undefined",
 	},
 	{
 		default: 'x-small',
 		desc: 'Sets the height and width of the cancel button',
 		name: 'cancel-button-size',
-		type: "VBtn['$props']['size']",
+		type: "string | number | undefined",
 	},
 	{
 		default: 'Cancel',
@@ -87,7 +87,7 @@ const sharedProps = [
 	},
 	{
 		default: false,
-		desc: 'If <code>true</code>, the field will close when the user opens another inline form element',
+		desc: 'If <code class="ic">true</code>, the field will close when the user opens another inline form element',
 		name: 'close-siblings',
 		type: 'boolean',
 	},
@@ -117,7 +117,7 @@ const sharedProps = [
 	},
 	{
 		default: false,
-		desc: 'If set to <code>true</code> will only show the field',
+		desc: 'If set to <code class="ic">true</code> will only show the field',
 		name: 'field-only',
 		type: 'boolean',
 	},
@@ -135,13 +135,13 @@ const sharedProps = [
 	},
 	{
 		default: undefined,
-		desc: 'Sets the text of the <code>v-label</code> or <code>v-field-label</code> component',
+		desc: 'Sets the text of the <code class="ic">v-label</code> or <code class="ic">v-field-label</code> component',
 		name: 'label',
 		type: 'string',
 	},
 	{
 		default: 'true',
-		desc: 'Sets the text of the field cursor to <code>wait</code> and prevents the field from opening until <code>loading</code> has returned to false',
+		desc: 'The cursor for unopened fields, with the same loading prop value, is set to "wait" and their selection is disabled until the loading process is completed. Additionally, the saving field will remain visible but disabled until the loading is finished',
 		name: 'loading-wait',
 		type: 'boolean',
 	},
@@ -192,7 +192,7 @@ const sharedProps = [
 const autofocusProp = [
 	{
 		default: false,
-		desc: 'If <code>true</code>, the field will autofocus',
+		desc: 'If <code class="ic">true</code>, the field will autofocus',
 		name: 'auto-focus',
 		type: 'boolean',
 	},
@@ -221,13 +221,13 @@ const saveAndLoadingIconProps = [
 		default: 'primary',
 		desc: `${colorDesc} save button`,
 		name: 'save-button-color',
-		type: "VBtn['$props']['color']",
+		type: "string | undefined",
 	},
 	{
 		default: 'x-small',
-		desc: 'Sets the height and width of the save button',
+		desc: 'Sets the height and width of the save/loading button',
 		name: 'save-button-size',
-		type: "VBtn['$props']['size']",
+		type: "string | number | undefined",
 	},
 	{
 		default: 'Save',
@@ -237,7 +237,7 @@ const saveAndLoadingIconProps = [
 	},
 	{
 		default: 'text',
-		desc: `${variantDesc} save button`,
+		desc: `${variantDesc} save/loading button`,
 		name: 'save-button-variant',
 		type: "VBtn['$props']['variant']",
 	},
@@ -264,37 +264,37 @@ const trueFalseIconProps = [
 	},
 	{
 		default: undefined,
-		desc: 'The <code>false</code> icon',
+		desc: 'The displayed <code class="ic">false</code> icon when the field is not editable',
 		name: 'icon-false',
 		type: 'string | undefined',
 	},
 	{
 		default: 'danger',
-		desc: `${colorDesc} icon when <code>false</code>`,
+		desc: `${colorDesc} icon when <code class="ic">false</code>`,
 		name: 'icon-false-color',
 		type: 'string',
 	},
 	{
 		default: 'No',
-		desc: 'The title of the <code>false</code> icon',
+		desc: 'The title of the <code class="ic">false</code> icon',
 		name: 'icon-false-title',
 		type: 'string | undefined',
 	},
 	{
 		default: undefined,
-		desc: 'The <code>true</code> icon',
+		desc: 'The displayed <code class="ic">true</code> icon when the field is not editable',
 		name: 'icon-true',
 		type: 'string | undefined',
 	},
 	{
 		default: 'success',
-		desc: `${colorDesc} icon when <code>true</code>`,
+		desc: `${colorDesc} icon when <code class="ic">true</code>`,
 		name: 'icon-true-color',
 		type: 'string',
 	},
 	{
 		default: 'Yes',
-		desc: 'The title of the <code>true</code> icon',
+		desc: 'The title of the <code class="ic">true</code> icon',
 		name: 'icon-true-title',
 		type: 'string | undefined',
 	},
@@ -329,31 +329,20 @@ const truncateProps = [
 
 const vInlineCheckboxProps = [
 	...sharedProps,
+	...saveAndLoadingIconProps,
 	...trueFalseIconProps,
 	...[
-		{
-			default: 'compact',
-			desc: densityDesc,
-			name: 'density',
-			type: "VCheckbox['$props']['density']",
-		},
 		{
 			default: undefined,
-			desc: 'The icon of the field when <code>false</code>',
+			desc: 'The icon of the checkbox when <code class="ic">false</code>',
 			name: 'false-icon',
-			type: "VCheckbox['$props']['falseIcon']",
+			type: "string | undefined",
 		},
 		{
 			default: undefined,
-			desc: 'The icon of the field when <code>true</code>',
+			desc: 'The icon of the checkbox when <code class="ic">true</code>',
 			name: 'true-icon',
-			type: "VCheckbox['$props']['trueIcon']",
-		},
-		{
-			default: true,
-			desc: 'Displays/Hides the icons',
-			name: 'icons',
-			type: 'boolean',
+			type: "string | undefined",
 		},
 	]
 ];
@@ -373,19 +362,13 @@ const vInlineSelectProps = [
 			default: false,
 			desc: 'Allows for the component to be cleared',
 			name: 'clearable',
-			type: "VSelect['$props']['clearable']",
-		},
-		{
-			default: 'compact',
-			desc: densityDesc,
-			name: 'density',
-			type: "VSelect['$props']['density']",
+			type: "boolean | undefined",
 		},
 		{
 			default: true,
 			desc: 'Hides the selected items',
 			name: 'hide-selected',
-			type: "VSelect['$props']['hideSelected']",
+			type: "boolean | undefined",
 		},
 		{
 			default: 'title',
@@ -418,24 +401,12 @@ const vInlineSwitchProps = [
 	...sharedProps,
 	...trueFalseIconProps,
 	...[
-		{
-			default: 'compact',
-			desc: densityDesc,
-			name: 'density',
-			type: "VSwitch['$props']['density']",
-		},
 		{
 			default: undefined,
-			desc: 'The icon of the field when <code>false</code>',
+			desc: 'The icon of the field when <code class="ic">false</code>',
 			name: 'false-icon',
 			type: "VSwitch['$props']['falseIcon']",
 		},
-		{
-			default: true,
-			desc: 'Displays/Hides the icons',
-			name: 'icons',
-			type: 'boolean',
-		},
 	]
 ];
 
@@ -449,19 +420,13 @@ const vInlineTextareaProps = [
 			default: true,
 			desc: 'Automatically grow the textarea depending on amount of text',
 			name: 'auto-grow',
-			type: "VTextarea['$props']['autoGrow']",
-		},
-		{
-			default: 'compact',
-			desc: densityDesc,
-			name: 'density',
-			type: "VTextarea['$props']['density']",
+			type: "boolean | undefined",
 		},
 		{
 			default: 1,
 			desc: 'Default row count',
 			name: 'rows',
-			type: "VTextarea['$props']['rows']",
+			type: "string | number | undefined",
 		},
 		{
 			default: 'underlined',
@@ -478,12 +443,6 @@ const vInlineTextFieldProps = [
 	...saveAndLoadingIconProps,
 	...truncateProps,
 	...[
-		{
-			default: 'compact',
-			desc: densityDesc,
-			name: 'density',
-			type: "VTextField['$props']['density']",
-		},
 		{
 			default: 'underlined',
 			desc: `${variantDesc} component`,
diff --git a/src/types/index.ts b/src/types/index.ts
index 5c31c5a..4b8ea9a 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -80,7 +80,7 @@ export interface SharedProps {
 
 // Component Props //
 export interface VInlineCheckboxProps extends Omit<SharedProps,
-	'autofocus' | 'hideSaveIcon' | 'loadingIcon' | 'loadingIconColor' | 'saveButtonColor' | 'saveButtonSize' | 'saveIcon' | 'saveIconColor' | 'saveButtonTitle' | 'saveButtonVariant' | 'truncateLength' | 'truncateSuffix'
+	'autofocus' | 'truncateLength' | 'truncateSuffix'
 > {
 	density?: VCheckbox['$props']['density'];
 	falseIcon?: string | undefined;
@@ -161,6 +161,15 @@ export interface SaveFieldButtons extends
 	> { loading: boolean; };
 
 
+export interface UseCancelButtonClass {
+	(
+		options: {
+			cancelButtonVariant?: SharedProps['cancelButtonVariant'];
+		},
+	): object;
+}
+
+
 // -------------------------------------------------- Composables //
 
 // ------------------------ Main Container //