diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 4fa198ad..6244467c 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -17,7 +17,7 @@
         "@vee-validate/i18n": "~4.9.6",
         "@vee-validate/rules": "~4.9.6",
         "bootstrap": "^5.3.3",
-        "logitar-vue3-ui": "^2.0.5",
+        "logitar-vue3-ui": "^2.4.0",
         "nanoid": "^5.0.7",
         "pinia": "^2.1.7",
         "pinia-plugin-persistedstate": "^3.2.1",
@@ -4542,9 +4542,9 @@
       "dev": true
     },
     "node_modules/logitar-vue3-ui": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/logitar-vue3-ui/-/logitar-vue3-ui-2.0.5.tgz",
-      "integrity": "sha512-7e6rE/6ledK9+BdrPHraOXneygLE9NEJnGXhFAuOJt/1UTdoxTN3iboU0GLX651y/9ULWFcdtKXTyyaNKc32Dw==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/logitar-vue3-ui/-/logitar-vue3-ui-2.4.0.tgz",
+      "integrity": "sha512-p4JHMHcF1UaDTm14FgHXUszx1/qiDdaHBmidKOGS23vfA7Z2MZqSpcJfjxc0Ggy9SSh+9/VfORtpesp1UqobsQ==",
       "dependencies": {
         "md5": "^2.3.0",
         "nanoid": "^5.0.4"
diff --git a/frontend/package.json b/frontend/package.json
index 88dd8a34..d6a32294 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -24,7 +24,7 @@
     "@vee-validate/i18n": "~4.9.6",
     "@vee-validate/rules": "~4.9.6",
     "bootstrap": "^5.3.3",
-    "logitar-vue3-ui": "^2.0.5",
+    "logitar-vue3-ui": "^2.4.0",
     "nanoid": "^5.0.7",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
diff --git a/frontend/src/components/articles/ArticleSelect.vue b/frontend/src/components/articles/ArticleSelect.vue
index decf2326..f6c70ba4 100644
--- a/frontend/src/components/articles/ArticleSelect.vue
+++ b/frontend/src/components/articles/ArticleSelect.vue
@@ -1,25 +1,36 @@
 <script setup lang="ts">
-import { TarSelect, type SelectOption, type SelectOptions } from "logitar-vue3-ui";
-import { computed, inject, onMounted, ref } from "vue";
-import { useI18n } from "vue-i18n";
+import type { SelectOption } from "logitar-vue3-ui";
+import { computed, onMounted, ref } from "vue";
 
+import AppSelect from "@/components/shared/AppSelect.vue";
 import type { Article } from "@/types/articles";
-import { handleErrorKey } from "@/inject/App";
 import { searchArticles } from "@/api/articles";
 
-const handleError = inject(handleErrorKey) as (e: unknown) => void;
-const { t } = useI18n();
+defineProps<{
+  disabled?: boolean | string;
+  modelValue?: string;
+  required?: boolean | string;
+}>();
 
 const articles = ref<Article[]>([]);
 
 const options = computed<SelectOption[]>(() => articles.value.map(({ id, displayName }) => ({ value: id, text: displayName })));
 
-const props = withDefaults(defineProps<SelectOptions>(), {
-  floating: true,
-  id: "article",
-  label: "articles.select.label",
-  placeholder: "articles.select.placeholder",
-});
+const emit = defineEmits<{
+  (e: "error", value: unknown): void;
+  (e: "selected", value?: Article): void;
+  (e: "update:model-value", value?: string): void;
+}>();
+
+function onModelValueUpdate(id?: string): void {
+  emit("update:model-value", id);
+  if (id) {
+    const article = articles.value.find((article) => article.id === id);
+    emit("selected", article);
+  } else {
+    emit("selected");
+  }
+}
 
 onMounted(async () => {
   try {
@@ -40,26 +51,21 @@ onMounted(async () => {
     });
     articles.value = results.items;
   } catch (e: unknown) {
-    handleError(e);
+    emit("error", e);
   }
 });
-
-const emit = defineEmits<{
-  (e: "selected", value?: Article): void;
-  (e: "update:model-value", value?: string): void;
-}>();
-
-function onModelValueUpdate(id?: string): void {
-  emit("update:model-value", id);
-  if (id) {
-    const article = articles.value.find((article) => article.id === id);
-    emit("selected", article);
-  } else {
-    emit("selected");
-  }
-}
 </script>
 
 <template>
-  <TarSelect v-bind="props" :label="t(label)" :options="options" :placeholder="t(placeholder)" @update:model-value="onModelValueUpdate" />
+  <AppSelect
+    :disabled="disabled"
+    floating
+    id="article"
+    label="articles.select.label"
+    :model-value="modelValue"
+    :options="options"
+    placeholder="articles.select.placeholder"
+    :required="required"
+    @update:model-value="onModelValueUpdate"
+  />
 </template>
diff --git a/frontend/src/components/articles/GtinInput.vue b/frontend/src/components/articles/GtinInput.vue
index 76178cdf..70efcc2c 100644
--- a/frontend/src/components/articles/GtinInput.vue
+++ b/frontend/src/components/articles/GtinInput.vue
@@ -1,16 +1,9 @@
 <script setup lang="ts">
-import { TarInput, type InputOptions } from "logitar-vue3-ui";
-import { useI18n } from "vue-i18n";
+import AppInput from "@/components/shared/AppInput.vue";
 
-const { t } = useI18n();
-
-const props = withDefaults(defineProps<InputOptions>(), {
-  floating: true,
-  id: "gtin",
-  label: "articles.gtin.label",
-  max: 14,
-  placeholder: "articles.gtin.label",
-});
+defineProps<{
+  modelValue?: string;
+}>();
 
 defineEmits<{
   (e: "update:model-value", value?: string): void;
@@ -18,5 +11,14 @@ defineEmits<{
 </script>
 
 <template>
-  <TarInput v-bind="props" :label="t(label)" :placeholder="t(placeholder)" @update:model-value="$emit('update:model-value', $event)" />
+  <AppInput
+    floating
+    id="gtin"
+    label="articles.gtin.label"
+    max="14"
+    :model-value="modelValue"
+    placeholder="articles.gtin.label"
+    :rules="{ allowed_characters: '0123456789' }"
+    @update:model-value="$emit('update:model-value', $event)"
+  />
 </template>
diff --git a/frontend/src/components/banners/BannerSelect.vue b/frontend/src/components/banners/BannerSelect.vue
index 674860ff..92778408 100644
--- a/frontend/src/components/banners/BannerSelect.vue
+++ b/frontend/src/components/banners/BannerSelect.vue
@@ -1,25 +1,35 @@
 <script setup lang="ts">
-import { TarSelect, type SelectOption, type SelectOptions } from "logitar-vue3-ui";
-import { computed, inject, onMounted, ref } from "vue";
-import { useI18n } from "vue-i18n";
+import type { SelectOption } from "logitar-vue3-ui";
+import { computed, onMounted, ref } from "vue";
 
+import AppSelect from "@/components/shared/AppSelect.vue";
 import type { Banner } from "@/types/banners";
-import { handleErrorKey } from "@/inject/App";
 import { searchBanners } from "@/api/banners";
 
-const handleError = inject(handleErrorKey) as (e: unknown) => void;
-const { t } = useI18n();
+defineProps<{
+  modelValue?: string;
+  noStatus?: boolean | string;
+}>();
 
 const banners = ref<Banner[]>([]);
 
 const options = computed<SelectOption[]>(() => banners.value.map(({ id, displayName }) => ({ value: id, text: displayName })));
 
-const props = withDefaults(defineProps<SelectOptions>(), {
-  floating: true,
-  id: "banner",
-  label: "banners.select.label",
-  placeholder: "banners.select.placeholder",
-});
+const emit = defineEmits<{
+  (e: "error", value: unknown): void;
+  (e: "selected", value?: Banner): void;
+  (e: "update:model-value", value?: string): void;
+}>();
+
+function onModelValueUpdate(id?: string): void {
+  emit("update:model-value", id);
+  if (id) {
+    const banner = banners.value.find((banner) => banner.id === id);
+    emit("selected", banner);
+  } else {
+    emit("selected");
+  }
+}
 
 onMounted(async () => {
   try {
@@ -40,26 +50,20 @@ onMounted(async () => {
     });
     banners.value = results.items;
   } catch (e: unknown) {
-    handleError(e);
+    emit("error", e);
   }
 });
-
-const emit = defineEmits<{
-  (e: "selected", value?: Banner): void;
-  (e: "update:model-value", value?: string): void;
-}>();
-
-function onModelValueUpdate(id?: string): void {
-  emit("update:model-value", id);
-  if (id) {
-    const banner = banners.value.find((banner) => banner.id === id);
-    emit("selected", banner);
-  } else {
-    emit("selected");
-  }
-}
 </script>
 
 <template>
-  <TarSelect v-bind="props" :label="t(label)" :options="options" :placeholder="t(placeholder)" @update:model-value="onModelValueUpdate" />
+  <AppSelect
+    floating
+    id="banner"
+    label="banners.select.label"
+    :model-value="modelValue"
+    :no-status="noStatus"
+    :options="options"
+    placeholder="banners.select.placeholder"
+    @update:model-value="onModelValueUpdate"
+  />
 </template>
diff --git a/frontend/src/components/departments/DepartmentEdit.vue b/frontend/src/components/departments/DepartmentEdit.vue
index 56c24f76..79d84f52 100644
--- a/frontend/src/components/departments/DepartmentEdit.vue
+++ b/frontend/src/components/departments/DepartmentEdit.vue
@@ -35,11 +35,22 @@ function hide(): void {
   modalRef.value?.hide();
 }
 
+function setModel(department?: Department) {
+  number.value = department?.number ?? "";
+  displayName.value = department?.displayName ?? "";
+  description.value = department?.description ?? "";
+}
+
 const emit = defineEmits<{
   (e: "error", value: unknown): void;
   (e: "saved", value: Department): void;
 }>();
 
+function onCancel(): void {
+  setModel(props.department);
+  hide();
+}
+
 const { handleSubmit, isSubmitting } = useForm();
 const onSubmit = handleSubmit(async () => {
   try {
@@ -61,9 +72,7 @@ const onSubmit = handleSubmit(async () => {
 
 watchEffect(() => {
   const department = props.department;
-  number.value = department?.number ?? "";
-  displayName.value = department?.displayName ?? "";
-  description.value = department?.description ?? "";
+  setModel(department);
 });
 </script>
 
@@ -83,7 +92,7 @@ watchEffect(() => {
         <DescriptionTextarea v-model="description" />
       </form>
       <template #footer>
-        <TarButton icon="fas fa-ban" :text="t('actions.cancel')" variant="secondary" @click="hide" />
+        <TarButton icon="fas fa-ban" :text="t('actions.cancel')" variant="secondary" @click="onCancel" />
         <TarButton
           :disabled="isSubmitting || !hasChanges"
           :icon="department ? 'fas fa-save' : 'fas fa-plus'"
diff --git a/frontend/src/components/departments/DepartmentList.vue b/frontend/src/components/departments/DepartmentList.vue
index 718c2f38..797a6606 100644
--- a/frontend/src/components/departments/DepartmentList.vue
+++ b/frontend/src/components/departments/DepartmentList.vue
@@ -120,7 +120,7 @@ watch(payload, (payload) => refresh(payload), { deep: true, immediate: true });
     <div class="row">
       <SearchInput class="col-lg-4" v-model="search" />
       <SortSelect class="col-lg-4" :descending="isDescending" :options="sortOptions" v-model="sort" @descending="isDescending = $event" />
-      <CountSelect class="col-lg-4" :model-value="count.toString()" @update:model-value="count = $event ?? 0" />
+      <CountSelect class="col-lg-4" :model-value="count" @update:model-value="count = $event ?? 0" />
     </div>
     <template v-if="departments.length">
       <table class="table table-striped">
diff --git a/frontend/src/components/departments/DepartmentSelect.vue b/frontend/src/components/departments/DepartmentSelect.vue
index 1a1947e8..3bb21b5a 100644
--- a/frontend/src/components/departments/DepartmentSelect.vue
+++ b/frontend/src/components/departments/DepartmentSelect.vue
@@ -1,28 +1,17 @@
 <script setup lang="ts">
-import { TarSelect, type SelectOption, type SelectOptions } from "logitar-vue3-ui";
+import type { SelectOption } from "logitar-vue3-ui";
 import { computed } from "vue";
-import { useI18n } from "vue-i18n";
 
+import AppSelect from "@/components/shared/AppSelect.vue";
 import type { Department } from "@/types/departments";
 import type { Store } from "@/types/stores";
 import { orderBy } from "@/helpers/arrayUtils";
 
-const { t } = useI18n();
-
-const props = withDefaults(
-  defineProps<
-    SelectOptions & {
-      store: Store;
-    }
-  >(),
-  {
-    floating: true,
-    id: "department",
-    label: "departments.select.label",
-    placeholder: "departments.select.placeholder",
-  },
-);
-
+const props = defineProps<{
+  modelValue?: string;
+  noStatus?: boolean | string;
+  store: Store;
+}>();
 const options = computed<SelectOption[]>(() =>
   orderBy(
     props.store.departments.map(({ displayName, number }) => ({ text: displayName, value: number })),
@@ -47,5 +36,14 @@ function onModelValueUpdate(number?: string): void {
 </script>
 
 <template>
-  <TarSelect v-bind="props" :label="t(label)" :options="options" :placeholder="t(placeholder)" @update:model-value="onModelValueUpdate" />
+  <AppSelect
+    floating
+    id="department"
+    label="departments.select.label"
+    :model-value="modelValue"
+    :no-status="noStatus"
+    :options="options"
+    placeholder="departments.select.placeholder"
+    @update:model-value="onModelValueUpdate"
+  />
 </template>
diff --git a/frontend/src/components/products/SkuInput.vue b/frontend/src/components/products/SkuInput.vue
index 86f2d225..045a4503 100644
--- a/frontend/src/components/products/SkuInput.vue
+++ b/frontend/src/components/products/SkuInput.vue
@@ -1,16 +1,9 @@
 <script setup lang="ts">
-import { TarInput, type InputOptions } from "logitar-vue3-ui";
-import { useI18n } from "vue-i18n";
+import AppInput from "@/components/shared/AppInput.vue";
 
-const { t } = useI18n();
-
-const props = withDefaults(defineProps<InputOptions>(), {
-  floating: true,
-  id: "sku",
-  label: "products.sku.label",
-  max: 32,
-  placeholder: "products.sku.label",
-});
+defineProps<{
+  modelValue?: string;
+}>();
 
 defineEmits<{
   (e: "update:model-value", value?: string): void;
@@ -18,5 +11,13 @@ defineEmits<{
 </script>
 
 <template>
-  <TarInput v-bind="props" :label="t(label)" :placeholder="t(placeholder)" @update:model-value="$emit('update:model-value', $event)" />
+  <AppInput
+    floating
+    id="sku"
+    label="products.sku.label"
+    max="32"
+    :model-value="modelValue"
+    placeholder="products.sku.label"
+    @update:model-value="$emit('update:model-value', $event)"
+  />
 </template>
diff --git a/frontend/src/components/products/UnitTypeSelect.vue b/frontend/src/components/products/UnitTypeSelect.vue
index 615ea329..9d3c891d 100644
--- a/frontend/src/components/products/UnitTypeSelect.vue
+++ b/frontend/src/components/products/UnitTypeSelect.vue
@@ -1,17 +1,18 @@
 <script setup lang="ts">
-import { orderBy } from "@/helpers/arrayUtils";
-import { TarSelect, type SelectOption, type SelectOptions } from "logitar-vue3-ui";
+import type { SelectOption } from "logitar-vue3-ui";
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 
-const { rt, t, tm } = useI18n();
+import AppSelect from "@/components/shared/AppSelect.vue";
+import type { UnitType } from "@/types/products";
+import { orderBy } from "@/helpers/arrayUtils";
+
+const { rt, tm } = useI18n();
 
-const props = withDefaults(defineProps<SelectOptions>(), {
-  floating: true,
-  id: "unit-type",
-  label: "products.unitType.label",
-  placeholder: "products.unitType.placeholder",
-});
+defineProps<{
+  modelValue?: UnitType;
+  noStatus?: boolean | string;
+}>();
 
 const options = computed<SelectOption[]>(() =>
   orderBy(
@@ -21,10 +22,19 @@ const options = computed<SelectOption[]>(() =>
 );
 
 defineEmits<{
-  (e: "update:model-value", value?: string): void;
+  (e: "update:model-value", value?: UnitType): void;
 }>();
 </script>
 
 <template>
-  <TarSelect v-bind="props" :label="t(label)" :options="options" :placeholder="t(placeholder)" @update:model-value="$emit('update:model-value', $event)" />
+  <AppSelect
+    floating
+    id="unit-type"
+    label="products.unitType.label"
+    :model-value="modelValue"
+    :no-status="noStatus"
+    :options="options"
+    placeholder="products.unitType.placeholder"
+    @update:model-value="$emit('update:model-value', $event)"
+  />
 </template>
diff --git a/frontend/src/components/receipts/EmptySelect.vue b/frontend/src/components/receipts/EmptySelect.vue
index 430f4ee6..049d1b1d 100644
--- a/frontend/src/components/receipts/EmptySelect.vue
+++ b/frontend/src/components/receipts/EmptySelect.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import { TarSelect, type SelectOption, type SelectOptions } from "logitar-vue3-ui";
+import { parsingUtils, type SelectOption } from "logitar-vue3-ui";
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 
+import AppSelect from "@/components/shared/AppSelect.vue";
 import { orderBy } from "@/helpers/arrayUtils";
 
+const { parseBoolean } = parsingUtils;
 const { t } = useI18n();
 
-const props = withDefaults(defineProps<SelectOptions>(), {
-  floating: true,
-  id: "is-empty",
-  label: "receipts.isEmpty.label",
-  placeholder: "receipts.isEmpty.placeholder",
-});
+defineProps<{
+  modelValue?: boolean;
+  noStatus?: boolean | string;
+}>();
 
 const options = computed<SelectOption[]>(() =>
   orderBy(
@@ -29,8 +29,21 @@ const options = computed<SelectOption[]>(() =>
     "text",
   ),
 );
+
+defineEmits<{
+  (e: "update:model-value", value?: boolean): void;
+}>();
 </script>
 
 <template>
-  <TarSelect v-bind="props" :label="t(label)" :options="options" :placeholder="t(placeholder)" @update:model-value="$emit('update:model-value', $event)" />
+  <AppSelect
+    floating
+    id="is-empty"
+    label="receipts.isEmpty.label"
+    :model-value="modelValue?.toString()"
+    :no-status="noStatus"
+    :options="options"
+    placeholder="receipts.isEmpty.placeholder"
+    @update:model-value="$emit('update:model-value', parseBoolean($event))"
+  />
 </template>
diff --git a/frontend/src/components/receipts/IssuedOnInput.vue b/frontend/src/components/receipts/IssuedOnInput.vue
index a3594568..f17f2f0c 100644
--- a/frontend/src/components/receipts/IssuedOnInput.vue
+++ b/frontend/src/components/receipts/IssuedOnInput.vue
@@ -1,25 +1,24 @@
 <script setup lang="ts">
-import { TarInput, type InputOptions } from "logitar-vue3-ui";
-import { useI18n } from "vue-i18n";
+import DateTimeInput from "@/components/shared/DateTimeInput.vue";
 
-import { toDateTimeLocal } from "@/helpers/dateUtils";
-
-const { t } = useI18n();
-
-const props = withDefaults(defineProps<InputOptions>(), {
-  floating: true,
-  id: "issued-on",
-  label: "receipts.issuedOn.label",
-  max: () => toDateTimeLocal(new Date()),
-  placeholder: "receipts.issuedOn.label",
-  type: "datetime-local",
-});
+defineProps<{
+  modelValue?: Date;
+  required?: boolean | string;
+}>();
 
 defineEmits<{
-  (e: "update:model-value", value?: string): void;
+  (e: "update:model-value", value?: Date): void;
 }>();
 </script>
 
 <template>
-  <TarInput v-bind="props" :label="t(label)" :placeholder="t(placeholder)" @update:model-value="$emit('update:model-value', $event)" />
+  <DateTimeInput
+    floating
+    id="issued-on"
+    label="receipts.issuedOn.label"
+    :max="new Date()"
+    :model-value="modelValue"
+    :required="required"
+    @update:model-value="$emit('update:model-value', $event)"
+  />
 </template>
diff --git a/frontend/src/components/receipts/ReceiptLinesTextarea.vue b/frontend/src/components/receipts/ReceiptLinesTextarea.vue
index 968d2ae7..989ddde7 100644
--- a/frontend/src/components/receipts/ReceiptLinesTextarea.vue
+++ b/frontend/src/components/receipts/ReceiptLinesTextarea.vue
@@ -1,16 +1,9 @@
 <script setup lang="ts">
-import { TarTextarea, type TextareaOptions } from "logitar-vue3-ui";
-import { useI18n } from "vue-i18n";
+import AppTextarea from "@/components/shared/AppTextarea.vue";
 
-const { t } = useI18n();
-
-const props = withDefaults(defineProps<TextareaOptions>(), {
-  floating: true,
-  id: "receipt-lines",
-  label: "receipts.lines",
-  placeholder: "receipts.lines",
-  rows: 15,
-});
+defineProps<{
+  modelValue?: string;
+}>();
 
 defineEmits<{
   (e: "update:model-value", value?: string): void;
@@ -18,5 +11,13 @@ defineEmits<{
 </script>
 
 <template>
-  <TarTextarea v-bind="props" :label="t(label)" :placeholder="t(placeholder)" @update:model-value="$emit('update:model-value', $event)" />
+  <AppTextarea
+    floating
+    id="receipt-lines"
+    label="receipts.lines"
+    :model-value="modelValue"
+    placeholder="receipts.lines"
+    rows="15"
+    @update:model-value="$emit('update:model-value', $event)"
+  />
 </template>
diff --git a/frontend/src/components/receipts/StatusSelect.vue b/frontend/src/components/receipts/StatusSelect.vue
index f453d9cb..118cf4a2 100644
--- a/frontend/src/components/receipts/StatusSelect.vue
+++ b/frontend/src/components/receipts/StatusSelect.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import { TarSelect, type SelectOption, type SelectOptions } from "logitar-vue3-ui";
+import { parsingUtils, type SelectOption } from "logitar-vue3-ui";
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 
+import AppSelect from "@/components/shared/AppSelect.vue";
 import { orderBy } from "@/helpers/arrayUtils";
 
+const { parseBoolean } = parsingUtils;
 const { t } = useI18n();
 
-const props = withDefaults(defineProps<SelectOptions>(), {
-  floating: true,
-  id: "status",
-  label: "receipts.status.label",
-  placeholder: "receipts.status.placeholder",
-});
+defineProps<{
+  modelValue?: boolean;
+  noStatus?: boolean | string;
+}>();
 
 const options = computed<SelectOption[]>(() =>
   orderBy(
@@ -29,8 +29,21 @@ const options = computed<SelectOption[]>(() =>
     "text",
   ),
 );
+
+defineEmits<{
+  (e: "update:model-value", value?: boolean): void;
+}>();
 </script>
 
 <template>
-  <TarSelect v-bind="props" :label="t(label)" :options="options" :placeholder="t(placeholder)" @update:model-value="$emit('update:model-value', $event)" />
+  <AppSelect
+    floating
+    id="status"
+    label="receipts.status.label"
+    :model-value="modelValue?.toString()"
+    :no-status="noStatus"
+    :options="options"
+    placeholder="receipts.status.placeholder"
+    @update:model-value="$emit('update:model-value', parseBoolean($event))"
+  />
 </template>
diff --git a/frontend/src/components/shared/AppInput.vue b/frontend/src/components/shared/AppInput.vue
new file mode 100644
index 00000000..d0738535
--- /dev/null
+++ b/frontend/src/components/shared/AppInput.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { TarInput, inputUtils, parsingUtils, type InputOptions, type InputStatus } from "logitar-vue3-ui";
+import { computed, ref } from "vue";
+import { nanoid } from "nanoid";
+import { useField } from "vee-validate";
+import { useI18n } from "vue-i18n";
+
+import type { ValidationListeners, ValidationRules } from "@/types/validation";
+import { isNullOrWhiteSpace } from "@/helpers/stringUtils";
+
+const { isDateTimeInput, isNumericInput, isTextualInput } = inputUtils;
+const { parseBoolean, parseNumber } = parsingUtils;
+const { t } = useI18n();
+
+const props = withDefaults(
+  defineProps<
+    InputOptions & {
+      rules?: ValidationRules;
+    }
+  >(),
+  {
+    id: () => nanoid(),
+  },
+);
+
+const inputRef = ref<InstanceType<typeof TarInput> | null>(null);
+
+const describedBy = computed<string>(() => `${props.id}_invalid-feedback`);
+const inputMax = computed<number | string | undefined>(() => (isDateTimeInput(props.type) ? props.max : undefined));
+const inputMin = computed<number | string | undefined>(() => (isDateTimeInput(props.type) ? props.min : undefined));
+const inputName = computed<string>(() => props.name ?? props.id);
+
+const validationRules = computed<ValidationRules>(() => {
+  const rules: ValidationRules = {};
+
+  const required: boolean | undefined = parseBoolean(props.required);
+  if (required) {
+    rules.required = true;
+  }
+
+  const max: number | undefined = parseNumber(props.max);
+  const min: number | undefined = parseNumber(props.min);
+  if (isNumericInput(props.type)) {
+    if (max) {
+      rules.max_value = max;
+    }
+    if (min) {
+      rules.min_value = min;
+    }
+  } else if (isTextualInput(props.type)) {
+    if (max) {
+      rules.max_length = max;
+    }
+    if (min) {
+      rules.min_length = min;
+    }
+  }
+
+  if (!isNullOrWhiteSpace(props.pattern)) {
+    rules.regex = props.pattern;
+  }
+
+  switch (props.type) {
+    case "email":
+      rules.email = true;
+      break;
+    case "url":
+      rules.url = true;
+      break;
+  }
+
+  return { ...rules, ...props.rules };
+});
+const displayLabel = computed<string>(() => (props.label ? t(props.label).toLowerCase() : inputName.value));
+const { errorMessage, handleChange, meta, value } = useField<string>(inputName, validationRules, {
+  initialValue: props.modelValue,
+  label: displayLabel,
+});
+const status = computed<InputStatus | undefined>(() => {
+  if (!meta.dirty && !meta.touched) {
+    return undefined;
+  }
+  return meta.valid ? "valid" : "invalid";
+});
+const validationListeners = computed<ValidationListeners>(() => ({
+  blur: handleChange,
+  change: handleChange,
+  input: errorMessage.value ? handleChange : (e: unknown) => handleChange(e, false),
+}));
+
+function focus(): void {
+  inputRef.value?.focus();
+}
+defineExpose({ focus });
+</script>
+
+<template>
+  <TarInput
+    :described-by="describedBy"
+    :disabled="disabled"
+    :floating="floating"
+    :id="id"
+    :label="label ? t(label) : undefined"
+    :max="inputMax"
+    :min="inputMin"
+    :model-value="value"
+    :name="name"
+    :placeholder="placeholder ? t(placeholder) : undefined"
+    :plaintext="plaintext"
+    :readonly="readonly"
+    ref="inputRef"
+    :required="parseBoolean(required) ? 'label' : undefined"
+    :size="size"
+    :status="status"
+    :step="step"
+    :type="type"
+    v-on="validationListeners"
+  >
+    <template #after>
+      <div v-if="errorMessage" class="invalid-feedback" :id="describedBy">{{ errorMessage }}</div>
+      <slot name="after"></slot>
+    </template>
+  </TarInput>
+</template>
diff --git a/frontend/src/components/shared/AppSelect.vue b/frontend/src/components/shared/AppSelect.vue
new file mode 100644
index 00000000..6f242985
--- /dev/null
+++ b/frontend/src/components/shared/AppSelect.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { TarSelect, parsingUtils, type SelectOptions, type SelectStatus } from "logitar-vue3-ui";
+import { computed, ref } from "vue";
+import { nanoid } from "nanoid";
+import { useField } from "vee-validate";
+import { useI18n } from "vue-i18n";
+
+import type { ValidationListeners, ValidationRules } from "@/types/validation";
+
+const { parseBoolean } = parsingUtils;
+const { t } = useI18n();
+
+const props = withDefaults(
+  defineProps<
+    SelectOptions & {
+      noStatus?: boolean | string;
+      rules?: ValidationRules;
+    }
+  >(),
+  {
+    id: () => nanoid(),
+  },
+);
+
+const selectRef = ref<InstanceType<typeof TarSelect> | null>(null);
+
+const describedBy = computed<string>(() => `${props.id}_invalid-feedback`);
+const inputName = computed<string>(() => props.name ?? props.id);
+
+const validationRules = computed<ValidationRules>(() => {
+  const rules: ValidationRules = {};
+
+  const required: boolean | undefined = parseBoolean(props.required);
+  if (required) {
+    rules.required = true;
+  }
+
+  return { ...rules, ...props.rules };
+});
+const displayLabel = computed<string>(() => (props.label ? t(props.label).toLowerCase() : inputName.value));
+const { errorMessage, handleChange, meta, value } = useField<string>(inputName, validationRules, {
+  initialValue: props.modelValue,
+  label: displayLabel,
+});
+const status = computed<SelectStatus | undefined>(() => {
+  if (parseBoolean(props.noStatus) || (!meta.dirty && !meta.touched)) {
+    return undefined;
+  }
+  return meta.valid ? "valid" : "invalid";
+});
+const validationListeners = computed<ValidationListeners>(() => ({
+  blur: handleChange,
+  change: handleChange,
+  input: errorMessage.value ? handleChange : (e: unknown) => handleChange(e, false),
+}));
+
+function focus(): void {
+  selectRef.value?.focus();
+}
+defineExpose({ focus });
+</script>
+
+<template>
+  <TarSelect
+    :aria-label="ariaLabel ? t(ariaLabel) : undefined"
+    :described-by="describedBy"
+    :disabled="disabled"
+    :floating="floating"
+    :id="id"
+    :label="label ? t(label) : undefined"
+    :model-value="value"
+    :multiple="multiple"
+    :name="name"
+    :options="options"
+    :placeholder="placeholder ? t(placeholder) : undefined"
+    ref="selectRef"
+    :required="parseBoolean(required) ? 'label' : undefined"
+    :size="size"
+    :status="status"
+    v-on="validationListeners"
+  >
+    <template #after>
+      <div v-if="errorMessage" class="invalid-feedback" :id="describedBy">{{ errorMessage }}</div>
+      <slot name="after"></slot>
+    </template>
+  </TarSelect>
+</template>
diff --git a/frontend/src/components/shared/AppTextarea.vue b/frontend/src/components/shared/AppTextarea.vue
new file mode 100644
index 00000000..ee7b6ef4
--- /dev/null
+++ b/frontend/src/components/shared/AppTextarea.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { TarTextarea, parsingUtils, type TextareaOptions, type TextareaStatus } from "logitar-vue3-ui";
+import { computed, ref } from "vue";
+import { nanoid } from "nanoid";
+import { useField } from "vee-validate";
+import { useI18n } from "vue-i18n";
+
+import type { ValidationListeners, ValidationRules } from "@/types/validation";
+
+const { parseBoolean, parseNumber } = parsingUtils;
+const { t } = useI18n();
+
+const props = withDefaults(
+  defineProps<
+    TextareaOptions & {
+      rules?: ValidationRules;
+    }
+  >(),
+  {
+    id: () => nanoid(),
+  },
+);
+
+const textareaRef = ref<InstanceType<typeof TarTextarea> | null>(null);
+
+const describedBy = computed<string>(() => `${props.id}_invalid-feedback`);
+const inputName = computed<string>(() => props.name ?? props.id);
+
+const validationRules = computed<ValidationRules>(() => {
+  const rules: ValidationRules = {};
+
+  const required: boolean | undefined = parseBoolean(props.required);
+  if (required) {
+    rules.required = true;
+  }
+
+  const max: number | undefined = parseNumber(props.max);
+  if (max) {
+    rules.max_length = max;
+  }
+  const min: number | undefined = parseNumber(props.min);
+  if (min) {
+    rules.min_length = min;
+  }
+
+  return { ...rules, ...props.rules };
+});
+const displayLabel = computed<string>(() => (props.label ? t(props.label).toLowerCase() : inputName.value));
+const { errorMessage, handleChange, meta, value } = useField<string>(inputName, validationRules, {
+  initialValue: props.modelValue,
+  label: displayLabel,
+});
+const status = computed<TextareaStatus | undefined>(() => {
+  if (!meta.dirty && !meta.touched) {
+    return undefined;
+  }
+  return meta.valid ? "valid" : "invalid";
+});
+const validationListeners = computed<ValidationListeners>(() => ({
+  blur: handleChange,
+  change: handleChange,
+  input: errorMessage.value ? handleChange : (e: unknown) => handleChange(e, false),
+}));
+
+function focus(): void {
+  textareaRef.value?.focus();
+}
+defineExpose({ focus });
+</script>
+
+<template>
+  <TarTextarea
+    :cols="cols"
+    :described-by="describedBy"
+    :disabled="disabled"
+    :floating="floating"
+    :id="id"
+    :label="label ? t(label) : undefined"
+    :model-value="value"
+    :name="name"
+    :placeholder="placeholder ? t(placeholder) : undefined"
+    :plaintext="plaintext"
+    :readonly="readonly"
+    ref="textareaRef"
+    :required="parseBoolean(required) ? 'label' : undefined"
+    :rows="rows"
+    :size="size"
+    :status="status"
+    v-on="validationListeners"
+  >
+    <template #after>
+      <div v-if="errorMessage" class="invalid-feedback" :id="describedBy">{{ errorMessage }}</div>
+      <slot name="after"></slot>
+    </template>
+  </TarTextarea>
+</template>
diff --git a/frontend/src/components/shared/CountSelect.vue b/frontend/src/components/shared/CountSelect.vue
index 0d48a39f..cc755176 100644
--- a/frontend/src/components/shared/CountSelect.vue
+++ b/frontend/src/components/shared/CountSelect.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { TarSelect, parsingUtils, type SelectOptions } from "logitar-vue3-ui";
+import { TarSelect, parsingUtils, type SelectOption } from "logitar-vue3-ui";
+import { ref } from "vue";
 import { useI18n } from "vue-i18n";
 
 const { parseNumber } = parsingUtils;
 const { t } = useI18n();
 
-const props = withDefaults(defineProps<SelectOptions>(), {
-  floating: true,
-  id: "count",
-  label: "count",
-  options: () => [{ text: "10" }, { text: "25" }, { text: "50" }, { text: "100" }],
-});
+defineProps<{
+  modelValue?: number;
+}>();
+
+const options = ref<SelectOption[]>([{ text: "10" }, { text: "25" }, { text: "50" }, { text: "100" }]);
 
 defineEmits<{
   (e: "update:model-value", value?: number): void;
@@ -18,5 +18,12 @@ defineEmits<{
 </script>
 
 <template>
-  <TarSelect v-bind="props" :label="t(label)" :options="options" @update:model-value="$emit('update:model-value', parseNumber($event))" />
+  <TarSelect
+    floating
+    id="count"
+    :label="t('count')"
+    :model-value="modelValue?.toString()"
+    :options="options"
+    @update:model-value="$emit('update:model-value', parseNumber($event))"
+  />
 </template>
diff --git a/frontend/src/components/shared/DateTimeInput.vue b/frontend/src/components/shared/DateTimeInput.vue
new file mode 100644
index 00000000..e2e9d24c
--- /dev/null
+++ b/frontend/src/components/shared/DateTimeInput.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { InputSize } from "logitar-vue3-ui";
+
+import AppInput from "./AppInput.vue";
+import type { ValidationRules } from "@/types/validation";
+import { toDateTimeLocal } from "@/helpers/dateUtils";
+
+defineProps<{
+  describedBy?: string;
+  disabled?: boolean | string;
+  floating?: boolean | string;
+  id?: string;
+  label?: string;
+  max?: Date;
+  min?: Date;
+  modelValue?: Date;
+  name?: string;
+  plaintext?: boolean | string;
+  readonly?: boolean | string;
+  required?: boolean | string;
+  rules?: ValidationRules;
+  size?: InputSize;
+  step?: number | string;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:model-value", value?: Date): void;
+}>();
+function onModelValueUpdate(value: string): void {
+  try {
+    const date = new Date(value);
+    emit("update:model-value", isNaN(date.getTime()) ? undefined : date);
+  } catch (e: unknown) {
+    emit("update:model-value", undefined);
+  }
+}
+</script>
+
+<template>
+  <AppInput
+    :described-by="describedBy"
+    :disabled="disabled"
+    :floating="floating"
+    :id="id"
+    :label="label"
+    :max="max ? toDateTimeLocal(max) : undefined"
+    :min="min ? toDateTimeLocal(min) : undefined"
+    :model-value="modelValue ? toDateTimeLocal(modelValue) : undefined"
+    :name="name"
+    :plaintext="plaintext"
+    :readonly="readonly"
+    :required="required"
+    :rules="rules"
+    :size="size"
+    :step="step"
+    type="datetime-local"
+    @update:model-value="onModelValueUpdate"
+  />
+</template>
diff --git a/frontend/src/components/shared/DescriptionTextarea.vue b/frontend/src/components/shared/DescriptionTextarea.vue
index 0bbbdb64..390adb23 100644
--- a/frontend/src/components/shared/DescriptionTextarea.vue
+++ b/frontend/src/components/shared/DescriptionTextarea.vue
@@ -1,16 +1,9 @@
 <script setup lang="ts">
-import { TarTextarea, type TextareaOptions } from "logitar-vue3-ui";
-import { useI18n } from "vue-i18n";
+import AppTextarea from "./AppTextarea.vue";
 
-const { t } = useI18n();
-
-const props = withDefaults(defineProps<TextareaOptions>(), {
-  floating: true,
-  id: "description",
-  label: "description",
-  placeholder: "description",
-  rows: 15,
-});
+defineProps<{
+  modelValue?: string;
+}>();
 
 defineEmits<{
   (e: "update:model-value", value?: string): void;
@@ -18,5 +11,13 @@ defineEmits<{
 </script>
 
 <template>
-  <TarTextarea v-bind="props" :label="t(label)" :placeholder="t(placeholder)" @update:model-value="$emit('update:model-value', $event)" />
+  <AppTextarea
+    floating
+    id="description"
+    label="description"
+    :model-value="modelValue"
+    placeholder="description"
+    rows="15"
+    @update:model-value="$emit('update:model-value', $event)"
+  />
 </template>
diff --git a/frontend/src/components/shared/DisplayNameInput.vue b/frontend/src/components/shared/DisplayNameInput.vue
index e1f6a352..58e62c14 100644
--- a/frontend/src/components/shared/DisplayNameInput.vue
+++ b/frontend/src/components/shared/DisplayNameInput.vue
@@ -1,16 +1,10 @@
 <script setup lang="ts">
-import { TarInput, type InputOptions } from "logitar-vue3-ui";
-import { useI18n } from "vue-i18n";
+import AppInput from "./AppInput.vue";
 
-const { t } = useI18n();
-
-const props = withDefaults(defineProps<InputOptions>(), {
-  floating: true,
-  id: "display-name",
-  label: "displayName",
-  max: 255,
-  placeholder: "displayName",
-});
+defineProps<{
+  modelValue?: string;
+  required?: boolean | string;
+}>();
 
 defineEmits<{
   (e: "update:model-value", value?: string): void;
@@ -18,5 +12,14 @@ defineEmits<{
 </script>
 
 <template>
-  <TarInput v-bind="props" :label="t(label)" :placeholder="t(placeholder)" @update:model-value="$emit('update:model-value', $event)" />
+  <AppInput
+    floating
+    id="display-name"
+    label="displayName"
+    max="255"
+    :model-value="modelValue"
+    placeholder="displayName"
+    :required="required"
+    @update:model-value="$emit('update:model-value', $event)"
+  />
 </template>
diff --git a/frontend/src/components/shared/FlagInput.vue b/frontend/src/components/shared/FlagInput.vue
index 8db305bc..e7ff78a2 100644
--- a/frontend/src/components/shared/FlagInput.vue
+++ b/frontend/src/components/shared/FlagInput.vue
@@ -1,16 +1,12 @@
 <script setup lang="ts">
-import { TarInput, type InputOptions } from "logitar-vue3-ui";
+import { TarInput } from "logitar-vue3-ui";
 import { useI18n } from "vue-i18n";
 
 const { t } = useI18n();
 
-const props = withDefaults(defineProps<InputOptions>(), {
-  floating: true,
-  id: "flag",
-  label: "flag",
-  max: 1,
-  placeholder: "flag",
-});
+defineProps<{
+  modelValue?: string;
+}>();
 
 defineEmits<{
   (e: "update:model-value", value?: string): void;
@@ -18,5 +14,13 @@ defineEmits<{
 </script>
 
 <template>
-  <TarInput v-bind="props" :label="t(label)" :placeholder="t(placeholder)" @update:model-value="$emit('update:model-value', $event)" />
+  <TarInput
+    floating
+    id="flag"
+    :label="t('flag')"
+    max="1"
+    :model-value="modelValue"
+    :placeholder="t('flag')"
+    @update:model-value="$emit('update:model-value', $event)"
+  />
 </template>
diff --git a/frontend/src/components/shared/FlagsInput.vue b/frontend/src/components/shared/FlagsInput.vue
index f9f24d41..2ab25674 100644
--- a/frontend/src/components/shared/FlagsInput.vue
+++ b/frontend/src/components/shared/FlagsInput.vue
@@ -1,16 +1,9 @@
 <script setup lang="ts">
-import { TarInput, type InputOptions } from "logitar-vue3-ui";
-import { useI18n } from "vue-i18n";
+import AppInput from "@/components/shared/AppInput.vue";
 
-const { t } = useI18n();
-
-const props = withDefaults(defineProps<InputOptions>(), {
-  floating: true,
-  id: "flags",
-  label: "flags",
-  max: 10,
-  placeholder: "flags",
-});
+defineProps<{
+  modelValue?: string;
+}>();
 
 defineEmits<{
   (e: "update:model-value", value?: string): void;
@@ -18,5 +11,13 @@ defineEmits<{
 </script>
 
 <template>
-  <TarInput v-bind="props" :label="t(label)" :placeholder="t(placeholder)" @update:model-value="$emit('update:model-value', $event)" />
+  <AppInput
+    floating
+    id="flags"
+    label="flags"
+    max="10"
+    :model-value="modelValue"
+    placeholder="flags"
+    @update:model-value="$emit('update:model-value', $event)"
+  />
 </template>
diff --git a/frontend/src/components/shared/NumberInput.vue b/frontend/src/components/shared/NumberInput.vue
index 6ed2c3ed..7e773e90 100644
--- a/frontend/src/components/shared/NumberInput.vue
+++ b/frontend/src/components/shared/NumberInput.vue
@@ -1,16 +1,10 @@
 <script setup lang="ts">
-import { TarInput, type InputOptions } from "logitar-vue3-ui";
-import { useI18n } from "vue-i18n";
+import AppInput from "@/components/shared/AppInput.vue";
 
-const { t } = useI18n();
-
-const props = withDefaults(defineProps<InputOptions>(), {
-  floating: true,
-  id: "number",
-  label: "number",
-  max: 16,
-  placeholder: "number",
-});
+defineProps<{
+  modelValue?: string;
+  required?: boolean | string;
+}>();
 
 defineEmits<{
   (e: "update:model-value", value?: string): void;
@@ -18,5 +12,14 @@ defineEmits<{
 </script>
 
 <template>
-  <TarInput v-bind="props" :label="t(label)" :placeholder="t(placeholder)" @update:model-value="$emit('update:model-value', $event)" />
+  <AppInput
+    floating
+    id="number"
+    label="number"
+    max="16"
+    :model-value="modelValue"
+    placeholder="number"
+    :required="required"
+    @update:model-value="$emit('update:model-value', $event)"
+  />
 </template>
diff --git a/frontend/src/components/shared/PriceInput.vue b/frontend/src/components/shared/PriceInput.vue
index 1532ba9e..b787e11c 100644
--- a/frontend/src/components/shared/PriceInput.vue
+++ b/frontend/src/components/shared/PriceInput.vue
@@ -1,19 +1,23 @@
 <script setup lang="ts">
-import { TarInput, parsingUtils, type InputOptions } from "logitar-vue3-ui";
-import { useI18n } from "vue-i18n";
+import { parsingUtils } from "logitar-vue3-ui";
+
+import AppInput from "./AppInput.vue";
 
-const { t } = useI18n();
 const { parseNumber } = parsingUtils;
 
-const props = withDefaults(defineProps<InputOptions>(), {
-  floating: true,
-  id: "price",
-  label: "price",
-  min: 0.0,
-  placeholder: "price",
-  step: 0.01,
-  type: "number",
-});
+withDefaults(
+  defineProps<{
+    id?: string;
+    label?: string;
+    modelValue?: number;
+    placeholder?: string;
+  }>(),
+  {
+    id: "price",
+    label: "price",
+    placeholder: "price",
+  },
+);
 
 defineEmits<{
   (e: "update:model-value", value?: number): void;
@@ -21,11 +25,21 @@ defineEmits<{
 </script>
 
 <template>
-  <TarInput v-bind="props" :label="t(label)" :placeholder="t(placeholder)" @update:model-value="$emit('update:model-value', parseNumber($event))">
+  <AppInput
+    floating
+    :id="id"
+    :label="label"
+    min="0"
+    :model-value="modelValue?.toString()"
+    :placeholder="placeholder"
+    step="0.01"
+    type="number"
+    @update:model-value="$emit('update:model-value', parseNumber($event))"
+  >
     <template #append>
       <span class="input-group-text">
         <font-awesome-icon icon="fas fa-dollar-sign" />
       </span>
     </template>
-  </TarInput>
+  </AppInput>
 </template>
diff --git a/frontend/src/components/shared/SearchInput.vue b/frontend/src/components/shared/SearchInput.vue
index 20f749d0..a8a17450 100644
--- a/frontend/src/components/shared/SearchInput.vue
+++ b/frontend/src/components/shared/SearchInput.vue
@@ -1,16 +1,12 @@
 <script setup lang="ts">
-import { TarInput, type InputOptions } from "logitar-vue3-ui";
+import { TarInput } from "logitar-vue3-ui";
 import { useI18n } from "vue-i18n";
 
 const { t } = useI18n();
 
-const props = withDefaults(defineProps<InputOptions>(), {
-  floating: true,
-  id: "search",
-  label: "search",
-  placeholder: "search",
-  type: "search",
-});
+defineProps<{
+  modelValue?: string;
+}>();
 
 defineEmits<{
   (e: "update:model-value", value?: string): void;
@@ -18,5 +14,13 @@ defineEmits<{
 </script>
 
 <template>
-  <TarInput v-bind="props" :label="t(label)" :placeholder="t(placeholder)" @update:model-value="$emit('update:model-value', $event)" />
+  <TarInput
+    floating
+    id="search"
+    :label="t('search')"
+    :model-value="modelValue"
+    :placeholder="t('search')"
+    type="search"
+    @update:model-value="$emit('update:model-value', $event)"
+  />
 </template>
diff --git a/frontend/src/components/shared/SortSelect.vue b/frontend/src/components/shared/SortSelect.vue
index a77bdad1..2b3e58e1 100644
--- a/frontend/src/components/shared/SortSelect.vue
+++ b/frontend/src/components/shared/SortSelect.vue
@@ -1,21 +1,18 @@
 <script setup lang="ts">
-import { TarCheckbox, TarSelect, type SelectOptions } from "logitar-vue3-ui";
+import { TarCheckbox, TarSelect, type SelectOption } from "logitar-vue3-ui";
 import { useI18n } from "vue-i18n";
 
 const { t } = useI18n();
 
-const props = withDefaults(
-  defineProps<
-    SelectOptions & {
-      descending?: boolean;
-    }
-  >(),
+withDefaults(
+  defineProps<{
+    descending?: boolean | string;
+    id?: string;
+    modelValue?: string;
+    options?: SelectOption[];
+  }>(),
   {
-    descending: false,
-    floating: true,
     id: "sort",
-    label: "sort.select.label",
-    placeholder: "sort.select.placeholder",
   },
 );
 
@@ -26,7 +23,15 @@ defineEmits<{
 </script>
 
 <template>
-  <TarSelect v-bind="props" :label="t(label)" :placeholder="t(placeholder)" @update:model-value="$emit('update:model-value', $event)">
+  <TarSelect
+    floating
+    :id="id"
+    :label="t('sort.select.label')"
+    :model-value="modelValue"
+    :options="options"
+    :placeholder="t('sort.select.placeholder')"
+    @update:model-value="$emit('update:model-value', $event)"
+  >
     <template #after>
       <TarCheckbox :id="`${id}_desc`" :label="t('sort.isDescending')" :model-value="descending" @update:model-value="$emit('descending', $event)" />
     </template>
diff --git a/frontend/src/components/stores/StoreSelect.vue b/frontend/src/components/stores/StoreSelect.vue
index 5dde7faa..db867a70 100644
--- a/frontend/src/components/stores/StoreSelect.vue
+++ b/frontend/src/components/stores/StoreSelect.vue
@@ -1,26 +1,38 @@
 <script setup lang="ts">
-import { TarSelect, type SelectOption, type SelectOptions } from "logitar-vue3-ui";
-import { computed, inject, onMounted, ref } from "vue";
-import { useI18n } from "vue-i18n";
+import type { SelectOption } from "logitar-vue3-ui";
+import { computed, onMounted, ref } from "vue";
 
+import AppSelect from "@/components/shared/AppSelect.vue";
 import type { Store } from "@/types/stores";
-import { handleErrorKey } from "@/inject/App";
 import { searchStores } from "@/api/stores";
 
-const handleError = inject(handleErrorKey) as (e: unknown) => void;
-const { t } = useI18n();
-
-const props = withDefaults(defineProps<SelectOptions>(), {
-  floating: true,
-  id: "store",
-  label: "stores.select.label",
-  placeholder: "stores.select.placeholder",
-});
+defineProps<{
+  disabled?: boolean | string;
+  modelValue?: string;
+  noStatus?: boolean | string;
+  required?: boolean | string;
+}>();
 
 const stores = ref<Store[]>([]);
 
 const options = computed<SelectOption[]>(() => stores.value.map(({ id, displayName }) => ({ value: id, text: displayName })));
 
+const emit = defineEmits<{
+  (e: "error", value: unknown): void;
+  (e: "selected", value?: Store): void;
+  (e: "update:model-value", value?: string): void;
+}>();
+
+function onModelValueUpdate(id?: string): void {
+  emit("update:model-value", id);
+  if (id) {
+    const store = stores.value.find((store) => store.id === id);
+    emit("selected", store);
+  } else {
+    emit("selected");
+  }
+}
+
 onMounted(async () => {
   try {
     const results = await searchStores({
@@ -40,26 +52,22 @@ onMounted(async () => {
     });
     stores.value = results.items;
   } catch (e: unknown) {
-    handleError(e);
+    emit("error", e);
   }
 });
-
-const emit = defineEmits<{
-  (e: "selected", value?: Store): void;
-  (e: "update:model-value", value?: string): void;
-}>();
-
-function onModelValueUpdate(id?: string): void {
-  emit("update:model-value", id);
-  if (id) {
-    const store = stores.value.find((store) => store.id === id);
-    emit("selected", store);
-  } else {
-    emit("selected");
-  }
-}
 </script>
 
 <template>
-  <TarSelect v-bind="props" :label="t(label)" :options="options" :placeholder="t(placeholder)" @update:model-value="onModelValueUpdate" />
+  <AppSelect
+    :disabled="disabled"
+    floating
+    id="store"
+    label="stores.select.label"
+    :model-value="modelValue"
+    :no-status="noStatus"
+    :options="options"
+    placeholder="stores.select.placeholder"
+    :required="required"
+    @update:model-value="onModelValueUpdate"
+  />
 </template>
diff --git a/frontend/src/components/taxes/TaxCodeInput.vue b/frontend/src/components/taxes/TaxCodeInput.vue
index 571b36cb..b3c3948b 100644
--- a/frontend/src/components/taxes/TaxCodeInput.vue
+++ b/frontend/src/components/taxes/TaxCodeInput.vue
@@ -1,16 +1,10 @@
 <script setup lang="ts">
-import { TarInput, type InputOptions } from "logitar-vue3-ui";
-import { useI18n } from "vue-i18n";
+import AppInput from "@/components/shared/AppInput.vue";
 
-const { t } = useI18n();
-
-const props = withDefaults(defineProps<InputOptions>(), {
-  floating: true,
-  id: "code",
-  label: "taxes.code.label",
-  max: 4,
-  placeholder: "taxes.code.label",
-});
+defineProps<{
+  modelValue?: string;
+  required?: boolean | string;
+}>();
 
 defineEmits<{
   (e: "update:model-value", value?: string): void;
@@ -18,5 +12,14 @@ defineEmits<{
 </script>
 
 <template>
-  <TarInput v-bind="props" :label="t(label)" :placeholder="t(placeholder)" @update:model-value="$emit('update:model-value', $event)" />
+  <AppInput
+    floating
+    id="code"
+    label="taxes.code.label"
+    max="4"
+    :model-value="modelValue"
+    placeholder="taxes.code.label"
+    :required="required"
+    @update:model-value="$emit('update:model-value', $event)"
+  />
 </template>
diff --git a/frontend/src/components/taxes/TaxRateInput.vue b/frontend/src/components/taxes/TaxRateInput.vue
index a3c74d13..61c68ffe 100644
--- a/frontend/src/components/taxes/TaxRateInput.vue
+++ b/frontend/src/components/taxes/TaxRateInput.vue
@@ -1,19 +1,14 @@
 <script setup lang="ts">
-import { TarInput, parsingUtils, type InputOptions } from "logitar-vue3-ui";
-import { useI18n } from "vue-i18n";
+import { parsingUtils } from "logitar-vue3-ui";
+
+import AppInput from "@/components/shared/AppInput.vue";
 
-const { t } = useI18n();
 const { parseNumber } = parsingUtils;
 
-const props = withDefaults(defineProps<InputOptions>(), {
-  floating: true,
-  id: "rate",
-  label: "taxes.rate",
-  min: 0.00001,
-  placeholder: "taxes.rate",
-  step: 0.00001,
-  type: "number",
-});
+defineProps<{
+  modelValue?: number;
+  required?: boolean | string;
+}>();
 
 defineEmits<{
   (e: "update:model-value", value?: number): void;
@@ -21,5 +16,17 @@ defineEmits<{
 </script>
 
 <template>
-  <TarInput v-bind="props" :label="t(label)" :placeholder="t(placeholder)" @update:model-value="$emit('update:model-value', parseNumber($event))" />
+  <AppInput
+    floating
+    id="rate"
+    label="taxes.rate"
+    min="0.00001"
+    max="1"
+    :model-value="modelValue?.toString()"
+    placeholder="taxes.rate"
+    :required="required"
+    step="0.00001"
+    type="number"
+    @update:model-value="$emit('update:model-value', parseNumber($event))"
+  />
 </template>
diff --git a/frontend/src/components/users/AddressCountrySelect.vue b/frontend/src/components/users/AddressCountrySelect.vue
index a0625500..ff62b5f8 100644
--- a/frontend/src/components/users/AddressCountrySelect.vue
+++ b/frontend/src/components/users/AddressCountrySelect.vue
@@ -1,20 +1,19 @@
 <script setup lang="ts">
-import { TarSelect, type SelectOption, type SelectOptions } from "logitar-vue3-ui";
+import type { SelectOption } from "logitar-vue3-ui";
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 
+import AppSelect from "@/components/shared/AppSelect.vue";
 import countries from "@/resources/countries.json";
 import type { CountrySettings } from "@/types/stores";
 import { orderBy } from "@/helpers/arrayUtils";
 
 const { t } = useI18n();
 
-const props = withDefaults(defineProps<SelectOptions>(), {
-  floating: true,
-  id: "address-country",
-  label: "users.address.country.label",
-  placeholder: "users.address.country.placeholder",
-});
+defineProps<{
+  modelValue?: string;
+  required?: boolean | string;
+}>();
 
 const options = computed<SelectOption[]>(() =>
   orderBy(
@@ -40,5 +39,14 @@ function onModelValueUpdate(code?: string): void {
 </script>
 
 <template>
-  <TarSelect v-bind="props" :label="t(label)" :options="options" :placeholder="t(placeholder)" @update:model-value="onModelValueUpdate" />
+  <AppSelect
+    floating
+    id="address-country"
+    label="users.address.country.label"
+    :model-value="modelValue"
+    :options="options"
+    placeholder="users.address.country.placeholder"
+    :required="required"
+    @update:model-value="onModelValueUpdate"
+  />
 </template>
diff --git a/frontend/src/components/users/AddressLocalityInput.vue b/frontend/src/components/users/AddressLocalityInput.vue
index d61e797d..52636efa 100644
--- a/frontend/src/components/users/AddressLocalityInput.vue
+++ b/frontend/src/components/users/AddressLocalityInput.vue
@@ -1,16 +1,10 @@
 <script setup lang="ts">
-import { TarInput, type InputOptions } from "logitar-vue3-ui";
-import { useI18n } from "vue-i18n";
+import AppInput from "@/components/shared/AppInput.vue";
 
-const { t } = useI18n();
-
-const props = withDefaults(defineProps<InputOptions>(), {
-  floating: true,
-  id: "address-locality",
-  label: "users.address.locality",
-  max: 255,
-  placeholder: "users.address.locality",
-});
+defineProps<{
+  modelValue?: string;
+  required?: boolean | string;
+}>();
 
 defineEmits<{
   (e: "update:model-value", value?: string): void;
@@ -18,5 +12,14 @@ defineEmits<{
 </script>
 
 <template>
-  <TarInput v-bind="props" :label="t(label)" :placeholder="t(placeholder)" @update:model-value="$emit('update:model-value', $event)" />
+  <AppInput
+    floating
+    id="address-locality"
+    label="users.address.locality"
+    max="255"
+    :model-value="modelValue"
+    placeholder="users.address.locality"
+    :required="required"
+    @update:model-value="$emit('update:model-value', $event)"
+  />
 </template>
diff --git a/frontend/src/components/users/AddressPostalCodeInput.vue b/frontend/src/components/users/AddressPostalCodeInput.vue
index b748611a..2dc742f3 100644
--- a/frontend/src/components/users/AddressPostalCodeInput.vue
+++ b/frontend/src/components/users/AddressPostalCodeInput.vue
@@ -1,25 +1,12 @@
 <script setup lang="ts">
-import { TarInput, type InputOptions } from "logitar-vue3-ui";
-import { useI18n } from "vue-i18n";
-
+import AppInput from "@/components/shared/AppInput.vue";
 import type { CountrySettings } from "@/types/stores";
 
-const { t } = useI18n();
-
-const props = withDefaults(
-  defineProps<
-    InputOptions & {
-      country?: CountrySettings;
-    }
-  >(),
-  {
-    floating: true,
-    id: "postal-code",
-    label: "users.address.postalCode",
-    max: 255,
-    placeholder: "users.address.postalCode",
-  },
-);
+defineProps<{
+  country?: CountrySettings;
+  modelValue?: string;
+  required?: boolean | string;
+}>();
 
 defineEmits<{
   (e: "update:model-value", value?: string): void;
@@ -27,11 +14,15 @@ defineEmits<{
 </script>
 
 <template>
-  <TarInput
-    v-bind="props"
-    :label="t(label)"
-    :pattern="country?.postalCode ?? pattern"
-    :placeholder="t(placeholder)"
+  <AppInput
+    floating
+    id="postal-code"
+    label="users.address.postalCode"
+    max="255"
+    :model-value="modelValue"
+    :pattern="country?.postalCode"
+    placeholder="users.address.postalCode"
+    :required="required"
     @update:model-value="$emit('update:model-value', $event)"
   />
 </template>
diff --git a/frontend/src/components/users/AddressRegionSelect.vue b/frontend/src/components/users/AddressRegionSelect.vue
index 3e32899b..de0b21c5 100644
--- a/frontend/src/components/users/AddressRegionSelect.vue
+++ b/frontend/src/components/users/AddressRegionSelect.vue
@@ -1,26 +1,19 @@
 <script setup lang="ts">
-import { TarSelect, type SelectOption, type SelectOptions } from "logitar-vue3-ui";
+import type { SelectOption } from "logitar-vue3-ui";
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 
+import AppSelect from "@/components/shared/AppSelect.vue";
 import type { CountrySettings } from "@/types/stores";
 import { orderBy } from "@/helpers/arrayUtils";
 
 const { t } = useI18n();
 
-const props = withDefaults(
-  defineProps<
-    SelectOptions & {
-      country?: CountrySettings;
-    }
-  >(),
-  {
-    floating: true,
-    id: "address-region",
-    label: "users.address.region.label",
-    placeholder: "users.address.region.placeholder",
-  },
-);
+const props = defineProps<{
+  country?: CountrySettings;
+  modelValue?: string;
+  required?: boolean | string;
+}>();
 
 const options = computed<SelectOption[]>(() =>
   orderBy(props.country?.regions.map((region) => ({ text: t(`countries.${props.country?.code}.regions.${region}`), value: region })) ?? [], "text"),
@@ -32,5 +25,14 @@ defineEmits<{
 </script>
 
 <template>
-  <TarSelect v-bind="props" :label="t(label)" :options="options" :placeholder="t(placeholder)" @update:model-value="$emit('update:model-value', $event)" />
+  <AppSelect
+    floating
+    id="address-region"
+    label="users.address.region.label"
+    :model-value="modelValue"
+    :options="options"
+    placeholder="users.address.region.placeholder"
+    :required="required"
+    @update:model-value="$emit('update:model-value', $event)"
+  />
 </template>
diff --git a/frontend/src/components/users/AddressStreetTextarea.vue b/frontend/src/components/users/AddressStreetTextarea.vue
index e50c015b..2cbb4311 100644
--- a/frontend/src/components/users/AddressStreetTextarea.vue
+++ b/frontend/src/components/users/AddressStreetTextarea.vue
@@ -1,17 +1,10 @@
 <script setup lang="ts">
-import { TarTextarea, type TextareaOptions } from "logitar-vue3-ui";
-import { useI18n } from "vue-i18n";
+import AppTextarea from "@/components/shared/AppTextarea.vue";
 
-const { t } = useI18n();
-
-const props = withDefaults(defineProps<TextareaOptions>(), {
-  floating: true,
-  id: "street-address",
-  label: "users.address.street",
-  max: 255,
-  placeholder: "users.address.street",
-  rows: 3,
-});
+defineProps<{
+  modelValue?: string;
+  required?: boolean | string;
+}>();
 
 defineEmits<{
   (e: "update:model-value", value?: string): void;
@@ -19,5 +12,15 @@ defineEmits<{
 </script>
 
 <template>
-  <TarTextarea v-bind="props" :label="t(label)" :placeholder="t(placeholder)" @update:model-value="$emit('update:model-value', $event)" />
+  <AppTextarea
+    floating
+    id="street-address"
+    label="users.address.street"
+    max="255"
+    :model-value="modelValue"
+    placeholder="users.address.street"
+    :required="required"
+    rows="3"
+    @update:model-value="$emit('update:model-value', $event)"
+  />
 </template>
diff --git a/frontend/src/components/users/EmailAddressInput.vue b/frontend/src/components/users/EmailAddressInput.vue
index 61d62827..a015313d 100644
--- a/frontend/src/components/users/EmailAddressInput.vue
+++ b/frontend/src/components/users/EmailAddressInput.vue
@@ -1,17 +1,9 @@
 <script setup lang="ts">
-import { TarInput, type InputOptions } from "logitar-vue3-ui";
-import { useI18n } from "vue-i18n";
+import AppInput from "@/components/shared/AppInput.vue";
 
-const { t } = useI18n();
-
-const props = withDefaults(defineProps<InputOptions>(), {
-  floating: true,
-  id: "email-address",
-  label: "users.email.address",
-  max: 255,
-  placeholder: "users.email.address",
-  type: "email",
-});
+defineProps<{
+  modelValue?: string;
+}>();
 
 defineEmits<{
   (e: "update:model-value", value?: string): void;
@@ -19,5 +11,14 @@ defineEmits<{
 </script>
 
 <template>
-  <TarInput v-bind="props" :label="t(label)" :placeholder="t(placeholder)" @update:model-value="$emit('update:model-value', $event)" />
+  <AppInput
+    floating
+    id="email-address"
+    label="users.email.address"
+    max="255"
+    :model-value="modelValue"
+    placeholder="users.email.address"
+    type="email"
+    @update:model-value="$emit('update:model-value', $event)"
+  />
 </template>
diff --git a/frontend/src/components/users/PhoneExtensionInput.vue b/frontend/src/components/users/PhoneExtensionInput.vue
index 103e6529..c4cce17e 100644
--- a/frontend/src/components/users/PhoneExtensionInput.vue
+++ b/frontend/src/components/users/PhoneExtensionInput.vue
@@ -1,16 +1,9 @@
 <script setup lang="ts">
-import { TarInput, type InputOptions } from "logitar-vue3-ui";
-import { useI18n } from "vue-i18n";
+import AppInput from "@/components/shared/AppInput.vue";
 
-const { t } = useI18n();
-
-const props = withDefaults(defineProps<InputOptions>(), {
-  floating: true,
-  id: "phone-extension",
-  label: "users.phone.extension",
-  max: 10,
-  placeholder: "users.phone.extension",
-});
+defineProps<{
+  modelValue?: string;
+}>();
 
 defineEmits<{
   (e: "update:model-value", value?: string): void;
@@ -18,5 +11,13 @@ defineEmits<{
 </script>
 
 <template>
-  <TarInput v-bind="props" :label="t(label)" :placeholder="t(placeholder)" @update:model-value="$emit('update:model-value', $event)" />
+  <AppInput
+    floating
+    id="phone-extension"
+    label="users.phone.extension"
+    max="10"
+    :model-value="modelValue"
+    placeholder="users.phone.extension"
+    @update:model-value="$emit('update:model-value', $event)"
+  />
 </template>
diff --git a/frontend/src/components/users/PhoneNumberInput.vue b/frontend/src/components/users/PhoneNumberInput.vue
index 9fe46d03..48ad7afd 100644
--- a/frontend/src/components/users/PhoneNumberInput.vue
+++ b/frontend/src/components/users/PhoneNumberInput.vue
@@ -1,17 +1,10 @@
 <script setup lang="ts">
-import { TarInput, type InputOptions } from "logitar-vue3-ui";
-import { useI18n } from "vue-i18n";
+import AppInput from "@/components/shared/AppInput.vue";
 
-const { t } = useI18n();
-
-const props = withDefaults(defineProps<InputOptions>(), {
-  floating: true,
-  id: "phone-number",
-  label: "users.phone.number",
-  max: 20,
-  placeholder: "users.phone.number",
-  type: "tel",
-});
+defineProps<{
+  modelValue?: string;
+  required?: boolean | string;
+}>();
 
 defineEmits<{
   (e: "update:model-value", value?: string): void;
@@ -19,5 +12,15 @@ defineEmits<{
 </script>
 
 <template>
-  <TarInput v-bind="props" :label="t(label)" :placeholder="t(placeholder)" @update:model-value="$emit('update:model-value', $event)" />
+  <AppInput
+    floating
+    id="phone-number"
+    label="users.phone.number"
+    max="20"
+    :model-value="modelValue"
+    placeholder="users.phone.number"
+    :required="required"
+    type="tel"
+    @update:model-value="$emit('update:model-value', $event)"
+  />
 </template>
diff --git a/frontend/src/resources/countries.json b/frontend/src/resources/countries.json
index a40a3fb0..cf815cd7 100644
--- a/frontend/src/resources/countries.json
+++ b/frontend/src/resources/countries.json
@@ -1,7 +1,7 @@
 [
   {
     "code": "CA",
-    "postalCode": "[ABCEGHJ-NPRSTVXY]\\d[ABCEGHJ-NPRSTV-Z][ \\-]?\\d[ABCEGHJ-NPRSTV-Z]\\d",
+    "postalCode": "^[ABCEGHJ-NPRSTVXY]\\d[ABCEGHJ-NPRSTV-Z][ \\-]?\\d[ABCEGHJ-NPRSTV-Z]\\d$",
     "regions": ["AB", "BC", "MB", "NB", "NL", "NT", "NS", "NU", "ON", "PE", "QC", "SK", "YT"]
   }
 ]
diff --git a/frontend/src/types/validation.ts b/frontend/src/types/validation.ts
new file mode 100644
index 00000000..8efd61c5
--- /dev/null
+++ b/frontend/src/types/validation.ts
@@ -0,0 +1,23 @@
+export type ValidationListeners = {
+  blur: (e: unknown, shouldValidate?: boolean) => void;
+  change: (e: unknown, shouldValidate?: boolean) => void;
+  input: (e: unknown, shouldValidate?: boolean) => void;
+};
+
+export type ValidationRules = {
+  allowed_characters?: string;
+  confirmed?: string[];
+  email?: boolean;
+  max_length?: number;
+  max_value?: number;
+  min_length?: number;
+  min_value?: number;
+  regex?: string;
+  require_digit?: boolean;
+  require_lowercase?: boolean;
+  require_non_alphanumeric?: boolean;
+  require_uppercase?: boolean;
+  required?: boolean;
+  unique_chars?: number;
+  url?: boolean;
+};
diff --git a/frontend/src/validation/index.ts b/frontend/src/validation/index.ts
index 544f86ef..c57474dc 100644
--- a/frontend/src/validation/index.ts
+++ b/frontend/src/validation/index.ts
@@ -2,6 +2,7 @@ import { configure, defineRule } from "vee-validate";
 import { email, max, max_value, min, min_value, regex, required } from "@vee-validate/rules";
 import { localize } from "@vee-validate/i18n";
 
+import allowedCharacters from "./rules/allowedCharacters";
 import confirmed from "./rules/confirmed";
 import identifier from "./rules/identifier";
 import requireDigit from "./rules/requireDigit";
@@ -11,8 +12,8 @@ import requireUppercase from "./rules/requireUppercase";
 import slug from "./rules/slug";
 import uniqueChars from "./rules/uniqueChars";
 import url from "./rules/url";
-import username from "./rules/username";
 
+defineRule("allowed_characters", allowedCharacters);
 defineRule("confirmed", confirmed);
 defineRule("email", email);
 defineRule("identifier", identifier);
@@ -29,7 +30,6 @@ defineRule("required", required);
 defineRule("slug", slug);
 defineRule("unique_chars", uniqueChars);
 defineRule("url", url);
-defineRule("username", username);
 
 import en from "./locales/errors.en.json";
 import fr from "./locales/errors.fr.json";
diff --git a/frontend/src/validation/locales/errors.en.json b/frontend/src/validation/locales/errors.en.json
index 85cdc743..e6c3f349 100644
--- a/frontend/src/validation/locales/errors.en.json
+++ b/frontend/src/validation/locales/errors.en.json
@@ -1,4 +1,5 @@
 {
+  "allowed_characters": "The {field} may only contain the following characters: 0:{allowedCharacters}",
   "confirmed": "The 1:{target} and the {field} do not match.",
   "email": "Please enter a valid email address.",
   "identifier": "The {field} cannot start with a digit and it may only contain letters, digits and underscores (_).",
@@ -14,6 +15,5 @@
   "required": "The {field} is required.",
   "slug": "The {field} must be composed of non-empty alphanumeric words separated by hyphens (-).",
   "unique_chars": "The {field} must contain at least 0:{count} different characters.",
-  "url": "Please enter a valid URL. Valid URLs start with http:// or https://.",
-  "username": "The {field} may only contain the following characters: 0:{allowedCharacters}"
+  "url": "Please enter a valid URL. Valid URLs start with http:// or https://."
 }
diff --git a/frontend/src/validation/locales/errors.fr.json b/frontend/src/validation/locales/errors.fr.json
index 20810960..f10e1fe3 100644
--- a/frontend/src/validation/locales/errors.fr.json
+++ b/frontend/src/validation/locales/errors.fr.json
@@ -1,4 +1,5 @@
 {
+  "allowed_characters": "Le champs « {field} » ne peut contenir que les caractères suivants : 0:{allowedCharacters}",
   "confirmed": "Les champs « 1:{target} » et « {field} » ne correspondent pas.",
   "email": "Veuillez entrer une adresse courriel valide.",
   "identifier": "Le champs « {field} » ne peut commencer par un chiffre et il ne peut contenir que des lettres, des chiffres et des tirets bas (_).",
@@ -14,6 +15,5 @@
   "required": "Le champs « {field} » est requis.",
   "slug": "Le champs « {field} » doit être composé de mots alphanumériques non vides séparés par un tiret (-).",
   "unique_chars": "Le champs « {field} » doit contenir au moins 0:{count} caractères uniques.",
-  "url": "Veuillez entre un lien valide. Un lien valide débute par http:// ou https://.",
-  "username": "Le champs « {field} » ne peut contenir que les caractères suivants : 0:{allowedCharacters}"
+  "url": "Veuillez entre un lien valide. Un lien valide débute par http:// ou https://."
 }
diff --git a/frontend/src/validation/rules/__tests__/allowedCharacters.spec.ts b/frontend/src/validation/rules/__tests__/allowedCharacters.spec.ts
new file mode 100644
index 00000000..09bf6e5c
--- /dev/null
+++ b/frontend/src/validation/rules/__tests__/allowedCharacters.spec.ts
@@ -0,0 +1,22 @@
+import { describe, it, expect } from "vitest";
+
+import allowedCharacters from "../allowedCharacters";
+
+const allowedCharacterList: string = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-._@+";
+
+describe("allowedCharacters", () => {
+  it.concurrent("should return false when the value contains characters that are not allowed", () => {
+    expect(allowedCharacters(undefined, [undefined as any])).toBe(false);
+    expect(allowedCharacters(undefined, [""])).toBe(false);
+    expect(allowedCharacters(undefined, [allowedCharacterList])).toBe(false);
+    expect(allowedCharacters("test!", [allowedCharacterList])).toBe(false);
+    expect(allowedCharacters(" test", [allowedCharacterList])).toBe(false);
+  });
+
+  it.concurrent("should return true when the value only contains allowed characters", () => {
+    expect(allowedCharacters("carluiz", [undefined as any])).toBe(true);
+    expect(allowedCharacters("carluiz", [""])).toBe(true);
+    expect(allowedCharacters("carluiz", [allowedCharacterList])).toBe(true);
+    expect(allowedCharacters("carlos.luiz@test.com", [allowedCharacterList])).toBe(true);
+  });
+});
diff --git a/frontend/src/validation/rules/__tests__/username.spec.ts b/frontend/src/validation/rules/__tests__/username.spec.ts
deleted file mode 100644
index 14148cf4..00000000
--- a/frontend/src/validation/rules/__tests__/username.spec.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { describe, it, expect } from "vitest";
-
-import username from "../username";
-
-const allowedCharacters: string = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-._@+";
-
-describe("username", () => {
-  it.concurrent("should return false when the value contains characters that are not allowed", () => {
-    expect(username(undefined, [undefined as any])).toBe(false);
-    expect(username(undefined, [""])).toBe(false);
-    expect(username(undefined, [allowedCharacters])).toBe(false);
-    expect(username("test!", [allowedCharacters])).toBe(false);
-    expect(username(" test", [allowedCharacters])).toBe(false);
-  });
-
-  it.concurrent("should return true when the value only contains allowed characters", () => {
-    expect(username("carluiz", [undefined as any])).toBe(true);
-    expect(username("carluiz", [""])).toBe(true);
-    expect(username("carluiz", [allowedCharacters])).toBe(true);
-    expect(username("carlos.luiz@test.com", [allowedCharacters])).toBe(true);
-  });
-});
diff --git a/frontend/src/validation/rules/username.ts b/frontend/src/validation/rules/allowedCharacters.ts
similarity index 100%
rename from frontend/src/validation/rules/username.ts
rename to frontend/src/validation/rules/allowedCharacters.ts
diff --git a/frontend/src/views/account/ProfileView.vue b/frontend/src/views/account/ProfileView.vue
index 428be37c..97f07d4f 100644
--- a/frontend/src/views/account/ProfileView.vue
+++ b/frontend/src/views/account/ProfileView.vue
@@ -1,5 +1,35 @@
+<script setup lang="ts">
+import { TarButton } from "logitar-vue3-ui";
+import { inject, ref } from "vue";
+import { useForm } from "vee-validate";
+import { useI18n } from "vue-i18n";
+
+import AppInput from "@/components/shared/AppInput.vue";
+import { handleErrorKey } from "@/inject/App";
+
+const handleError = inject(handleErrorKey) as (e: unknown) => void;
+const { t } = useI18n();
+
+const emailAddress = ref<string>("");
+const password = ref<string>("");
+
+const { handleSubmit, isSubmitting } = useForm();
+const onSubmit = handleSubmit(async () => {
+  try {
+    alert(`Hello ${emailAddress.value}!`);
+  } catch (e: unknown) {
+    handleError(e);
+  }
+});
+</script>
+
 <template>
   <main class="container">
     <h1>Profile</h1>
+    <form @submit.prevent="onSubmit">
+      <AppInput floating label="users.email.address" placeholder="users.email.address" required type="email" v-model="emailAddress" />
+      <AppInput floating label="users.password" placeholder="users.password" required type="password" v-model="password" />
+      <TarButton :disabled="isSubmitting" icon="fas fa-user" :loading="isSubmitting" :status="t('loading')" :text="t('actions.save')" type="submit" />
+    </form>
   </main>
 </template>
diff --git a/frontend/src/views/account/SignInView.vue b/frontend/src/views/account/SignInView.vue
index 2d95e19d..8a7aa83d 100644
--- a/frontend/src/views/account/SignInView.vue
+++ b/frontend/src/views/account/SignInView.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { TarAlert, TarButton, TarInput } from "logitar-vue3-ui";
+import { TarAlert, TarButton } from "logitar-vue3-ui";
 import { inject, ref } from "vue";
 import { useForm } from "vee-validate";
 import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
 
+import AppInput from "@/components/shared/AppInput.vue";
 import type { ApiError, Error } from "@/types/api";
 import { handleErrorKey } from "@/inject/App";
 import { signIn } from "@/api/account";
@@ -18,7 +19,7 @@ const { t } = useI18n();
 
 const invalidCredentials = ref<boolean>(false);
 const password = ref<string>("");
-const passwordRef = ref<InstanceType<typeof TarInput> | null>(null);
+const passwordRef = ref<InstanceType<typeof AppInput> | null>(null);
 const username = ref<string>("");
 
 const { handleSubmit, isSubmitting } = useForm();
@@ -49,17 +50,8 @@ const onSubmit = handleSubmit(async () => {
       <strong>{{ t("users.signIn.failed") }}</strong> {{ t("users.signIn.invalidCredentials") }}
     </TarAlert>
     <form @submit.prevent="onSubmit">
-      <TarInput floating id="username" :label="t('users.username')" :placeholder="t('users.username')" required v-model="username" />
-      <TarInput
-        floating
-        id="password"
-        :label="t('users.password')"
-        :placeholder="t('users.password')"
-        ref="passwordRef"
-        required
-        type="password"
-        v-model="password"
-      />
+      <AppInput floating id="username" label="users.username" placeholder="users.username" required v-model="username" />
+      <AppInput floating id="password" label="users.password" placeholder="users.password" ref="passwordRef" required type="password" v-model="password" />
       <TarButton
         :disabled="isSubmitting"
         icon="fas fa-arrow-right-to-bracket"
diff --git a/frontend/src/views/articles/ArticleList.vue b/frontend/src/views/articles/ArticleList.vue
index 96b83b9b..b6a89227 100644
--- a/frontend/src/views/articles/ArticleList.vue
+++ b/frontend/src/views/articles/ArticleList.vue
@@ -138,7 +138,7 @@ watch(
         @descending="setQuery('isDescending', $event.toString())"
         @update:model-value="setQuery('sort', $event ?? '')"
       />
-      <CountSelect class="col-lg-4" :model-value="count.toString()" @update:model-value="setQuery('count', ($event ?? 10).toString())" />
+      <CountSelect class="col-lg-4" :model-value="count" @update:model-value="setQuery('count', ($event ?? 10).toString())" />
     </div>
     <template v-if="articles.length">
       <table class="table table-striped">
diff --git a/frontend/src/views/banners/BannerList.vue b/frontend/src/views/banners/BannerList.vue
index 33e090f4..b2e21848 100644
--- a/frontend/src/views/banners/BannerList.vue
+++ b/frontend/src/views/banners/BannerList.vue
@@ -138,7 +138,7 @@ watch(
         @descending="setQuery('isDescending', $event.toString())"
         @update:model-value="setQuery('sort', $event ?? '')"
       />
-      <CountSelect class="col-lg-4" :model-value="count.toString()" @update:model-value="setQuery('count', ($event ?? 10).toString())" />
+      <CountSelect class="col-lg-4" :model-value="count" @update:model-value="setQuery('count', ($event ?? 10).toString())" />
     </div>
     <template v-if="banners.length">
       <table class="table table-striped">
diff --git a/frontend/src/views/products/ProductEdit.vue b/frontend/src/views/products/ProductEdit.vue
index f67469ae..297ebef7 100644
--- a/frontend/src/views/products/ProductEdit.vue
+++ b/frontend/src/views/products/ProductEdit.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { TarAlert } from "logitar-vue3-ui";
 import { computed, inject, onMounted, ref } from "vue";
-import { parsingUtils } from "logitar-vue3-ui";
 import { useForm } from "vee-validate";
 import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
@@ -33,7 +32,6 @@ const handleError = inject(handleErrorKey) as (e: unknown) => void;
 const route = useRoute();
 const router = useRouter();
 const toasts = useToastStore();
-const { parseNumber } = parsingUtils;
 const { t } = useI18n();
 
 const article = ref<Article>();
@@ -49,7 +47,7 @@ const sku = ref<string>("");
 const skuAlreadyUsed = ref<boolean>(false);
 const store = ref<Store>();
 const unitPrice = ref<number>(0);
-const unitType = ref<string>("");
+const unitType = ref<UnitType>();
 
 const hasChanges = computed<boolean>(
   () =>
@@ -60,7 +58,7 @@ const hasChanges = computed<boolean>(
     displayName.value !== (product.value?.displayName ?? "") ||
     flags.value !== (product.value?.flags ?? "") ||
     unitPrice.value !== (product.value?.unitPrice ?? 0) ||
-    unitType.value !== (product.value?.unitType ?? "") ||
+    (unitType.value ?? "") !== (product.value?.unitType ?? "") ||
     description.value !== (product.value?.description ?? ""),
 );
 
@@ -116,7 +114,7 @@ function setModel(model: Product): void {
   flags.value = model.flags ?? "";
   sku.value = model.sku ?? "";
   unitPrice.value = model.unitPrice ?? 0;
-  unitType.value = model.unitType ?? "";
+  unitType.value = model.unitType;
 }
 
 const { handleSubmit, isSubmitting } = useForm();
@@ -134,7 +132,7 @@ const onSubmit = handleSubmit(async () => {
           description: description.value,
           flags: flags.value,
           unitPrice: unitPrice.value || undefined,
-          unitType: (unitType.value as UnitType) || undefined,
+          unitType: unitType.value || undefined,
         },
         product.value?.version,
       );
@@ -166,7 +164,7 @@ onMounted(async () => {
       storeId = product.store.id;
       setModel(product);
     } else {
-      unitType.value = route.query.unitType?.toString() ?? "";
+      unitType.value = route.query.unitType?.toString() as UnitType;
     }
     if (storeId) {
       store.value = await readStore(storeId);
@@ -213,8 +211,8 @@ onMounted(async () => {
           />
         </div>
         <div class="row">
-          <StoreSelect class="col-lg-6" :disabled="Boolean(product)" :model-value="store?.id" required @selected="onStoreSelected" />
-          <ArticleSelect class="col-lg-6" :disabled="Boolean(product)" :model-value="article?.id" required @selected="onArticleSelected" />
+          <StoreSelect class="col-lg-6" :disabled="Boolean(product)" :model-value="store?.id" required @error="handleError" @selected="onStoreSelected" />
+          <ArticleSelect class="col-lg-6" :disabled="Boolean(product)" :model-value="article?.id" required @error="handleError" @selected="onArticleSelected" />
         </div>
         <template v-if="store">
           <div class="row">
@@ -230,9 +228,9 @@ onMounted(async () => {
               class="col-lg-6"
               id="unit-price"
               label="products.unitPrice"
-              :model-value="unitPrice.toString()"
+              :model-value="unitPrice"
               placeholder="products.unitPrice"
-              @update:model-value="unitPrice = parseNumber($event) ?? 0"
+              @update:model-value="unitPrice = $event ?? 0"
             />
             <UnitTypeSelect class="col-lg-6" v-model="unitType" />
           </div>
diff --git a/frontend/src/views/products/ProductList.vue b/frontend/src/views/products/ProductList.vue
index 156a7365..4d9ae93e 100644
--- a/frontend/src/views/products/ProductList.vue
+++ b/frontend/src/views/products/ProductList.vue
@@ -40,7 +40,7 @@ const page = computed<number>(() => parseNumber(route.query.page?.toString()) ||
 const search = computed<string>(() => route.query.search?.toString() ?? "");
 const sort = computed<string>(() => route.query.sort?.toString() ?? "");
 const storeId = computed<string>(() => route.query.storeId?.toString() ?? "");
-const unitType = computed<string>(() => route.query.unitType?.toString() ?? "");
+const unitType = computed<UnitType | undefined>(() => route.query.unitType?.toString() as UnitType);
 
 const sortOptions = computed<SelectOption[]>(() =>
   orderBy(
@@ -65,7 +65,7 @@ async function refresh(): Promise<void> {
         operator: "And",
       },
       storeId: storeId.value,
-      unitType: (unitType.value as UnitType) || undefined,
+      unitType: unitType.value,
       sort: sort.value ? [{ field: sort.value as ProductSort, isDescending: isDescending.value }] : [],
       skip: (page.value - 1) * count.value,
       limit: count.value,
@@ -160,7 +160,7 @@ watch(
       <RouterLink
         :to="{
           name: 'CreateProduct',
-          query: { storeId: storeId || undefined, departmentNumber: departmentNumber || undefined, unitType: unitType || undefined },
+          query: { storeId: storeId || undefined, departmentNumber: departmentNumber || undefined, unitType },
         }"
         class="btn btn-success ms-1"
       >
@@ -168,10 +168,22 @@ watch(
       </RouterLink>
     </div>
     <div class="row">
-      <StoreSelect :class="{ 'col-lg-4': Boolean(store) }" :model-value="storeId" @update:model-value="setQuery('storeId', $event ?? '')" />
+      <StoreSelect
+        :class="{ 'col-lg-4': Boolean(store) }"
+        :model-value="storeId"
+        no-status
+        @error="handleError"
+        @update:model-value="setQuery('storeId', $event ?? '')"
+      />
       <template v-if="store">
-        <DepartmentSelect class="col-lg-4" :model-value="departmentNumber" :store="store" @update:model-value="setQuery('departmentNumber', $event ?? '')" />
-        <UnitTypeSelect class="col-lg-4" :model-value="unitType" @update:model-value="setQuery('unitType', $event ?? '')" />
+        <DepartmentSelect
+          class="col-lg-4"
+          :model-value="departmentNumber"
+          no-status
+          :store="store"
+          @update:model-value="setQuery('departmentNumber', $event ?? '')"
+        />
+        <UnitTypeSelect class="col-lg-4" :model-value="unitType" no-status @update:model-value="setQuery('unitType', $event ?? '')" />
       </template>
     </div>
     <div v-if="store" class="row">
@@ -184,7 +196,7 @@ watch(
         @descending="setQuery('isDescending', $event.toString())"
         @update:model-value="setQuery('sort', $event ?? '')"
       />
-      <CountSelect class="col-lg-4" :model-value="count.toString()" @update:model-value="setQuery('count', ($event ?? 10).toString())" />
+      <CountSelect class="col-lg-4" :model-value="count" @update:model-value="setQuery('count', ($event ?? 10).toString())" />
     </div>
     <template v-if="products.length">
       <table class="table table-striped">
diff --git a/frontend/src/views/receipts/ImportReceipt.vue b/frontend/src/views/receipts/ImportReceipt.vue
index 60d291b0..80133245 100644
--- a/frontend/src/views/receipts/ImportReceipt.vue
+++ b/frontend/src/views/receipts/ImportReceipt.vue
@@ -27,13 +27,13 @@ const { parseNumber } = parsingUtils;
 const { t } = useI18n();
 
 const errors = ref<PropertyError[]>([]);
-const issuedOn = ref<string>("");
+const issuedOn = ref<Date>();
 const lines = ref<string>("");
 const number = ref<string>("");
 const receipts = ref<Receipt[]>([]);
 const store = ref<Store>();
 
-const hasChanges = computed<boolean>(() => store.value !== undefined || issuedOn.value !== "" || number.value !== "" || lines.value !== "");
+const hasChanges = computed<boolean>(() => store.value !== undefined || Boolean(issuedOn.value) || number.value !== "" || lines.value !== "");
 
 function parseLineNumber(error: PropertyError): number {
   if (error.propertyName) {
@@ -85,12 +85,12 @@ const onSubmit = handleSubmit(async () => {
     try {
       const receipt = await importReceipt({
         storeId: store.value.id,
-        issuedOn: new Date(issuedOn.value),
+        issuedOn: issuedOn.value,
         number: number.value,
         lines: lines.value,
       });
       receipts.value.push(receipt);
-      issuedOn.value = "";
+      issuedOn.value = undefined;
       number.value = "";
       lines.value = "";
       toasts.success("receipts.imported");
@@ -143,7 +143,7 @@ onMounted(async () => {
             />
             <AppBackButton class="ms-1" :has-changes="hasChanges" />
           </div>
-          <StoreSelect :model-value="store?.id" required @selected="store = $event" />
+          <StoreSelect :model-value="store?.id" required @error="handleError" @selected="store = $event" />
           <IssuedOnInput required v-model="issuedOn" />
           <NumberInput v-model="number" />
           <ReceiptLinesTextarea v-model="lines" />
diff --git a/frontend/src/views/receipts/ReceiptEdit.vue b/frontend/src/views/receipts/ReceiptEdit.vue
index 8e212cb3..1f948c50 100644
--- a/frontend/src/views/receipts/ReceiptEdit.vue
+++ b/frontend/src/views/receipts/ReceiptEdit.vue
@@ -21,7 +21,6 @@ import { categorizeReceipt, deleteReceipt, readReceipt, replaceReceipt } from "@
 import { formatReceipt } from "@/helpers/displayUtils";
 import { handleErrorKey } from "@/inject/App";
 import { searchTaxes } from "@/api/taxes";
-import { toDateTimeLocal } from "@/helpers/dateUtils";
 import { useCategoryStore } from "@/stores/categories";
 import { useToastStore } from "@/stores/toast";
 
@@ -35,14 +34,14 @@ const { t } = useI18n();
 const categorization = ref<InstanceType<typeof ReceiptCategorization> | null>(null);
 const isDeleting = ref<boolean>(false);
 const isProcessing = ref<boolean>(false);
-const issuedOn = ref<string>("");
+const issuedOn = ref<Date>();
 const number = ref<string>("");
 const receipt = ref<Receipt>();
 const taxes = ref<Tax[]>([]);
 
 const displayName = computed<string>(() => (receipt.value ? formatReceipt(receipt.value) : ""));
 const hasChanges = computed<boolean>(() =>
-  receipt.value ? issuedOn.value !== toDateTimeLocal(new Date(receipt.value.issuedOn)) || number.value !== (receipt.value.number ?? "") : false,
+  receipt.value ? issuedOn.value?.getTime() !== new Date(receipt.value.issuedOn).getTime() || number.value !== (receipt.value.number ?? "") : false,
 );
 const title = computed<string>(() => t("receipts.title.edit", { receipt: displayName.value }));
 
@@ -95,18 +94,18 @@ function scrollToBottom(): void {
 function setModel(model: Receipt): void {
   receipt.value = model;
   categories.load(model);
-  issuedOn.value = toDateTimeLocal(new Date(model.issuedOn));
+  issuedOn.value = new Date(model.issuedOn);
   number.value = model.number ?? "";
 }
 
 const { handleSubmit, isSubmitting } = useForm();
 const onSubmit = handleSubmit(async () => {
-  if (receipt.value) {
+  if (receipt.value && issuedOn.value) {
     try {
       const updatedReceipt = await replaceReceipt(
         receipt.value.id,
         {
-          issuedOn: new Date(issuedOn.value),
+          issuedOn: issuedOn.value,
           number: number.value,
         },
         receipt.value.version,
diff --git a/frontend/src/views/receipts/ReceiptListView.vue b/frontend/src/views/receipts/ReceiptListView.vue
index e676fe89..57f64418 100644
--- a/frontend/src/views/receipts/ReceiptListView.vue
+++ b/frontend/src/views/receipts/ReceiptListView.vue
@@ -152,9 +152,9 @@ watch(
       </RouterLink>
     </div>
     <div class="row">
-      <StoreSelect class="col-lg-4" :model-value="storeId" @update:model-value="setQuery('storeId', $event ?? '')" />
-      <EmptySelect class="col-lg-4" :model-value="isReceiptEmpty?.toString()" @update:model-value="setQuery('isEmpty', $event ?? '')" />
-      <StatusSelect class="col-lg-4" :model-value="hasBeenProcessed?.toString()" @update:model-value="setQuery('hasBeenProcessed', $event ?? '')" />
+      <StoreSelect class="col-lg-4" :model-value="storeId" no-status @error="handleError" @update:model-value="setQuery('storeId', $event ?? '')" />
+      <EmptySelect class="col-lg-4" :model-value="isReceiptEmpty" no-status @update:model-value="setQuery('isEmpty', $event?.toString() ?? '')" />
+      <StatusSelect class="col-lg-4" :model-value="hasBeenProcessed" no-status @update:model-value="setQuery('hasBeenProcessed', $event?.toString() ?? '')" />
     </div>
     <div class="row">
       <SearchInput class="col-lg-4" :model-value="search" @update:model-value="setQuery('search', $event ?? '')" />
@@ -166,7 +166,7 @@ watch(
         @descending="setQuery('isDescending', $event.toString())"
         @update:model-value="setQuery('sort', $event ?? '')"
       />
-      <CountSelect class="col-lg-4" :model-value="count.toString()" @update:model-value="setQuery('count', ($event ?? 10).toString())" />
+      <CountSelect class="col-lg-4" :model-value="count" @update:model-value="setQuery('count', ($event ?? 10).toString())" />
     </div>
     <template v-if="receipts.length">
       <ReceiptList :receipts="receipts" />
diff --git a/frontend/src/views/stores/StoreEdit.vue b/frontend/src/views/stores/StoreEdit.vue
index 3f470470..8c5b0f9f 100644
--- a/frontend/src/views/stores/StoreEdit.vue
+++ b/frontend/src/views/stores/StoreEdit.vue
@@ -199,7 +199,7 @@ onMounted(async () => {
           <TarTab active :title="t('general')">
             <DisplayNameInput required v-model="displayName" />
             <div class="row">
-              <BannerSelect class="col-lg-6" v-model="bannerId" />
+              <BannerSelect class="col-lg-6" v-model="bannerId" @error="handleError" />
               <NumberInput class="col-lg-6" v-model="number" />
             </div>
             <DescriptionTextarea v-model="description" />
diff --git a/frontend/src/views/stores/StoreList.vue b/frontend/src/views/stores/StoreList.vue
index d7bf102f..4f36113f 100644
--- a/frontend/src/views/stores/StoreList.vue
+++ b/frontend/src/views/stores/StoreList.vue
@@ -136,7 +136,7 @@ watch(
       </RouterLink>
     </div>
     <div class="row">
-      <BannerSelect class="col-lg-3" :model-value="bannerId" @update:model-value="setQuery('bannerId', $event ?? '')" />
+      <BannerSelect class="col-lg-3" :model-value="bannerId" no-status @error="handleError" @update:model-value="setQuery('bannerId', $event ?? '')" />
       <SearchInput class="col-lg-3" :model-value="search" @update:model-value="setQuery('search', $event ?? '')" />
       <SortSelect
         class="col-lg-3"
@@ -146,7 +146,7 @@ watch(
         @descending="setQuery('isDescending', $event.toString())"
         @update:model-value="setQuery('sort', $event ?? '')"
       />
-      <CountSelect class="col-lg-3" :model-value="count.toString()" @update:model-value="setQuery('count', ($event ?? 10).toString())" />
+      <CountSelect class="col-lg-3" :model-value="count" @update:model-value="setQuery('count', ($event ?? 10).toString())" />
     </div>
     <template v-if="stores.length">
       <table class="table table-striped">
diff --git a/frontend/src/views/taxes/TaxEdit.vue b/frontend/src/views/taxes/TaxEdit.vue
index 2b53eac8..5632828d 100644
--- a/frontend/src/views/taxes/TaxEdit.vue
+++ b/frontend/src/views/taxes/TaxEdit.vue
@@ -137,7 +137,7 @@ onMounted(async () => {
           />
         </div>
         <TaxCodeInput required v-model="code" />
-        <TaxRateInput required :model-value="rate.toString()" @update:model-value="rate = $event ?? 0" />
+        <TaxRateInput required :model-value="rate" @update:model-value="rate = $event ?? 0" />
         <FlagsInput v-model="flags" />
       </form>
     </template>
diff --git a/frontend/src/views/taxes/TaxList.vue b/frontend/src/views/taxes/TaxList.vue
index fddc6140..6f2f8135 100644
--- a/frontend/src/views/taxes/TaxList.vue
+++ b/frontend/src/views/taxes/TaxList.vue
@@ -43,7 +43,7 @@ const sortOptions = computed<SelectOption[]>(() =>
 
 async function refresh(): Promise<void> {
   const payload: SearchTaxesPayload = {
-    flag: flag.value,
+    flag: flag.value.length > 1 ? flag.value[0] : flag.value,
     ids: [],
     search: {
       terms: search.value
@@ -144,7 +144,7 @@ watch(
         @descending="setQuery('isDescending', $event.toString())"
         @update:model-value="setQuery('sort', $event ?? '')"
       />
-      <CountSelect class="col-lg-3" :model-value="count.toString()" @update:model-value="setQuery('count', ($event ?? 10).toString())" />
+      <CountSelect class="col-lg-3" :model-value="count" @update:model-value="setQuery('count', ($event ?? 10).toString())" />
     </div>
     <template v-if="taxes.length">
       <table class="table table-striped">