diff --git a/src/components/SelectInput.stories.ts b/src/components/SelectInput.stories.ts
index 77d632d..db0d69b 100644
--- a/src/components/SelectInput.stories.ts
+++ b/src/components/SelectInput.stories.ts
@@ -47,16 +47,22 @@ export const Standard: Story = {
 };
 
 export const Disabled: Story = {
-  args: {
-    name: 'disabled',
-    disabled: true,
+  render: () => ({
+    components: { SelectInput },
+    template: `
+      <select-input name="select-disabled" disabled />
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: { code: '<select-input name="select-disabled" :options="[...]" disabled />' },
+    },
   },
 };
 
 export const Required: Story = {
   args: {
     name: 'required',
-    required: true,
     modelValue: '',
     help: 'Choose wisely.',
     options: [
@@ -74,7 +80,7 @@ export const Required: Story = {
     },
     template: `
       <div>
-        <select-input v-bind="args" ref="input" />
+        <select-input v-bind="args" ref="input" required />
         <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;margin-top: 0.5rem;">
           <button @click="triggerInvalid">
             Trigger Invalid State
@@ -104,6 +110,19 @@ export const Autofocus: Story = {
       { label: 'Rost', value: 'rost' },
       { label: 'Sylens', value: 'sylens' },
     ],
-    autofocus: true,
+  },
+  render: (args) => ({
+    components: { SelectInput },
+    setup() {
+      return { args };
+    },
+    template: `
+      <select-input v-bind="args" autofocus />
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: { code: '<select-input name="select-autofocus" :options="[...]" disabled />' },
+    },
   },
 };
diff --git a/src/components/SelectInput.vue b/src/components/SelectInput.vue
index a2b0b0c..fc11155 100644
--- a/src/components/SelectInput.vue
+++ b/src/components/SelectInput.vue
@@ -2,34 +2,47 @@
 /**
  * @note The default slot is deprecated and will be removed in future releases
  */
-import { ref } from 'vue';
-import { type SelectOption } from '@/models';
+import { ref, useAttrs } from 'vue';
+import type { ElementEvent, SelectOption } from '@/models';
 import ErrorIcon from '@/foundation/ErrorIcon.vue';
 import CaretDownIcon from '@/foundation/CaretDownIcon.vue';
 
+const attrs = useAttrs();
+const model = defineModel<number | string>();
+const isInvalid = ref(false);
+const isDirty = ref(false);
+const isRequired = Object.hasOwn(attrs, 'required') && attrs.required !== false;
+const inputRef = ref<HTMLSelectElement>(null);
+const validationMessage = ref('');
+
+const emit = defineEmits(['submit', 'blur']);
+
 // component properties
 interface Props {
   name: string;
   label?: string;
   options: SelectOption<number | string>[];
   help?: string;
-  required?: boolean;
-  autofocus?: boolean;
-  disabled?: boolean;
+  error?: string;
   dataTestid?: string;
 }
 withDefaults(defineProps<Props>(), {
   label: null,
-  required: false,
-  autofocus: false,
-  disabled: false,
   dataTestid: 'select-input',
 });
 
-const model = defineModel<number | string>();
-const isInvalid = ref(false);
-const isDirty = ref(false);
-const validationMessage = ref('');
+defineOptions({ inheritAttrs: false });
+
+/**
+ * Forwards focus intent to the select element.
+ * Unlike HTMLElement.focus() this does not take any parameters.
+ */
+const focus = () => {
+  if (!inputRef.value) {
+    return;
+  }
+  inputRef.value.focus();
+};
 
 /**
  * Resets the component's internal validation state and clears the input value.
@@ -42,22 +55,27 @@ const reset = () => {
   validationMessage.value = '';
 };
 
-const onInvalid = (evt: Event) => {
+const onInvalid = (evt: ElementEvent<HTMLSelectElement>) => {
   isInvalid.value = true;
-  validationMessage.value = (evt.target as HTMLSelectElement).validationMessage;
+  validationMessage.value = evt.target.validationMessage;
 };
-const onInput = (evt: InputEvent) => {
+const onInput = () => {
   isDirty.value = true;
+  isInvalid.value = false;
+  validationMessage.value = '';
+  inputRef.value.setCustomValidity('');
+};
 
-  // Revalidate on input change
-  if ((evt.target as HTMLSelectElement).checkValidity()) {
+const onBlur = (evt: ElementEvent<HTMLSelectElement>) => {
+  if (isDirty.value && evt.target.checkValidity()) {
     isInvalid.value = false;
     validationMessage.value = '';
   }
+
+  emit('blur');
 };
 
-defineEmits(['submit']);
-defineExpose({ reset });
+defineExpose({ focus, reset });
 </script>
 
 <template>
@@ -65,21 +83,21 @@ defineExpose({ reset });
     <span v-if="label || $slots.default" class="label">
       <template v-if="label">{{ label }}</template>
       <slot v-else />
-      <span v-if="required && (model === null || model === '')" class="required">*</span>
+      <span v-if="isRequired && (model === null || model === '')" class="required">*</span>
     </span>
     <div class="tbpro-select-container">
       <select
-        class="tbpro-select"
-        :class="{ dirty: isDirty, invalid: isInvalid }"
+        v-bind="attrs"
         v-model="model"
+        class="tbpro-select"
+        :class="{ dirty: isDirty, error: error }"
         :id="name"
         :name="name"
-        :required="required"
-        :autofocus="autofocus"
-        :disabled="disabled"
         @invalid="onInvalid"
         @input="onInput"
+        @blur="onBlur"
         :data-testid="dataTestid"
+        ref="inputRef"
       >
         <option v-for="option in options" :value="option.value" :key="option.value">
           {{ option.label }}
@@ -180,7 +198,7 @@ defineExpose({ reset });
     color: var(--colour-ti-muted);
   }
 
-  &:hover {
+  &:hover:not(:disabled) {
     border-color: var(--colour-neutral-border-intense);
   }
 
@@ -198,7 +216,9 @@ defineExpose({ reset });
     cursor: not-allowed;
   }
 
-  &.invalid {
+  &.invalid,
+  &:has(.dirty:invalid):not(:focus-within),
+  &:has(.error):not(:focus-within) {
     border-color: var(--colour-ti-critical);
   }
 }
diff --git a/src/components/TextArea.stories.ts b/src/components/TextArea.stories.ts
index 9a7cef0..6f4b5d4 100644
--- a/src/components/TextArea.stories.ts
+++ b/src/components/TextArea.stories.ts
@@ -46,6 +46,39 @@ export const Standard: Story = {
   },
 };
 
+export const Disabled: Story = {
+  render: () => ({
+    components: { TextArea },
+    template: `
+      <text-area name="disabled-input" label="Full Name" placeholder="e.g. John Doe" disabled />
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `<text-area name="disabled-input" label="Full Name" placeholder="e.g. John Doe" disabled />`,
+      },
+    },
+  },
+};
+
+
+export const ReadOnly: Story = {
+  render: () => ({
+    components: { TextArea },
+    template: `
+      <text-area name="readonly-input" label="Preferred Name" modelValue="Frank, Son Of Frank" readonly />
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `<text-area name="disabled-input" label="Preferred Name" modelValue="Frank, Son Of Frank" readonly />`,
+      },
+    },
+  },
+};
+
 export const Required: Story = {
   decorators: [
     () => ({
diff --git a/src/components/TextArea.vue b/src/components/TextArea.vue
index 8d89459..3ec86f6 100644
--- a/src/components/TextArea.vue
+++ b/src/components/TextArea.vue
@@ -4,20 +4,23 @@
  */
 import { computed, ref, useAttrs } from 'vue';
 import { t } from '@/composable/i18n';
-import ErrorIcon from '@/foundation/ErrorIcon.vue';
 import { useTextareaAutosize } from '@vueuse/core';
+import type { ElementEvent } from '@/models';
+import ErrorIcon from '@/foundation/ErrorIcon.vue';
 
+const attrs = useAttrs();
+const model = defineModel<string>();
 const isInvalid = ref(false);
+const validationMessage = ref('');
 const isDirty = ref(false);
-const model = defineModel<string>();
+const isRequired = Object.hasOwn(attrs, 'required');
+
 const { textarea } = useTextareaAutosize({
   input: model,
   styleProp: 'minHeight', // Provides support for the rows attribute
 });
 
 const charCount = computed(() => model.value?.length ?? 0);
-const attrs = useAttrs();
-const isRequired = Object.hasOwn(attrs, 'required');
 
 /**
  * Forwards focus intent to the text input element.
@@ -38,6 +41,7 @@ const reset = () => {
   model.value = '';
   isInvalid.value = false;
   isDirty.value = false;
+  validationMessage.value = '';
 };
 
 // component properties
@@ -45,6 +49,7 @@ interface Props {
   name: string;
   label?: string;
   help?: string;
+  error?: string;
   smallText?: boolean;
   maxLength?: number | string;
   dataTestid?: string;
@@ -52,18 +57,21 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   label: null,
   help: null,
+  error: null,
   prefix: null,
   smallText: false,
   maxLength: null,
   dataTestid: 'text-area',
 });
 
+const emit = defineEmits(['submit', 'blur']);
 defineExpose({ focus, reset });
 
-const onInvalid = () => {
+const onInvalid = (evt: ElementEvent<HTMLTextAreaElement>) => {
   isInvalid.value = true;
-  isDirty.value = true;
+  validationMessage.value = evt.target.validationMessage;
 };
+
 /**
  * On any change we mark the element as dirty
  * this is so we can delay :invalid until
@@ -71,6 +79,18 @@ const onInvalid = () => {
  */
 const onChange = () => {
   isDirty.value = true;
+  isInvalid.value = false;
+  validationMessage.value = '';
+  textarea.value.setCustomValidity('');
+};
+
+const onBlur = (evt: ElementEvent<HTMLTextAreaElement>) => {
+  if (isDirty.value && evt.target.checkValidity()) {
+    isInvalid.value = false;
+    validationMessage.value = '';
+  }
+
+  emit('blur');
 };
 </script>
 
@@ -83,25 +103,38 @@ const onChange = () => {
     </span>
     <span class="tbpro-textarea" :class="{ 'small-text': props.smallText }">
       <textarea
-        class="tbpro-textarea-element"
-        ref="textarea"
         v-bind="attrs"
         v-model="model"
-        :class="{ dirty: isDirty }"
+        class="tbpro-textarea-element"
+        :class="{
+          dirty: isDirty,
+          error: error !== null,
+        }"
         :id="name"
         :name="name"
-        :maxLength="maxLength"
+        :maxlength="maxLength"
         :data-testid="dataTestid"
         @invalid="onInvalid"
         @change="onChange"
+        @blur="onBlur"
+        ref="textarea"
       />
-      <span v-if="maxLength !== null" class="character-count" aria-live="polite" :aria-label="t('textInput.maxLengthAlt', {currentCount: charCount, maxCount: maxLength})"> {{ charCount }}/{{ maxLength }} </span>
+      <span
+        v-if="maxLength !== null"
+        class="character-count"
+        aria-live="polite"
+        :aria-label="t('textInput.maxLengthAlt', {currentCount: charCount, maxCount: maxLength})"
+      > {{ charCount }}/{{ maxLength }} </span>
     </span>
     <span v-if="isInvalid" class="help-label invalid">
       <error-icon />
-      {{ t('textArea.invalidInput') }}
+      {{ validationMessage }}
+    </span>
+    <span v-else-if="error" class="help-label invalid">
+      <error-icon />
+      {{ error }}
     </span>
-    <span v-else-if="help" class="help-label">
+    <span v-if="help" class="help-label">
       {{ help }}
     </span>
   </label>
diff --git a/src/components/TextInput.vue b/src/components/TextInput.vue
index a9ddd5c..854d33b 100644
--- a/src/components/TextInput.vue
+++ b/src/components/TextInput.vue
@@ -3,11 +3,11 @@
  * @note The default slot is deprecated and will be removed in future releases
  */
 import { ref, computed, useAttrs, type InputTypeHTMLAttribute } from 'vue';
-import { type HTMLInputElementEvent } from '@/models';
+import { type ElementEvent } from '@/models';
+import { t } from '@/composable/i18n';
 import ErrorIcon from '@/foundation/ErrorIcon.vue';
 import EyeOffIcon from '@/foundation/EyeOffIcon.vue';
 import EyeIcon from '@/foundation/EyeIcon.vue';
-import { t } from '@/composable/i18n';
 
 const attrs = useAttrs();
 const model = defineModel<string>();
@@ -16,11 +16,12 @@ const validationMessage = ref('');
 const isDirty = ref(false);
 const isRequired = Object.hasOwn(attrs, 'required');
 const inputRef = ref<HTMLInputElement>(null);
-const inputPrefix = ref<HTMLSpanElement>(null);
 const showPasswordText = t('textInput.passwordIndicator.show');
 const hidePasswordText = t('textInput.passwordIndicator.hide');
 const passwordIndicatorText = ref(showPasswordText);
 
+const charCount = computed(() => model.value?.length ?? 0);
+
 /**
  * Forwards focus intent to the text input element.
  * Unlike HTMLElement.focus() this does not take any parameters.
@@ -73,10 +74,11 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits(['submit', 'blur']);
 defineExpose({ focus, reset });
 
-const onInvalid = (evt: HTMLInputElementEvent) => {
+const onInvalid = (evt: ElementEvent<HTMLInputElement>) => {
   isInvalid.value = true;
   validationMessage.value = evt.target.validationMessage;
 };
+
 /**
  * On any change we mark the element as dirty
  * this is so we can delay :invalid until
@@ -89,7 +91,7 @@ const onChange = () => {
   inputRef.value.setCustomValidity('');
 };
 
-const onBlur = (evt) => {
+const onBlur = (evt: ElementEvent<HTMLInputElement>) => {
   if (isDirty.value && evt.target.checkValidity()) {
     isInvalid.value = false;
     validationMessage.value = '';
@@ -114,8 +116,6 @@ const togglePasswordVisibility = () => {
     passwordIndicatorText.value = showPasswordText;
   }
 };
-
-const charCount = computed(() => model.value?.length ?? 0);
 </script>
 
 <template>
@@ -128,7 +128,7 @@ const charCount = computed(() => model.value?.length ?? 0);
     <span class="tbpro-input" :class="{ 'small-text': props.smallText }">
       <span v-if="outerPrefix" class="tbpro-input-outer-prefix">{{ outerPrefix }}</span>
       <span class="tbpro-input-wrapper" :class="{'small-input': props.smallInput}">
-        <span v-if="prefix" ref="inputPrefix" class="tbpro-input-prefix">{{ prefix }}</span>
+        <span v-if="prefix" class="tbpro-input-prefix">{{ prefix }}</span>
         <input
           v-bind="attrs"
           v-model="model"
@@ -140,7 +140,7 @@ const charCount = computed(() => model.value?.length ?? 0);
           :type="inputType"
           :id="name"
           :name="name"
-          :maxLength="maxLength"
+          :maxlength="maxLength"
           :data-testid="dataTestid"
           @invalid="onInvalid"
           @change="onChange"
@@ -159,7 +159,12 @@ const charCount = computed(() => model.value?.length ?? 0);
           <eye-icon class="icon" alt="" v-if="passwordIsVisible === true" />
           <eye-off-icon class="icon" alt="" v-else-if="passwordIsVisible === false" />
         </span>
-        <span v-else-if="maxLength !== null" class="character-count tbpro-input-suffix" aria-live="polite" :aria-label="t('textInput.maxLengthAlt', {currentCount: charCount, maxCount: maxLength})"> {{ charCount }}/{{ maxLength }}</span>
+        <span
+          v-else-if="maxLength !== null"
+          class="character-count tbpro-input-suffix"
+          aria-live="polite"
+          :aria-label="t('textInput.maxLengthAlt', {currentCount: charCount, maxCount: maxLength})"
+        > {{ charCount }}/{{ maxLength }}</span>
       </span>
       <span v-if="outerSuffix" class="tbpro-input-outer-suffix">{{ outerSuffix }}</span>
     </span>
diff --git a/src/locales/de.json b/src/locales/de.json
index 68ef3db..9a6bc0c 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -61,9 +61,6 @@
     "off": "Aus",
     "on": "An"
   },
-  "textArea": {
-    "invalidInput": "Ungültige Eingabe"
-  },
   "textInput": {
     "passwordIndicator": {
       "show": "Passwort anzeigen",
diff --git a/src/locales/en.json b/src/locales/en.json
index 8c327af..c4794b3 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -61,9 +61,6 @@
     "off": "Off",
     "on": "On"
   },
-  "textArea": {
-    "invalidInput": "Invalid input"
-  },
   "textInput": {
     "passwordIndicator": {
       "show": "Show password",
diff --git a/src/models.ts b/src/models.ts
index 797f5fe..803aa1a 100644
--- a/src/models.ts
+++ b/src/models.ts
@@ -26,11 +26,7 @@ export type Coloring = {
   background?: string;
 };
 
-export type HTMLElementEvent = Event & {
-  target: HTMLElement;
-  currentTarget: HTMLElement;
-};
-export type HTMLInputElementEvent = Event & {
-  target: HTMLInputElement;
-  currentTarget: HTMLInputElement;
+export type ElementEvent<T> = Event & {
+  target: T;
+  currentTarget: T;
 };
diff --git a/test/components/SelectInput.test.js b/test/components/SelectInput.test.js
index f27d087..45fcdf0 100644
--- a/test/components/SelectInput.test.js
+++ b/test/components/SelectInput.test.js
@@ -33,57 +33,24 @@ describe('SelectInput', () => {
     { 
       options: options,
       defaultSelected: options[2]['value'],
+      error: null,
       helpText: null,
-      required: false,
-      autoFocus: false,
-      disabled: false,
       dataTestid: 'standard-select-input',
     },
     { 
       options: options,
       defaultSelected: null,
+      error: null,
       helpText: null,
-      required: false,
-      autoFocus: false,
-      disabled: false,
       dataTestid: 'select-input-no-default',
     },
     { 
       options: options,
       defaultSelected: options[0]['value'],
+      error: null,
       helpText: 'This is the help text!',
-      required: false,
-      autoFocus: false,
-      disabled: false,
       dataTestid: 'select-input-help-text',
     },
-    { 
-      options: options,
-      defaultSelected: null,
-      helpText: null,
-      required: true,
-      autoFocus: false,
-      disabled: false,
-      dataTestid: 'select-input-required',
-    },
-    { 
-      options: options,
-      defaultSelected: options[0]['value'],
-      helpText: null,
-      required: false,
-      autoFocus: true,
-      disabled: false,
-      dataTestid: 'select-input-autofocus',
-    },
-    { 
-      options: options,
-      defaultSelected: options[0]['value'],
-      helpText: null,
-      required: false,
-      autoFocus: false,
-      disabled: true,
-      dataTestid: 'select-input-disabled',
-    },
   ];
 
   afterEach(() => {
@@ -91,16 +58,14 @@ describe('SelectInput', () => {
   });
 
   it.each(testCases)('renders correctly with the given options',
-    async ({ options, defaultSelected, helpText, required, autoFocus, disabled, dataTestid }) => {
+    async ({ options, defaultSelected, error, helpText, dataTestid }) => {
     const ourProps = {
       name: 'standard',
       label: 'Will your favourite MLB team win the world series this year?',
       options: options,
       modelValue: defaultSelected,
+      error: error,
       help: helpText,
-      required: required,
-      autofocus: autoFocus,
-      disabled: disabled,
       dataTestid: dataTestid,
     };
 
diff --git a/test/components/TextArea.test.js b/test/components/TextArea.test.js
index e710cc1..252c40c 100644
--- a/test/components/TextArea.test.js
+++ b/test/components/TextArea.test.js
@@ -10,6 +10,7 @@ describe('TextArea', () => {
   const testCases = [
     { 
       label: 'This is the TextArea label!',
+      error: null,
       help: null,
       smallText: false,
       maxLength: null,
@@ -18,6 +19,7 @@ describe('TextArea', () => {
     },
     { 
       label: 'This is the TextArea label!',
+      error: null,
       help: 'Please type in some text',
       smallText: false,
       maxLength: null,
@@ -26,6 +28,7 @@ describe('TextArea', () => {
     },
     { 
       label: 'This is the TextArea label!',
+      error: null,
       help: null,
       smallText: true,
       maxLength: null,
@@ -34,6 +37,7 @@ describe('TextArea', () => {
     },
     { 
       label: 'This is the TextArea label!',
+      error: null,
       help: null,
       smallText: false,
       maxLength: 25,
@@ -42,6 +46,7 @@ describe('TextArea', () => {
     },
     { 
       label: 'This is the TextArea label!',
+      error: null,
       help: null,
       smallText: false,
       maxLength: null,
@@ -50,6 +55,7 @@ describe('TextArea', () => {
     },
     { 
       label: 'This is the TextArea label!',
+      error: null,
       help: null,
       smallText: false,
       maxLength: 25,
@@ -58,6 +64,7 @@ describe('TextArea', () => {
     },    
     { 
       label: 'This is the TextArea label!',
+      error: null,
       help: null,
       smallText: false,
       maxLength: null,
@@ -66,6 +73,7 @@ describe('TextArea', () => {
     },
     { 
       label: 'This is the TextArea label!',
+      error: null,
       help: null,
       smallText: false,
       maxLength: null,
@@ -79,10 +87,11 @@ describe('TextArea', () => {
   });
 
   it.each(testCases)('renders correctly with the given options',
-    async ({ label, help, smallText, maxLength, modelValue, dataTestid}) => {
+    async ({ label, error, help, smallText, maxLength, modelValue, dataTestid}) => {
     const ourProps = {
       name: 'text-area-test',
       label: label,
+      error: error,
       help: help,
       smallText: smallText,
       maxLength: maxLength,