diff --git a/CHANGELOG.md b/CHANGELOG.md
index af7f43d..16675ed 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,11 @@
 miru.ink / Changelog
 ====================
 
+## Version 0.0.18 - Experimental
+- Add: New `tabindex` property on `FormControl` and control components.
+- Update: Use `SharedControlProps` on many different control components.
+- Update: Use `disabled`, `required` and `invalid` on `NumberField` control component.
+
 ## Version 0.0.17 - Experimental
 - Update: package.json dependencies.
 - Update: `PopoverStd` and `ContextMenu` components.
diff --git a/package.json b/package.json
index cf8db5d..65fa8af 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "miru.ink",
-    "version": "0.0.17",
+    "version": "0.0.18",
     "description": "A Open-Source Vue3 / Tailwind CSS component framework and function library.",
     "keywords": [
         "ui",
diff --git a/src/components/control/BalloonSelector.vue b/src/components/control/BalloonSelector.vue
index 7e9eeea..ea84282 100644
--- a/src/components/control/BalloonSelector.vue
+++ b/src/components/control/BalloonSelector.vue
@@ -24,6 +24,7 @@
                 :type="props.multiple ? 'checkbox' : 'radio'" 
                 :name="`${props.name || props.id}${(props.multiple ? '[]' : '')}`"
                 :value="option.value"
+                :tabindex="props.tabindex"
                 :disabled="isDisabled || option.disabled || false"
                 :required="isRequired"
                 :checked="isChecked(option.value)" />
diff --git a/src/components/control/CheckboxField.vue b/src/components/control/CheckboxField.vue
index f3a8a6c..def8898 100644
--- a/src/components/control/CheckboxField.vue
+++ b/src/components/control/CheckboxField.vue
@@ -10,8 +10,8 @@
             class="checkbox-input"
             :name="props.name || fieldId"
             :value="props.value ? props.value : true"
+            :tabindex="props.tabindex"
             :disabled="toValue(props.disabled || false) || typeof disabled == 'string'"
-            :readonly="toValue(props.readonly || false) || typeof readonly == 'string'"
             :required="toValue(props.required || false) || typeof required == 'string'"
             v-model="value" />
         <label :for="`${fieldId}-input`" class="checkbox-label">
@@ -21,69 +21,27 @@
 </template>
 
 <script lang="ts">
-import type { MaybeRef } from 'vue';
+import type { SharedControlProps } from '../form/FormControl.vue';
 
 /**
  * CheckboxField Properties
  */
-export interface CheckboxFieldProps {
-    /**
-     * A custom checkbox field id, usually passed by the FormControl component. The default value 
-     * is an auto-generated UUID.
-     */
-    id?: null | string;
-
+export interface CheckboxFieldProps extends SharedControlProps<null | boolean | number | string> {
     /**
      * The label for this checkbox field.
      */
     label?: null | string;
 
-    /**
-     * The name attribute for this checkbox field.
-     */
-    name?: null | string;
-
     /**
      * The value attribute for this checkbox field, pass nothing to use binary mode with true and 
      * false.
      */
     value?: null | number | string;
 
-    /**
-     * The value for this checkbox field, must be passed as v-model value.
-     */
-    modelValue?: null | boolean | number | string | (string | number)[];
-
     /**
      * The desired size for this checkbox field, note that `md` is the default value.
      */
     size?: 'sm' | 'md' | 'lg';
-
-    /**
-     * The disabled state for this checkbox field.
-     */
-    disabled?: MaybeRef<boolean>;
-
-    /**
-     * The readonly state for this checkbox field.
-     */
-    readonly?: MaybeRef<boolean>;
-
-    /**
-     * The required state for this checkbox field.
-     */
-    required?: MaybeRef<boolean>;
-
-    /**
-     * The validation state for this checkbox field.
-     */
-    validation?: null | 'invalid' | 'valid';
-
-    /**
-     * Additional checkbox field validation message, requires the validation property set either to 
-     * valid or invalid.
-     */
-    validationMessage?: null | string;
 }
 
 /**
diff --git a/src/components/control/InputField.vue b/src/components/control/InputField.vue
index 8bc2a5a..56585e8 100644
--- a/src/components/control/InputField.vue
+++ b/src/components/control/InputField.vue
@@ -13,6 +13,7 @@
             props.size ? `field-${props.size}` : '',
             props.validation ? `field-${props.validation}` : ''
         ]" 
+        :tabindex="props.tabindex"
         :disabled="toValue(props.disabled || false) || typeof disabled == 'string'"
         :required="toValue(props.required || false) || typeof required == 'string'"
         :invalid="props.validation == 'invalid' ? true : void 0"
diff --git a/src/components/control/NumberField.vue b/src/components/control/NumberField.vue
index 4d7a6ee..36377c8 100644
--- a/src/components/control/NumberField.vue
+++ b/src/components/control/NumberField.vue
@@ -4,46 +4,34 @@
             :icon="LucideMinusSign" 
             :iconProps="{ size: 16 }" 
             :size="(props.size || 'md') == 'sm' ? 'sm' : 'md'" 
-            :disabled="reachedMin"
+            :disabled="toValue(props.disabled || false) || typeof disabled == 'string' || reachedMin"
             @click="onDecrease" />
         <InputField v-bind="props" 
             type="text" 
             @keydown="onKeyDown" 
             @input.prevent="onInput" 
             inputmode="numeric" 
+            :tabindex="props.tabindex"
+            :disabled="toValue(props.disabled || false) || typeof disabled == 'string'"
+            :required="toValue(props.required || false) || typeof required == 'string'"
+            :invalid="props.validation == 'invalid' ? true : void 0"
             v-model="value" />
         <ActionButton 
             :icon="LucidePlusSign" 
             :iconProps="{ size: 16 }" 
             :size="(props.size || 'md') == 'sm' ? 'sm' : 'md'" 
-            :disabled="reachedMax"
+            :disabled="toValue(props.disabled || false) || typeof disabled == 'string' || reachedMax"
             @click="onIncrease" />
     </div>
 </template>
 
 <script lang="ts">
-import type { MaybeRef } from 'vue';
+import type { SharedControlProps } from '../form/FormControl.vue';
 
 /**
  * NumberField Properties
  */
-export interface NumberFieldProps {
-    /**
-     * A custom number field id, usually passed by the FormControl component. The default value is an 
-     * auto-generated UUID.
-     */
-    id?: null | string;
-
-    /**
-     * The name attribute for this number field.
-     */
-    name?: null | string;
-
-    /**
-     * The value for this number field, must be passed as v-model value.
-     */
-    modelValue?: null | number | string;
-
+export interface NumberFieldProps extends SharedControlProps<null | number | string> {
     /**
      * The placeholder attribute for this number field.
      */
@@ -73,32 +61,6 @@ export interface NumberFieldProps {
      * The desired size for this number field, note that `md` is the default value.
      */
     size?: 'sm' | 'md' | 'lg';
-
-    /**
-     * The validation state for this number field.
-     */
-    validation?: null | 'invalid' | 'valid';
-
-    /**
-     * Additional number field validation message, requires the validation property set either to 
-     * valid or invalid.
-     */
-    validationMessage?: null | string;
-
-    /**
-     * The disabled state for this number field.
-     */
-    disabled?: MaybeRef<boolean>;
-
-    /**
-     * The readonly state for this number field.
-     */
-    readonly?: MaybeRef<boolean>;
-
-    /**
-     * The required state for this number field.
-     */
-    required?: MaybeRef<boolean>;
 }
 
 /**
@@ -118,7 +80,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
+import { computed, toValue } from 'vue';
 import ActionButton from '../button/ActionButton.vue';
 import InputField from '../control/InputField.vue';
 import LucideMinusSign from '../lucide/MinusSign.vue';
diff --git a/src/components/control/PasswordField.vue b/src/components/control/PasswordField.vue
index 7b78df8..5967561 100644
--- a/src/components/control/PasswordField.vue
+++ b/src/components/control/PasswordField.vue
@@ -12,29 +12,14 @@
 
 <script lang="ts">
 import type { MaybeRef } from 'vue';
+import type { SharedControlProps } from '../form/FormControl.vue';
 
 export type PasswordAutoCompleteValues = 'new-password' | 'current-password' | 'one-time-code' | 'webauthn';
 
 /**
  * PasswordField Properties
  */
-export interface PasswordFieldProps {
-    /**
-     * A custom password field id, usually passed by the FormControl component. The default value is an 
-     * auto-generated UUID.
-     */
-    id?: null | string;
-
-    /**
-     * The name attribute for this password field.
-     */
-    name?: null | string;
-
-    /**
-     * The value for this password field, must be passed as v-model value.
-     */
-    modelValue?: null | string;
-
+export interface PasswordFieldProps extends SharedControlProps<null | string> {
     /**
      * The placeholder attribute for this password field.
      */
@@ -49,32 +34,6 @@ export interface PasswordFieldProps {
      * The desired size for this password field, note that `md` is the default value.
      */
     size?: 'sm' | 'md' | 'lg';
-
-    /**
-     * The validation state for this password field.
-     */
-    validation?: null | 'invalid' | 'valid';
-
-    /**
-     * Additional password field validation message, requires the validation property set either to 
-     * valid or invalid.
-     */
-    validationMessage?: null | string;
-
-    /**
-     * The disabled state for this password field.
-     */
-    disabled?: MaybeRef<boolean>;
-
-    /**
-     * The readonly state for this password field.
-     */
-    readonly?: MaybeRef<boolean>;
-
-    /**
-     * The required state for this password field.
-     */
-    required?: MaybeRef<boolean>;
 }
 
 /**
diff --git a/src/components/control/PriceField.vue b/src/components/control/PriceField.vue
index 5ee46b0..de4c307 100644
--- a/src/components/control/PriceField.vue
+++ b/src/components/control/PriceField.vue
@@ -8,6 +8,10 @@
             @keydown="onKeyDown" 
             @blur="onBlur" 
             inputmode="numeric"
+            :tabindex="props.tabindex"
+            :disabled="toValue(props.disabled || false) || typeof disabled == 'string'"
+            :required="toValue(props.required || false) || typeof required == 'string'"
+            :invalid="props.validation == 'invalid' ? true : void 0"
             v-model="value" />
         <LucideCurrencyBitcoin v-if="props.icon == 'bitcoin'" v-bind="iconBinding" class="field-currency-icon" />
         <LucideCurrencyDefault v-else-if="props.icon == 'currency'" v-bind="iconBinding" class="field-currency-icon" />
@@ -24,29 +28,13 @@
 </template>
 
 <script lang="ts">
-import type { Component, MaybeRef } from 'vue';
+import type { Component } from 'vue';
+import type { SharedControlProps } from '../form/FormControl.vue';
 
 /**
  * PriceField Properties
  */
-export interface PriceFieldProps {
-
-    /**
-     * A custom price field id, usually passed by the FormControl component. The default value is an 
-     * auto-generated UUID.
-     */
-    id?: null | string;
-
-    /**
-     * The name attribute for this price field.
-     */
-    name?: null | string;
-
-    /**
-     * The value for this price field, must be passed as v-model value.
-     */
-    modelValue?: null | number | string;
-
+export interface PriceFieldProps extends SharedControlProps<null | number | string> {
     /**
      * An additional icon which is displayed right within the input field, if available.
      */
@@ -91,32 +79,6 @@ export interface PriceFieldProps {
      * The desired size for this price field, note that `md` is the default value.
      */
     size?: 'sm' | 'md' | 'lg';
-
-    /**
-     * The validation state for this price field.
-     */
-    validation?: null | 'invalid' | 'valid';
-
-    /**
-     * Additional price field validation message, requires the validation property set either to 
-     * valid or invalid.
-     */
-    validationMessage?: null | string;
-
-    /**
-     * The disabled state for this price field.
-     */
-    disabled?: MaybeRef<boolean>;
-
-    /**
-     * The readonly state for this price field.
-     */
-    readonly?: MaybeRef<boolean>;
-
-    /**
-     * The required state for this price field.
-     */
-    required?: MaybeRef<boolean>;
 }
 
 /**
@@ -136,7 +98,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, toValue } from 'vue';
 import InputField from '../control/InputField.vue';
 import LucideCurrencyBitcoin from '../lucide/CurrencyBitcoin.vue';
 import LucideCurrencyDefault from '../lucide/CurrencyDefault.vue';
diff --git a/src/components/control/RadioField.vue b/src/components/control/RadioField.vue
index 354fb8f..ba20628 100644
--- a/src/components/control/RadioField.vue
+++ b/src/components/control/RadioField.vue
@@ -11,7 +11,6 @@
             :name="props.name || fieldId"
             :value="props.value ? props.value : true"
             :disabled="toValue(props.disabled || false) || typeof disabled == 'string'"
-            :readonly="toValue(props.readonly || false) || typeof readonly == 'string'"
             :required="toValue(props.required || false) || typeof required == 'string'"
             v-model="value" />
         <label :for="`${fieldId}-input`" class="radio-label">
@@ -22,68 +21,27 @@
 
 <script lang="ts">
 import type { MaybeRef } from 'vue';
+import type { SharedControlProps } from '../form/FormControl.vue';
 
 /**
  * RadioField Properties
  */
-export interface RadioFieldProps {
+export interface RadioFieldProps extends SharedControlProps<null | boolean | number | string> {
     /**
-     * A custom radio field id, usually passed by the FormControl component. The default value 
-     * is an auto-generated UUID.
-     */
-    id?: null | string;
-
-    /**
-     * The label for this radio field.
+     * The label for this checkbox field.
      */
     label?: null | string;
-
-    /**
-     * The name attribute for this radio field.
-     */
-    name?: null | string;
-
+    
     /**
      * The value attribute for this radio field, pass nothing to use binary mode with true and 
      * false.
      */
     value?: null | string;
 
-    /**
-     * The value for this radio field, must be passed as v-model value.
-     */
-    modelValue?: null | boolean | number | string;
-
     /**
      * The desired size for this radio field, note that `md` is the default value.
      */
     size?: 'sm' | 'md' | 'lg';
-
-    /**
-     * The disabled state for this radio field.
-     */
-    disabled?: MaybeRef<boolean>;
-
-    /**
-     * The readonly state for this radio field.
-     */
-    readonly?: MaybeRef<boolean>;
-
-    /**
-     * The required state for this radio field.
-     */
-    required?: MaybeRef<boolean>;
-
-    /**
-     * The validation state for this radio field.
-     */
-    validation?: null | 'invalid' | 'valid';
-
-    /**
-     * Additional radio field validation message, requires the validation property set either to 
-     * valid or invalid.
-     */
-    validationMessage?: null | string;
 }
 
 /**
diff --git a/src/components/control/SelectField.vue b/src/components/control/SelectField.vue
index bf8836a..cb1eafe 100644
--- a/src/components/control/SelectField.vue
+++ b/src/components/control/SelectField.vue
@@ -8,6 +8,7 @@
             props.size ? `field-${props.size}` : '',
             props.validation ? `field-${props.validation}` : ''
         ]"
+        :tabindex="props.tabindex"
         :disabled="toValue(props.disabled || false) || typeof disabled == 'string'"
         :required="toValue(props.required || false) || typeof required == 'string'"
         :invalid="props.validation == 'invalid' ? true : void 0"
diff --git a/src/components/control/SelectableList.vue b/src/components/control/SelectableList.vue
index 0314c36..dd031d7 100644
--- a/src/components/control/SelectableList.vue
+++ b/src/components/control/SelectableList.vue
@@ -9,16 +9,18 @@
             <CheckboxField v-for="(option, idx) of props.options" :key="`${fieldId}-${idx}`"
                 :label="Array.isArray(option) ? (option[1] || option[0]).toString() : option.label"
                 :value="Array.isArray(option) ? option[0].toString() : option.value"
+                :tabindex="props.tabindex"
                 :disabled="isDisabled || (!Array.isArray(option) ? option.disabled : false)"
                 :required="isRequired"
                 :size="props.size"
-                v-model="value" />
+                v-model="(value as number | string)" />
         </template>
 
         <template v-else>
             <RadioField v-for="(option, idx) of props.options" :key="`${fieldId}-${idx}`"
                 :label="Array.isArray(option) ? (option[1] || option[0]).toString() : option.label"
                 :value="Array.isArray(option) ? option[0].toString() : option.value"
+                :tabindex="props.tabindex"
                 :disabled="isDisabled || (!Array.isArray(option) ? option.disabled : false)"
                 :required="isRequired"
                 :size="props.size"
@@ -29,6 +31,7 @@
 
 <script lang="ts">
 import type { MaybeRef } from 'vue';
+import type { SharedControlProps } from '../form/FormControl.vue';
 
 export type SimpleOption = [string|number] | [string|number, string];
 export interface AdvancedOption {
@@ -52,23 +55,7 @@ export type SelectableListOptionTypes = SimpleOption|AdvancedOption;
 /**
  * SelectableList Properties
  */
-export interface SelectableListProps {
-    /**
-     * A custom selectable list id, usually passed by the FormControl component. The default value 
-     * is an auto-generated UUID.
-     */
-    id?: null | string;
-
-    /**
-     * The name attribute for this selectable list.
-     */
-    name?: null | string;
-
-    /**
-     * The value for this selectable list, must be passed as v-model value.
-     */
-    modelValue?: null | string | number | (string|number)[];
-
+export interface SelectableListProps extends SharedControlProps<null | string | number | (string|number)[]> {
     /**
      * The available options to be available on this selectable list field.
      */
@@ -83,32 +70,6 @@ export interface SelectableListProps {
      * Whether to support the selection of multiple options or not.
      */
     multiple?: boolean;
-
-    /**
-     * The disabled state for this selectable list.
-     */
-    disabled?: MaybeRef<boolean>;
-
-    /**
-     * The readonly state for this selectable list.
-     */
-    readonly?: MaybeRef<boolean>;
-
-    /**
-     * The required state for this selectable list.
-     */
-    required?: MaybeRef<boolean>;
-
-    /**
-     * The validation state for this selectable list.
-     */
-    validation?: null | 'invalid' | 'valid';
-
-    /**
-     * Additional selectable list validation message, requires the validation property set either to 
-     * valid or invalid.
-     */
-    validationMessage?: null | string;
 }
 
 /**
@@ -159,8 +120,6 @@ const fieldId = computed<string>(() => props.id || `field-${uuid().replace(/-/g,
 const isDisabled = computed<boolean>(() => {
     if (toValue(props.disabled || false) || typeof props.disabled == 'string') {
         return true;
-    } else if (toValue(props.readonly || false) || typeof props.readonly == 'string') {
-        return true;
     } else {
         return false;
     }
diff --git a/src/components/control/SwitchField.vue b/src/components/control/SwitchField.vue
index ba48c2b..4fc0668 100644
--- a/src/components/control/SwitchField.vue
+++ b/src/components/control/SwitchField.vue
@@ -10,8 +10,8 @@
             class="switch-input"
             :name="props.name || fieldId"
             :value="true"
+            :tabindex="props.tabindex"
             :disabled="toValue(props.disabled || false) || typeof disabled == 'string'"
-            :readonly="toValue(props.readonly || false) || typeof readonly == 'string'"
             :required="toValue(props.required || false) || typeof required == 'string'"
             v-model="value" />
         <label :for="`${fieldId}-input`" class="switch-label">
@@ -21,63 +21,21 @@
 </template>
 
 <script lang="ts">
-import type { MaybeRef } from 'vue';
+import type { SharedControlProps } from '../form/FormControl.vue';
 
 /**
  * SwitchField Properties
  */
-export interface SwitchFieldProps {
-    /**
-     * A custom switch field id, usually passed by the FormControl component. The default value 
-     * is an auto-generated UUID.
-     */
-    id?: null | string;
-
+export interface SwitchFieldProps extends SharedControlProps<null | boolean> {
     /**
      * The label for this switch field.
      */
     label?: null | string;
 
-    /**
-     * The name attribute for this switch field.
-     */
-    name?: null | string;
-
-    /**
-     * The value for this switch field, must be passed as v-model value.
-     */
-    modelValue?: null | boolean;
-
     /**
      * The desired size for this switch field, note that `md` is the default value.
      */
     size?: 'sm' | 'md' | 'lg';
-
-    /**
-     * The disabled state for this switch field.
-     */
-    disabled?: MaybeRef<boolean>;
-
-    /**
-     * The readonly state for this switch field.
-     */
-    readonly?: MaybeRef<boolean>;
-
-    /**
-     * The required state for this switch field.
-     */
-    required?: MaybeRef<boolean>;
-
-    /**
-     * The validation state for this switch field.
-     */
-    validation?: null | 'invalid' | 'valid';
-
-    /**
-     * Additional checkbox field validation message, requires the validation property set either to 
-     * valid or invalid.
-     */
-    validationMessage?: null | string;
 }
 
 /**
diff --git a/src/components/control/TextareaField.vue b/src/components/control/TextareaField.vue
index f2bd6a6..31db82e 100644
--- a/src/components/control/TextareaField.vue
+++ b/src/components/control/TextareaField.vue
@@ -9,8 +9,8 @@
             props.size ? `field-${props.size}` : '',
             props.validation ? `field-${props.validation}` : ''
         ]" 
+        :tabindex="props.tabindex"
         :disabled="toValue(props.disabled || false) || typeof disabled == 'string'"
-        :readonly="toValue(props.readonly || false) || typeof readonly == 'string'"
         :required="toValue(props.required || false) || typeof required == 'string'"
         :invalid="props.validation == 'invalid' ? true : void 0"
         v-model="value"></textarea>
@@ -18,27 +18,12 @@
 
 <script lang="ts">
 import type { MaybeRef } from 'vue';
+import type { SharedControlProps } from '../form/FormControl.vue';
 
 /**
  * TextareaField Properties
  */
-export interface TextareaFieldProps {
-    /**
-     * A custom textarea field id, usually passed by the FormControl component. The default value is an 
-     * auto-generated UUID.
-     */
-    id?: null | string;
-
-    /**
-     * The name attribute for this textarea field.
-     */
-    name?: null | string;
-
-    /**
-     * The value for this textarea field, must be passed as v-model value.
-     */
-    modelValue?: null | string;
-
+export interface TextareaFieldProps extends SharedControlProps<null | string> {
     /**
      * The placeholder attribute for this textarea field.
      */
@@ -48,32 +33,6 @@ export interface TextareaFieldProps {
      * The desired size for this textarea field, note that `md` is the default value.
      */
     size?: 'sm' | 'md' | 'lg';
-
-    /**
-     * The validation state for this textarea field.
-     */
-    validation?: null | 'invalid' | 'valid';
-
-    /**
-     * Additional textarea field validation message, requires the validation property set either to 
-     * valid or invalid.
-     */
-    validationMessage?: null | string;
-
-    /**
-     * The disabled state for this textarea field.
-     */
-    disabled?: MaybeRef<boolean>;
-
-    /**
-     * The readonly state for this textarea field.
-     */
-    readonly?: MaybeRef<boolean>;
-
-    /**
-     * The required state for this textarea field.
-     */
-    required?: MaybeRef<boolean>;
 }
 
 /**
diff --git a/src/components/control/TimeFrame.vue b/src/components/control/TimeFrame.vue
index c9f6539..b8550de 100644
--- a/src/components/control/TimeFrame.vue
+++ b/src/components/control/TimeFrame.vue
@@ -3,37 +3,27 @@
         <InputField v-bind="props" 
             type="time" 
             :step="props.seconds"
+            :tabindex="props.tabindex"
+            :disabled="toValue(props.disabled || false) || typeof disabled == 'string'"
+            :required="toValue(props.required || false) || typeof required == 'string'"
             v-model="valueStart" />
         <InputField v-bind="props" 
             type="time" 
             :step="props.seconds"
+            :tabindex="props.tabindex"
+            :disabled="toValue(props.disabled || false) || typeof disabled == 'string'"
+            :required="toValue(props.required || false) || typeof required == 'string'"
             v-model="valueEnd" />
     </FormFieldGroup>
 </template>
 
 <script lang="ts">
-import type { MaybeRef } from 'vue';
+import type { SharedControlProps } from '../form/FormControl.vue';
 
 /**
  * TimeFrame Properties
  */
-export interface TimeFrameProps {
-    /**
-     * A custom time-frame field id, usually passed by the FormControl component. The default value is an 
-     * auto-generated UUID.
-     */
-    id?: null | string;
-
-    /**
-     * The name attribute for this time-frame field.
-     */
-    name?: null | string;
-
-    /**
-     * The value for this time-frame field, must be passed as v-model value.
-     */
-    modelValue?: null | string;
-
+export interface TimeFrameProps extends SharedControlProps<null | string> {
     /**
      * The desired time between start and end using the 01:25:00 syntax (last part can be omitted).
      */
@@ -48,32 +38,6 @@ export interface TimeFrameProps {
      * The desired size for this time-frame field, note that `md` is the default value.
      */
     size?: 'sm' | 'md' | 'lg';
-
-    /**
-     * The validation state for this time-frame field.
-     */
-    validation?: null | 'invalid' | 'valid';
-
-    /**
-     * Additional time-frame field validation message, requires the validation property set either to 
-     * valid or invalid.
-     */
-    validationMessage?: null | string;
-
-    /**
-     * The disabled state for this time-frame field.
-     */
-    disabled?: MaybeRef<boolean>;
-
-    /**
-     * The readonly state for this time-frame field.
-     */
-    readonly?: MaybeRef<boolean>;
-
-    /**
-     * The required state for this time-frame field.
-     */
-    required?: MaybeRef<boolean>;
 }
 
 /**
@@ -93,7 +57,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, nextTick, ref, watch } from 'vue';
+import { computed, nextTick, ref, toValue, watch } from 'vue';
 import InputField from '../control/InputField.vue';
 import FormFieldGroup from '../form/FormFieldGroup.vue';
 
diff --git a/src/components/control/TimeSlots.vue b/src/components/control/TimeSlots.vue
index 51e8ad1..1dc0b60 100644
--- a/src/components/control/TimeSlots.vue
+++ b/src/components/control/TimeSlots.vue
@@ -18,6 +18,7 @@
 
 <script lang="ts">
 import type { MaybeRef } from 'vue';
+import type { SharedControlProps } from '../form/FormControl.vue';
 
 export interface TimeSlotOption {
     /**
@@ -54,23 +55,7 @@ export interface TimeSlotOption {
 /**
  * TimeSlots Properties
  */
-export interface TimeSlotsProps {
-    /**
-     * A custom time-slots field id, usually passed by the FormControl component. The default value is an 
-     * auto-generated UUID.
-     */
-    id?: null | string;
-
-    /**
-     * The name attribute for this time-slots field.
-     */
-    name?: null | string;
-
-    /**
-     * The value for this time-slots field, must be passed as v-model value.
-     */
-    modelValue?: null | string;
-
+export interface TimeSlotsProps extends SharedControlProps<null | string> {
     /**
      * The available slots to book.
      */
@@ -80,32 +65,6 @@ export interface TimeSlotsProps {
      * The desired size for this time-slots field, note that `md` is the default value.
      */
     size?: 'sm' | 'md' | 'lg';
-
-    /**
-     * The validation state for this time-slots field.
-     */
-    validation?: null | 'invalid' | 'valid';
-
-    /**
-     * Additional time-slots field validation message, requires the validation property set either
-     * to valid or invalid.
-     */
-    validationMessage?: null | string;
-
-    /**
-     * The disabled state for this time-slots field.
-     */
-    disabled?: MaybeRef<boolean>;
-
-    /**
-     * The readonly state for this time-slots field.
-     */
-    readonly?: MaybeRef<boolean>;
-
-    /**
-     * The required state for this time-slots field.
-     */
-    required?: MaybeRef<boolean>;
 }
 
 /**
diff --git a/src/components/form/FormControl.vue b/src/components/form/FormControl.vue
index aa536ca..e4bcefc 100644
--- a/src/components/form/FormControl.vue
+++ b/src/components/form/FormControl.vue
@@ -60,6 +60,11 @@ export interface SharedControlProps<T = any> {
      */
     name?: null | string;
 
+    /**
+     * The tabindex attribute for this form control field.
+     */
+    tabindex?: number | string;
+
     /**
      * The v-model value attribute for this form control field.
      */