diff --git a/apps/showcase/doc/forms/DynamicDoc.vue b/apps/showcase/doc/forms/DynamicDoc.vue
index da08d6a94..c20181585 100644
--- a/apps/showcase/doc/forms/DynamicDoc.vue
+++ b/apps/showcase/doc/forms/DynamicDoc.vue
@@ -12,7 +12,7 @@
                 </DynamicFormField>
                 <DynamicFormField groupId="passId_1" name="password">
                     <DynamicFormLabel>Password</DynamicFormLabel>
-                    <DynamicFormControl as="Password" :feedback="false" fluid :schema="passwordSchema" />
+                    <DynamicFormControl as="Password" :feedback="false" toggleMask fluid :schema="passwordSchema" />
                     <DynamicFormMessage errorType="minimum" />
                     <DynamicFormMessage errorType="maximum" />
                     <DynamicFormMessage errorType="uppercase" severity="warn" />
@@ -73,6 +73,7 @@ export default {
                     label: 'Password',
                     as: 'Password',
                     feedback: false,
+                    toggleMask: true,
                     fluid: true,
                     messages: [{ errorType: 'minimum' }, { errorType: 'maximum' }, { errorType: 'uppercase', severity: 'warn' }, { errorType: 'lowercase', severity: 'warn' }, { errorType: 'number', severity: 'secondary' }],
                     schema: z
@@ -104,7 +105,7 @@ export default {
         </DynamicFormField>
         <DynamicFormField groupId="passId_1" name="password">
             <DynamicFormLabel>Password</DynamicFormLabel>
-            <DynamicFormControl as="Password" :feedback="false" fluid :schema="passwordSchema" />
+            <DynamicFormControl as="Password" :feedback="false" toggleMask fluid :schema="passwordSchema" />
             <DynamicFormMessage errorType="minimum" />
             <DynamicFormMessage errorType="maximum" />
             <DynamicFormMessage errorType="uppercase" severity="warn" />
@@ -133,7 +134,7 @@ export default {
                 </DynamicFormField>
                 <DynamicFormField groupId="passId_1" name="password">
                     <DynamicFormLabel>Password</DynamicFormLabel>
-                    <DynamicFormControl as="Password" :feedback="false" fluid :schema="passwordSchema" />
+                    <DynamicFormControl as="Password" :feedback="false" toggleMask fluid :schema="passwordSchema" />
                     <DynamicFormMessage errorType="minimum" />
                     <DynamicFormMessage errorType="maximum" />
                     <DynamicFormMessage errorType="uppercase" severity="warn" />
@@ -193,6 +194,7 @@ export default {
                     label: 'Password',
                     as: 'Password',
                     feedback: false,
+                    toggleMask: true,
                     fluid: true,
                     messages: [{ errorType: 'minimum' }, { errorType: 'maximum' }, { errorType: 'uppercase', severity: 'warn' }, { errorType: 'lowercase', severity: 'warn' }, { errorType: 'number', severity: 'secondary' }],
                     schema: z
@@ -247,7 +249,7 @@ export default {
                 </DynamicFormField>
                 <DynamicFormField groupId="passId_1" name="password">
                     <DynamicFormLabel>Password</DynamicFormLabel>
-                    <DynamicFormControl as="Password" :feedback="false" fluid :schema="passwordSchema" />
+                    <DynamicFormControl as="Password" :feedback="false" toggleMask fluid :schema="passwordSchema" />
                     <DynamicFormMessage errorType="minimum" />
                     <DynamicFormMessage errorType="maximum" />
                     <DynamicFormMessage errorType="uppercase" severity="warn" />
@@ -309,6 +311,7 @@ const fields = reactive({
         label: 'Password',
         as: 'Password',
         feedback: false,
+        toggleMask: true,
         fluid: true,
         messages: [
             { errorType: 'minimum' },
diff --git a/apps/showcase/doc/forms/SubmitDoc.vue b/apps/showcase/doc/forms/SubmitDoc.vue
index f3aaa6b4b..7a4a817b8 100644
--- a/apps/showcase/doc/forms/SubmitDoc.vue
+++ b/apps/showcase/doc/forms/SubmitDoc.vue
@@ -3,13 +3,13 @@
         <p>The <i>submit</i> callback provides an object containing the form's validity, all errors, and current states. This offers access to the form values as well as validation status and any existing errors during submission.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+        <Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-60">
             <div class="flex flex-col gap-2">
                 <InputText name="username" type="text" placeholder="Username" fluid />
                 <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error.message }}</Message>
             </div>
             <div class="flex flex-col gap-2">
-                <Password name="password" placeholder="Password" :feedback="false" fluid />
+                <Password name="password" placeholder="Password" :feedback="false" toggleMask fluid />
                 <Message v-if="$form.password?.invalid" severity="error">
                     <ul class="mx-1 px-3">
                         <li v-for="(error, index) of $form.password.errors" :key="index" class="py-1">{{ error.message }}</li>
@@ -53,13 +53,13 @@ export default {
             ),
             code: {
                 basic: `
-<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-60">
     <div class="flex flex-col gap-2">
         <InputText name="username" type="text" placeholder="Username" fluid />
         <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error.message }}</Message>
     </div>
     <div class="flex flex-col gap-2">
-        <Password name="password" placeholder="Password" :feedback="false" fluid />
+        <Password name="password" placeholder="Password" :feedback="false" toggleMask fluid />
         <Message v-if="$form.password?.invalid" severity="error">
             <ul class="mx-1 px-3">
                 <li v-for="(error, index) of $form.password.errors" :key="index" class="py-1">{{ error.message }}</li>
@@ -74,13 +74,13 @@ export default {
     <div class="card flex justify-center">
         <Toast />
 
-        <Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+        <Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-60">
             <div class="flex flex-col gap-2">
                 <InputText name="username" type="text" placeholder="Username" fluid />
                 <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error.message }}</Message>
             </div>
             <div class="flex flex-col gap-2">
-                <Password name="password" placeholder="Password" :feedback="false" fluid />
+                <Password name="password" placeholder="Password" :feedback="false" toggleMask fluid />
                 <Message v-if="$form.password?.invalid" severity="error">
                     <ul class="mx-1 px-3">
                         <li v-for="(error, index) of $form.password.errors" :key="index" class="py-1">{{ error.message }}</li>
@@ -145,13 +145,13 @@ export default {
     <div class="card flex justify-center">
         <Toast />
 
-        <Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+        <Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-60">
             <div class="flex flex-col gap-2">
                 <InputText name="username" type="text" placeholder="Username" fluid />
                 <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error.message }}</Message>
             </div>
             <div class="flex flex-col gap-2">
-                <Password name="password" placeholder="Password" :feedback="false" fluid />
+                <Password name="password" placeholder="Password" :feedback="false" toggleMask fluid />
                 <Message v-if="$form.password?.invalid" severity="error">
                     <ul class="mx-1 px-3">
                         <li v-for="(error, index) of $form.password.errors" :key="index" class="py-1">{{ error.message }}</li>
diff --git a/apps/showcase/doc/forms/dynamic/DynamicForm.vue b/apps/showcase/doc/forms/dynamic/DynamicForm.vue
index e2ef7a428..37325b71c 100644
--- a/apps/showcase/doc/forms/dynamic/DynamicForm.vue
+++ b/apps/showcase/doc/forms/dynamic/DynamicForm.vue
@@ -13,7 +13,7 @@
     </Form>
 </template>
 
-<script>
+<script setup>
 import { isNotEmpty } from '@primeuix/utils';
 import { zodResolver } from '@primevue/form/resolvers';
 import { z } from 'zod';
@@ -23,43 +23,24 @@ import DynamicFormLabel from './DynamicFormLabel.vue';
 import DynamicFormMessage from './DynamicFormMessage.vue';
 import DynamicFormSubmit from './DynamicFormSubmit.vue';
 
-export default {
-    name: 'DynamicForm',
-    emits: ['submit'],
-    props: {
-        fields: Object
-    },
-    provide() {
-        return {
-            $fcDynamicForm: this
-        };
-    },
-    data() {
-        return {
-            defaultValues: {},
-            schemas: {}
-        };
-    },
-    methods: {
-        addField(name, schema, defaultValue) {
-            schema && (this.schemas[name] = schema);
-            this.defaultValues[name] = defaultValue;
-        }
-    },
-    computed: {
-        resolver() {
-            return isNotEmpty(this.schemas) ? zodResolver(z.object(this.schemas)) : undefined;
-        },
-        initialValues() {
-            return this.defaultValues;
-        }
-    },
-    components: {
-        DynamicFormControl,
-        DynamicFormField,
-        DynamicFormLabel,
-        DynamicFormMessage,
-        DynamicFormSubmit
-    }
+const props = defineProps({
+    fields: Object
+});
+
+const emit = defineEmits(['submit']);
+
+const defaultValues = ref({});
+const schemas = ref({});
+
+const resolver = computed(() => (isNotEmpty(schemas.value) ? zodResolver(z.object(schemas.value)) : undefined));
+const initialValues = computed(() => defaultValues.value);
+
+const addField = (name, schema, defaultValue) => {
+    schema && (schemas.value[name] = schema);
+    defaultValues.value[name] = defaultValue;
 };
+
+provide('$fcDynamicForm', {
+    addField
+});
 </script>
diff --git a/apps/showcase/doc/forms/dynamic/DynamicFormControl.vue b/apps/showcase/doc/forms/dynamic/DynamicFormControl.vue
index 0d30aaa3c..02f7d84ed 100644
--- a/apps/showcase/doc/forms/dynamic/DynamicFormControl.vue
+++ b/apps/showcase/doc/forms/dynamic/DynamicFormControl.vue
@@ -2,42 +2,27 @@
     <component :is="component" :id :name class="w-full" />
 </template>
 
-<script>
+<script setup>
 import * as PrimeVue from 'primevue/primevue';
+import { computed, inject } from 'vue';
 
-export default {
-    name: 'DynamicFormControl',
-    props: {
-        as: {
-            type: String,
-            default: 'InputText'
-        },
-        schema: null,
-        defaultValue: {
-            default: ''
-        }
+const props = defineProps({
+    as: {
+        type: String,
+        default: 'InputText'
     },
-    inject: {
-        $fcDynamicForm: {
-            default: undefined
-        },
-        $fcDynamicFormField: {
-            default: undefined
-        }
-    },
-    created() {
-        this.$fcDynamicForm?.addField(this.name, this.schema, this.defaultValue);
-    },
-    computed: {
-        id() {
-            return this.$fcDynamicFormField?.$props.groupId;
-        },
-        name() {
-            return this.$fcDynamicFormField?.$props.name;
-        },
-        component() {
-            return PrimeVue[this.as] ?? this.as;
-        }
+    schema: null,
+    defaultValue: {
+        default: ''
     }
-};
+});
+
+const $fcDynamicForm = inject('$fcDynamicForm', undefined);
+const $fcDynamicFormField = inject('$fcDynamicFormField', undefined);
+
+const id = computed(() => $fcDynamicFormField?.groupId);
+const name = computed(() => $fcDynamicFormField?.name);
+const component = computed(() => PrimeVue[props.as] ?? props.as);
+
+$fcDynamicForm?.addField(name.value, props.schema, props.defaultValue);
 </script>
diff --git a/apps/showcase/doc/forms/dynamic/DynamicFormField.vue b/apps/showcase/doc/forms/dynamic/DynamicFormField.vue
index b4d8f1976..2746618ce 100644
--- a/apps/showcase/doc/forms/dynamic/DynamicFormField.vue
+++ b/apps/showcase/doc/forms/dynamic/DynamicFormField.vue
@@ -4,23 +4,22 @@
     </div>
 </template>
 
-<script>
-export default {
-    name: 'DynamicFormField',
-    props: {
-        groupId: {
-            type: String,
-            default: undefined
-        },
-        name: {
-            type: String,
-            default: undefined
-        }
+<script setup>
+import { provide } from 'vue';
+
+const props = defineProps({
+    groupId: {
+        type: String,
+        default: undefined
     },
-    provide() {
-        return {
-            $fcDynamicFormField: this
-        };
+    name: {
+        type: String,
+        default: undefined
     }
-};
+});
+
+provide('$fcDynamicFormField', {
+    groupId: props.groupId,
+    name: props.name
+});
 </script>
diff --git a/apps/showcase/doc/forms/dynamic/DynamicFormLabel.vue b/apps/showcase/doc/forms/dynamic/DynamicFormLabel.vue
index c22fe1e8b..17ae2186a 100644
--- a/apps/showcase/doc/forms/dynamic/DynamicFormLabel.vue
+++ b/apps/showcase/doc/forms/dynamic/DynamicFormLabel.vue
@@ -4,18 +4,10 @@
     </label>
 </template>
 
-<script>
-export default {
-    name: 'DynamicFormLabel',
-    inject: {
-        $fcDynamicFormField: {
-            default: undefined
-        }
-    },
-    computed: {
-        htmlFor() {
-            return this.$fcDynamicFormField?.$props.groupId;
-        }
-    }
-};
+<script setup>
+import { computed, inject } from 'vue';
+
+const $fcDynamicFormField = inject('$fcDynamicFormField', undefined);
+
+const htmlFor = computed(() => $fcDynamicFormField?.groupId);
 </script>
diff --git a/apps/showcase/doc/forms/dynamic/DynamicFormMessage.vue b/apps/showcase/doc/forms/dynamic/DynamicFormMessage.vue
index 825b70877..118b931bc 100644
--- a/apps/showcase/doc/forms/dynamic/DynamicFormMessage.vue
+++ b/apps/showcase/doc/forms/dynamic/DynamicFormMessage.vue
@@ -4,51 +4,29 @@
     </Message>
 </template>
 
-<script>
+<script setup>
 import { isNotEmpty } from '@primeuix/utils';
+import { computed, inject } from 'vue';
 
-export default {
-    name: 'DynamicFormLabel',
-    props: {
-        errorType: {
-            type: String,
-            default: undefined
-        },
-        severity: {
-            type: String,
-            default: 'error'
-        }
+const props = defineProps({
+    errorType: {
+        type: String,
+        default: undefined
     },
-    inject: {
-        $pcForm: {
-            default: undefined
-        },
-        $fcDynamicFormField: {
-            default: undefined
-        }
-    },
-    computed: {
-        visible() {
-            return this.invalid && (this.error || this.errorType === undefined);
-        },
-        message() {
-            return this.errorType ? this.error?.message : this.errors?.[0]?.message;
-        },
-        error() {
-            return this.errors?.find((error) => error.errorType === this.errorType || isNotEmpty(error[this.errorType]));
-        },
-        fieldName() {
-            return this.$fcDynamicFormField?.$props.name;
-        },
-        state() {
-            return this.$pcForm?.states?.[this.fieldName];
-        },
-        errors() {
-            return this.state?.errors;
-        },
-        invalid() {
-            return this.state?.invalid;
-        }
+    severity: {
+        type: String,
+        default: 'error'
     }
-};
+});
+
+const $pcForm = inject('$pcForm', undefined); // Inject PrimeVue Form component
+const $fcDynamicFormField = inject('$fcDynamicFormField', undefined);
+
+const fieldName = computed(() => $fcDynamicFormField?.name);
+const state = computed(() => $pcForm?.states?.[fieldName.value]);
+const errors = computed(() => state.value?.errors);
+const invalid = computed(() => state.value?.invalid);
+const error = computed(() => errors.value?.find((error) => props.errorType === error.errorType || isNotEmpty(error[props.errorType])));
+const message = computed(() => (props.errorType ? error.value?.message : errors.value?.[0]?.message));
+const visible = computed(() => invalid.value && (error.value || props.errorType === undefined));
 </script>
diff --git a/apps/showcase/doc/forms/dynamic/DynamicFormSubmit.vue b/apps/showcase/doc/forms/dynamic/DynamicFormSubmit.vue
index c00c568ed..a212395f3 100644
--- a/apps/showcase/doc/forms/dynamic/DynamicFormSubmit.vue
+++ b/apps/showcase/doc/forms/dynamic/DynamicFormSubmit.vue
@@ -2,18 +2,17 @@
     <Button type="submit" :severity :label />
 </template>
 
-<script>
-export default {
-    name: 'DynamicFormSubmit',
-    props: {
-        severity: {
-            type: String,
-            default: 'secondary'
-        },
-        label: {
-            type: String,
-            default: 'Submit'
-        }
+<script setup>
+import Button from 'primevue/button';
+
+const props = defineProps({
+    severity: {
+        type: String,
+        default: 'secondary'
+    },
+    label: {
+        type: String,
+        default: 'Submit'
     }
-};
+});
 </script>