diff --git a/src/App.vue b/src/App.vue
index 3c30836..42b178a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,8 @@
 // import VButtonView from '../template/VButtonView.vue'
 // import VButtonGroupView from '../template/VButtonGroupView.vue';
 // import VLinkView from '../template/VLinkView.vue';
-import VAccordionView from '../template/VAccordionView.vue';
+// import VAccordionView from '../template/VAccordionView.vue';
+import VInputView from '../template/VInputView.vue';
 </script>
 
 
@@ -10,5 +11,6 @@ import VAccordionView from '../template/VAccordionView.vue';
   <!-- <VButtonView/> -->
   <!-- <VButtonGroupView/> -->
    <!-- <VLinkView/> -->
-    <VAccordionView/>
+    <!-- <VAccordionView/> -->
+  <VInputView/>
 </template>
diff --git a/src/assets/style/primevue-configuration.css b/src/assets/style/primevue-configuration.css
index 3736d1a..1ae4ed8 100644
--- a/src/assets/style/primevue-configuration.css
+++ b/src/assets/style/primevue-configuration.css
@@ -1,2 +1,9 @@
 @import './primevue-style/button.css';
 @import './primevue-style/accordion.css';
+@import './primevue-style/message.css';
+@import './primevue-style/input.css';
+@import './primevue-style/password.css';
+@import './primevue-style/textarea.css';
+@import './primevue-style/divider.css';
+@import './primevue-style/various.css';
+@import './primevue-style/form.css';
diff --git a/src/assets/style/primevue-style/divider.css b/src/assets/style/primevue-style/divider.css
new file mode 100644
index 0000000..ce7305b
--- /dev/null
+++ b/src/assets/style/primevue-style/divider.css
@@ -0,0 +1,11 @@
+:root{
+  --p-divider-vertical-margin: 0 1rem;
+  --p-divider-vertical-padding: 0.5rem 0;
+  --p-divider-vertical-content-padding: 0.5rem 0;
+  --p-divider-horizontal-margin: 1rem 0;
+  --p-divider-horizontal-padding: 0 1rem;
+  --p-divider-horizontal-content-padding: 0 0.5rem;
+  --p-divider-content-background: var(--background-default-grey);
+  --p-divider-content-color: var(--text-label-grey);
+  --p-divider-border-color: var(--border-default-grey);
+}
diff --git a/src/assets/style/primevue-style/form.css b/src/assets/style/primevue-style/form.css
new file mode 100644
index 0000000..3fc94be
--- /dev/null
+++ b/src/assets/style/primevue-style/form.css
@@ -0,0 +1,27 @@
+:root {
+  --p-form-field-background: var(--input-background);
+  --p-form-field-disabled-background: var(--input-disabled-background);
+  --p-form-field-border-color: var(--input-border-color);
+  --p-form-field-hover-border-color: var(--input-border-color);
+  --p-form-field-focus-border-color: var(--input-border-color);
+  --p-form-field-color: var(--input-color);
+  --p-form-field-disabled-color: var(--input-disabled-color);
+  --p-form-field-placeholder-color: var(--input-color);
+  --p-form-field-icon-color: var(--input-color);
+  --p-form-field-padding-x: var(--input-padding-x);
+  --p-form-field-padding-y: var(--input-padding-y);
+  --p-form-field-border-radius: var(--input-border-raduis);
+  --p-form-field-transition-duration: var(--transition-duration);
+  --p-form-field-focus-ring-width: 0;
+  --p-form-field-focus-ring-style: none;
+  --p-form-field-focus-ring-color: transparent;
+  --p-form-field-focus-ring-offset: 0;
+  --p-form-field-focus-ring-shadow: none;
+  --p-form-field-lg-font-size: 1.125rem;
+  --p-form-field-lg-padding-x: 0.875rem;
+  --p-form-field-lg-padding-y: 0.625rem;
+  --p-form-field-sm-font-size: 0.875rem;
+  --p-form-field-sm-padding-x: 0.625rem;
+  --p-form-field-sm-padding-y: 0.375rem;
+  --p-form-field-invalid-border-color: var(--border-plain-error);
+}
diff --git a/src/assets/style/primevue-style/input.css b/src/assets/style/primevue-style/input.css
new file mode 100644
index 0000000..fdba0ba
--- /dev/null
+++ b/src/assets/style/primevue-style/input.css
@@ -0,0 +1,18 @@
+:root{
+  --p-inputtext-background: var(--input-background);
+  --p-inputtext-disabled-background: var(--input-disabled-background);
+  --p-inputtext-border-color: var(--input-border-color);
+  --p-inputtext-hover-border-color: var(--input-border-color);
+  --p-inputtext-focus-border-color: var(--input-border-color);
+  --p-inputtext-color: var(--input-color);
+  --p-inputtext-disabled-color: var(--input-disabled-color);
+  --p-inputtext-placeholder-color: var(--input-color);
+  --p-inputtext-padding-x: var(--input-padding-x);
+  --p-inputtext-padding-y: var(--input-padding-y);
+  --p-inputtext-border-radius: var(--input-border-raduis);
+  --p-inputtext-focus-ring-color: var(--focus-color);
+  --p-inputtext-focus-ring-width: var(--focus-width);
+  --p-inputtext-focus-ring-style: var(--focus-style);
+  --p-inputtext-focus-ring-offset: var(--focus-offset);
+  --p-inputtext-invalid-border-color: var(--border-plain-error);
+}
diff --git a/src/assets/style/primevue-style/message.css b/src/assets/style/primevue-style/message.css
new file mode 100644
index 0000000..41c98bc
--- /dev/null
+++ b/src/assets/style/primevue-style/message.css
@@ -0,0 +1,87 @@
+:root {
+  --p-message-simple-content-padding: 0;
+  --p-message-outlined-border-width: var(--border-width);
+  --p-message-close-icon-size: 1rem;
+  --p-message-close-icon-lg-size: 1.125rem;
+  --p-message-close-icon-sm-size: 0.875rem;
+  --p-message-close-button-width: 1.75rem;
+  --p-message-close-button-height: 1.75rem;
+  --p-message-close-button-border-radius: 0px;
+  --p-message-close-button-focus-ring-width: var(--focus-width);
+  --p-message-close-button-focus-ring-style: var(--focus-style);
+  --p-message-close-button-focus-ring-offset: var(--focus-offset);
+  --p-message-icon-size: calc(0.125rem + var(--text-body-MD-standard-text-Regular-size));
+  --p-message-icon-lg-size: calc(0.125rem + var(--text-body-MD-standard-text-Regular-size));
+  --p-message-icon-sm-size: calc(0.125rem + var(--text-body-XS-mention-text-Regular-size));
+  --p-message-text-font-size: var(--text-body-MD-standard-text-Regular-size);
+  --p-message-text-font-weight: var(--text-body-XS-mention-text-Regular-weight);
+  --p-message-text-lg-font-size: var(--text-body-MD-standard-text-Regular-size);
+  --p-message-text-sm-font-size: var(--text-body-XS-mention-text-Regular-size);
+  --p-message-content-padding: 0.5rem 0.75rem;
+  --p-message-content-gap: 0.5rem;
+  --p-message-content-lg-padding: 0.625rem 0.875rem;
+  --p-message-content-sm-padding: 0.375rem 0.625rem;
+  --p-message-border-radius: 0px;
+  --p-message-border-width: var(--border-width);
+  --p-message-transition-duration: var(--transition-duration);
+  /* --p-message-contrast-background:
+  --p-message-contrast-border-color:
+  --p-message-contrast-color:
+  --p-message-contrast-shadow: */
+  --p-message-contrast-simple-color: var(--text-action-high-blue-france);
+  /* --p-message-contrast-outlined-color:
+  --p-message-contrast-outlined-border-color:
+  --p-message-contrast-close-button-hover-background:
+  --p-message-contrast-close-button-focus-ring-color:
+  --p-message-contrast-close-button-focus-ring-shadow: */
+  --p-message-secondary-background: none;
+  --p-message-secondary-border-color: none;
+  --p-message-secondary-color: none;
+  --p-message-secondary-shadow: none;
+  --p-message-secondary-simple-color: var(--text-mention-grey);
+  --p-message-secondary-outlined-color: none;
+  --p-message-secondary-outlined-border-color: none;
+  --p-message-secondary-close-button-hover-background: none;
+  --p-message-secondary-close-button-focus-ring-color: none;
+  --p-message-secondary-close-button-focus-ring-shadow: none;
+  --p-message-error-background: color-mix(in srgb,var(--background-contrast-error),transparent 5%);
+  --p-message-error-border-color: var(--border-plain-error);
+  --p-message-error-color: var(--text-default-grey);
+  --p-message-error-shadow: none;
+  --p-message-error-simple-color: var(--text-default-error);
+  --p-message-error-outlined-color: none;
+  --p-message-error-outlined-border-color: none;
+  --p-message-error-close-button-hover-background: none;
+  --p-message-error-close-button-focus-ring-color: none;
+  --p-message-error-close-button-focus-ring-shadow: none;
+  --p-message-warn-background: color-mix(in srgb,var(--background-contrast-warning),transparent 5%);
+  --p-message-warn-border-color: var(--border-plain-warning);
+  --p-message-warn-color: var(--text-default-grey);
+  --p-message-warn-shadow: none;
+  --p-message-warn-simple-color: var(--text-default-warning);
+  --p-message-warn-outlined-color: none;
+  --p-message-warn-outlined-border-color: none;
+  --p-message-warn-close-button-hover-background: none;
+  --p-message-warn-close-button-focus-ring-color: none;
+  --p-message-warn-close-button-focus-ring-shadow: none;
+  --p-message-success-background: color-mix(in srgb,var(--background-contrast-success),transparent 5%);
+  --p-message-success-border-color: var(--border-plain-success);
+  --p-message-success-color: var(--text-default-grey);
+  --p-message-success-shadow: none;
+  --p-message-success-simple-color: var(--text-default-success);
+  --p-message-success-outlined-color: var(none);
+  --p-message-success-outlined-border-color: var(none);
+  --p-message-success-close-button-hover-background: none;
+  --p-message-success-close-button-focus-ring-color: none;
+  --p-message-success-close-button-focus-ring-shadow: none;
+  --p-message-info-background: color-mix(in srgb,var(--background-contrast-info),transparent 5%);
+  --p-message-info-border-color: var(--border-plain-info);
+  --p-message-info-color: var(--text-default-grey);
+  --p-message-info-shadow: none;
+  --p-message-info-simple-color: var(--text-default-info);
+  --p-message-info-outlined-color: none;
+  --p-message-info-outlined-border-color: none;
+  --p-message-info-close-button-hover-background: none;
+  --p-message-info-close-button-focus-ring-color: none;
+  --p-message-info-close-button-focus-ring-shadow: none;
+}
diff --git a/src/assets/style/primevue-style/password.css b/src/assets/style/primevue-style/password.css
new file mode 100644
index 0000000..2b171f9
--- /dev/null
+++ b/src/assets/style/primevue-style/password.css
@@ -0,0 +1,16 @@
+:root{
+  --p-password-meter-background: var(--background-contrast-grey);
+  --p-password-meter-border-radius: 0.75rem;
+  --p-password-meter-height: var(--input-padding-y);
+  --p-password-icon-color: var(--input-color);
+  --p-password-overlay-background: var(--input-background);
+  --p-password-overlay-border-color: var(--input-border-color);
+  --p-password-overlay-border-radius: 0px;
+  --p-password-overlay-color: var(--input-color);
+  --p-password-overlay-padding: 0.75rem;
+  --p-password-overlay-shadow: var(--shadow);
+  --p-password-content-gap: 0.125rem;
+  --p-password-strength-weak-background: var(--background-action-high-error);
+  --p-password-strength-medium-background: var(--background-action-high-warning);
+  --p-password-strength-strong-background: var(--background-action-high-success);
+}
diff --git a/src/assets/style/primevue-style/textarea.css b/src/assets/style/primevue-style/textarea.css
new file mode 100644
index 0000000..8ecfde3
--- /dev/null
+++ b/src/assets/style/primevue-style/textarea.css
@@ -0,0 +1,17 @@
+:root{
+  --p-textarea-background: var(--input-background);
+  --p-textarea-disabled-background: var(--input-disabled-background);
+  --p-textarea-border-color: var(--input-border-color);
+  --p-textarea-hover-border-color: var(--input-border-color);
+  --p-textarea-focus-border-color: var(--input-border-color);
+  --p-textarea-color: var(--input-color);
+  --p-textarea-disabled-color: var(--input-disabled-color);
+  --p-textarea-placeholder-color: var(--input-color);
+  --p-textarea-padding-x: var(--input-padding-x);
+  --p-textarea-padding-y: var(--input-padding-y);
+  --p-textarea-border-radius: var(--input-border-raduis);
+  --p-textarea-focus-ring-color: var(--focus-color);
+  --p-textarea-focus-ring-width: var(--focus-width);
+  --p-textarea-focus-ring-style: var(--focus-style);
+  --p-textarea-focus-ring-offset: var(--focus-offset);
+}
diff --git a/src/assets/style/primevue-style/various.css b/src/assets/style/primevue-style/various.css
new file mode 100644
index 0000000..cfd1d7b
--- /dev/null
+++ b/src/assets/style/primevue-style/various.css
@@ -0,0 +1,6 @@
+:root{
+  --p-icon-size: 1rem;
+  --p-text-muted-color: var(--text-action-high-grey);
+  --p-transition-duration: var(--transition-duration);
+  --p-anchor-gutter: 2px;
+}
diff --git a/src/components/divider/VDivider.vue b/src/components/divider/VDivider.vue
new file mode 100644
index 0000000..def7f46
--- /dev/null
+++ b/src/components/divider/VDivider.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import Divider from 'primevue/divider';
+import type { DividerProps } from 'primevue/divider';
+
+export type IVDivider = Partial<Omit<DividerProps, 'dt' | 'pt' | 'ptOptions' | 'unstyled'>>
+const props = withDefaults(defineProps<IVDivider>(), {
+  align: undefined,
+  layout: 'horizontal',
+  type: 'solid',
+})
+</script>
+
+<template>
+  <Divider :align="props.align" :layout="props.layout" :type="props.type"/>
+</template>
diff --git a/src/components/group/IVGroup.type.ts b/src/components/group/IVGroup.type.ts
new file mode 100644
index 0000000..3a5c5e2
--- /dev/null
+++ b/src/components/group/IVGroup.type.ts
@@ -0,0 +1,18 @@
+/**
+ * Interface representing the props for the Group component.
+ */
+export default interface IVGroup {
+  /**
+   * Defines the visual style or status of the group.
+   * - `'default'`: Standard appearance.
+   * - `'error'`: Indicates an error state.
+   * - `'success'`: Indicates a successful state.
+   * - `undefined`: No specific type applied.
+   */
+  type: 'default' | 'error' | 'success' | undefined;
+  /**
+   * If true, disables the group component, making it non-interactive.
+   * Optional.
+   */
+  disabled?: boolean;
+}
diff --git a/src/components/group/VGroup.vue b/src/components/group/VGroup.vue
new file mode 100644
index 0000000..a2cb2c1
--- /dev/null
+++ b/src/components/group/VGroup.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type IVGroup from './IVGroup.type';
+
+const props = withDefaults(defineProps<IVGroup>(), {
+  type: 'default',
+  disabled: false,
+})
+</script>
+
+<template>
+<div :class="['container', {
+  'error': type === 'error',
+  'success': type === 'success',
+  'disabled': props.disabled,
+}]"
+>
+  <slot/>
+</div>
+</template>
+
+<style lang="css" scoped>
+.container {
+  width: 100%;
+  height: fit-content;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  padding: 0 0 0 0.75rem;
+}
+
+.container.error {border-left: 2px solid var(--border-plain-error);}
+.container.success {border-left: 2px solid var(--border-plain-success);}
+.container.disabled {border: none;}
+</style>
diff --git a/src/components/hint/IVHint.type.ts b/src/components/hint/IVHint.type.ts
new file mode 100644
index 0000000..1cfd440
--- /dev/null
+++ b/src/components/hint/IVHint.type.ts
@@ -0,0 +1,28 @@
+/**
+ * Interface representing the properties of the Hint component.
+ */
+export default interface IVHint {
+  /**
+   * The title or main message displayed in the hint.
+   */
+  title: string;
+
+  /**
+   * Determines whether an icon should be displayed alongside the hint.
+   * Optional. Defaults to false if not provided.
+   */
+  icon?: boolean;
+
+  /**
+   * Specifies the type of hint to display.
+   * Can be one of the following: 'info', 'warning', 'alert', 'success', 'active', or an empty string.
+   * Optional.
+   */
+  type?: 'info' | 'warning' | 'alert' | 'success' | 'active' | '';
+
+  /**
+   * Indicates whether the hint is disabled.
+   * Optional. When true, the hint may appear inactive or be hidden.
+   */
+  disabled?: boolean;
+}
diff --git a/src/components/hint/VHint.vue b/src/components/hint/VHint.vue
new file mode 100644
index 0000000..455181a
--- /dev/null
+++ b/src/components/hint/VHint.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import Message from 'primevue/message';
+import type IVHint from './IVHint.type';
+import { computed } from 'vue';
+import styles from '@visua/typography.module.css';
+
+const props = withDefaults(defineProps<IVHint>(), {
+  title: '',
+  icon: false,
+  type: '',
+  disabled: false,
+})
+
+const iconClass = computed(() => {
+  switch (props.type) {
+    case 'alert': return 'ri-spam-fill';
+    case 'warning' : return 'ri-alert-fill';
+    case 'success' : return 'ri-checkbox-circle-fill';
+    case 'info': return 'ri-information-fill';
+    default:
+      return undefined;
+}
+});
+
+const severity = computed(() => {
+  switch (props.type) {
+    case 'alert': return 'error';
+    case 'warning' : return 'warn';
+    case 'success' : return 'success';
+    case 'info' : return 'info';
+    case 'active': return 'contrast'
+    default:
+      return 'secondary';
+  }
+});
+</script>
+
+<template>
+  <Message
+    variant="simple"
+    :severity="severity"
+    :class="[styles['text-body-XS-mention-text-Regular'], {'disabled': props.disabled }]"
+    :icon="props.icon ? iconClass: undefined"
+    :closable="false"
+    size="small"
+    role="alert"
+  >
+    {{ props.title }}
+  </Message>
+</template>
+
+<style scoped>
+.p-message.disabled {color: var(--text-disabled-grey);}
+
+.p-message-icon{
+  display: flex;
+  align-items: center;
+}
+</style>
diff --git a/src/components/input/IVInput.type.ts b/src/components/input/IVInput.type.ts
new file mode 100644
index 0000000..d026266
--- /dev/null
+++ b/src/components/input/IVInput.type.ts
@@ -0,0 +1,274 @@
+import type { HintedString, Nullable} from '@primevue/core';
+import type { HTMLAttributes, InputHTMLAttributes } from 'vue';
+
+/**
+ * Interface representing the props for the InputText component.
+ */
+export interface IInputText {
+  /**
+   * The unique identifier for the input element.
+   */
+  id?: string;
+
+  /**
+   * The ID used to associate the input with a description element for accessibility.
+   */
+  descriptionId?: string;
+
+  /**
+   * Optional hint text displayed below the input.
+   */
+  hint?: string;
+
+  /**
+   * Indicates whether the input is in an invalid state.
+   */
+  isInvalid?: boolean;
+
+  /**
+   * Indicates whether the input is in a valid state.
+   */
+  isValid?: boolean;
+
+  /**
+   * If true, renders a <textarea> instead of a standard input.
+   */
+  isTextarea?: boolean;
+
+  /**
+   * If true, wraps the input in an additional wrapper element.
+   */
+  isWithWrapper?: boolean;
+
+  /**
+   * Controls the visibility of the label. If false, the label is visually hidden.
+   */
+  labelVisible?: boolean;
+
+  /**
+   * The text content of the label associated with the input.
+   */
+  label?: string;
+
+  /**
+   * Custom CSS class applied to the label element.
+   */
+  labelClass?: string;
+
+  /**
+   * The bound value of the input, supporting string or null.
+   */
+  modelValue?: string | null;
+
+  /**
+   * Custom CSS class applied to the wrapper element.
+   */
+  wrapperClass?: string;
+
+  /**
+   * If true, the input type is set to "password" to mask the input content.
+   */
+  isPassword?: boolean;
+
+  /**
+   * If true, disables the input field.
+   */
+  disabled?: boolean;
+
+  /**
+   * Placeholder text displayed inside the input when it's empty.
+   */
+  placeholder?: string;
+
+  /**
+   * Error message(s) displayed when the input is invalid.
+   * Can be a single string or an array of strings.
+   */
+  errorMessage?: string | string[];
+
+  /**
+   * Success message(s) displayed when the input is valid.
+   * Can be a single string or an array of strings.
+   */
+  validMessage?: string | string[];
+}
+
+
+/**
+ * Defines valid properties in Password component.
+ */
+export interface PasswordProps {
+  /**
+   * Value of the component.
+   */
+  modelValue?: Nullable<string>;
+  /**
+   * The default value for the input when not controlled by `modelValue`.
+   */
+  defaultValue?: Nullable<string>;
+  /**
+   * The name attribute for the element, typically used in form submissions.
+   */
+  name?: string | undefined;
+  /**
+   * Text to prompt password entry. Defaults to PrimeVue Locale configuration.
+   */
+  promptLabel?: string | undefined;
+  /**
+   * Regex for a medium level password.
+   * @defaultValue ^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})
+   */
+  mediumRegex?: string | RegExp | undefined;
+  /**
+   * Regex for a strong level password.
+   * @defaultValue ^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})
+   */
+  strongRegex?: string | RegExp | undefined;
+  /**
+   * Text for a weak password. Defaults to PrimeVue Locale configuration.
+   */
+  weakLabel?: string | undefined;
+  /**
+   * Text for a medium password. Defaults to PrimeVue Locale configuration.
+   */
+  mediumLabel?: string | undefined;
+  /**
+   * Text for a strong password. Defaults to PrimeVue Locale configuration.
+   */
+  strongLabel?: string | undefined;
+  /**
+   * Whether to show the strength indicator or not.
+   * @defaultValue true
+   */
+  feedback?: boolean | undefined;
+  /**
+   * A valid query selector or an HTMLElement to specify where the overlay gets attached.
+   * @defaultValue body
+   */
+  appendTo?: HintedString<'body' | 'self'> | undefined | HTMLElement;
+  /**
+   * Whether to show an icon to display the password as plain text.
+   * @defaultValue false
+   */
+  toggleMask?: boolean | undefined;
+  /**
+   * Icon to hide displaying the password as plain text.
+   */
+  maskIcon?: string | undefined;
+  /**
+   * Icon to show displaying the password as plain text.
+   */
+  unmaskIcon?: string | undefined;
+  /**
+   * Defines the size of the component.
+   */
+  size?: HintedString<'small' | 'large'> | undefined;
+  /**
+   * When present, it specifies that the component should have invalid state style.
+   * @defaultValue false
+   */
+  invalid?: boolean | undefined;
+  /**
+   * When present, it specifies that the component should be disabled.
+   * @defaultValue false
+   */
+  disabled?: boolean | undefined;
+  /**
+   * Specifies the input variant of the component.
+   * @defaultValue null
+   */
+  variant?: HintedString<'outlined' | 'filled'> | undefined | null;
+  /**
+   * Placeholder text for the input.
+   */
+  placeholder?: string | undefined;
+  /**
+   * When present, it specifies that an input field must be filled out before submitting the form.
+   * @defaultValue false
+   */
+  required?: boolean | undefined;
+  /**
+   * Spans 100% width of the container when enabled.
+   * @defaultValue null
+   */
+  fluid?: boolean | undefined;
+  /**
+   * When present, it specifies that an input element should automatically get focus when the page loads.
+   * @defaultValue null
+   */
+  autofocus?: boolean | undefined;
+  /**
+   * Identifier of the underlying input element.
+   */
+  inputId?: string | undefined;
+  /**
+   * Inline style of the input field.
+   */
+  inputStyle?: object | undefined;
+  /**
+   * Style class of the input field.
+   */
+  inputClass?: string | object | undefined;
+  /**
+   * Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.
+   */
+  inputProps?: InputHTMLAttributes | undefined;
+  /**
+   * Identifier of the underlying overlay panel element.
+   */
+  panelId?: string | undefined;
+  /**
+   * Style class of the overlay panel.
+   */
+  panelClass?: string | object | undefined;
+  /**
+   * Inline style of the overlay panel.
+   */
+  panelStyle?: object | undefined;
+  /**
+   * Used to pass all properties of the HTMLDivElement to the overlay panel inside the component.
+   */
+  panelProps?: HTMLAttributes | undefined;
+  /**
+   * Identifier of the underlying overlay element.
+   */
+  overlayId?: string | undefined;
+  /**
+   * Style class of the overlay.
+   */
+  overlayClass?: string | object | undefined;
+  /**
+   * Inline style of the overlay.
+   */
+  overlayStyle?: object | undefined;
+  /**
+   * Used to pass all properties of the HTMLDivElement to the overlay inside the component.
+   */
+  overlayProps?: HTMLAttributes | undefined;
+  /**
+   * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+   */
+  ariaLabelledby?: string | undefined;
+  /**
+   * Establishes a string value that labels the component.
+   */
+  ariaLabel?: string | undefined;
+  /**
+   * Form control object, typically used for handling validation and form state.
+   */
+}
+
+/**
+ * Extended interface for the VInputText component.
+ * Combines selected properties from PasswordProps and IInputText,
+ * with additional support for password hints.
+ */
+export default interface IVInput
+  extends Partial<Omit<PasswordProps, 'modelValue'>>,
+    Partial<Omit<IInputText, 'wrapperClass' | 'labelClass'>> {
+  /**
+   * Hint(s) displayed to guide the user when entering a password.
+   * Can be a single string or an array of strings.
+   */
+  passwordHint?: string | Array<string>;
+}
diff --git a/src/components/input/VInput.vue b/src/components/input/VInput.vue
new file mode 100644
index 0000000..1a11733
--- /dev/null
+++ b/src/components/input/VInput.vue
@@ -0,0 +1,301 @@
+<script setup lang="ts">
+import InputText from 'primevue/inputtext';
+import Textarea from 'primevue/textarea';
+import VHint from '../hint/VHint.vue';
+import VDivider from '../divider/VDivider.vue';
+import VLabel from '../label/VLabel.vue';
+import type IVInput from './IVInput.type';
+import { computed, useAttrs, useId, ref, watch } from 'vue';
+import styles from '@visua/typography.module.css';
+import Password from 'primevue/password';
+
+const props = withDefaults(defineProps<IVInput>(), {
+  id: () => useId(),
+  descriptionId: undefined,
+  hint: '',
+  label: '',
+  modelValue: '',
+  wrapperClass: '',
+  isInvalid: false,
+  isValid: false,
+  isTextarea: false,
+  labelVisible: false,
+  isPassword: false,
+  weakLabel: 'Faible',
+  mediumLabel: 'Moyen',
+  strongLabel: 'Fort',
+  promptLabel: 'Entrez un mot de passe',
+  toggleMask: false,
+  placeholder: '',
+  passwordHint: undefined,
+  disabled: false,
+  errorMessage: '',
+  validMessage: '',
+  feedback: false,
+})
+const attrs = useAttrs()
+
+const emit = defineEmits([
+  'update:modelValue',
+  'value-change',
+  'change'
+])
+
+const localModelValue = ref(props.modelValue);
+watch(() => props.modelValue, (newVal) => {
+  if(localModelValue.value !== newVal) {
+        localModelValue.value = newVal;
+    }
+});
+watch(localModelValue, (newVal) => {
+    if(props.modelValue !== newVal){
+        emit('update:modelValue', newVal);
+    }
+});
+
+
+
+const labelState = computed(() => {
+  if(!props.isInvalid && !props.isValid && !props.disabled) return 'default';
+  else if(!props.isInvalid && props.isValid && !props.disabled) return 'success';
+  else if(props.isInvalid && !props.isValid && !props.disabled) return 'error';
+  else return undefined
+})
+
+</script>
+
+<template>
+  <div class="main-container">
+    <VLabel
+      v-if="props.labelVisible"
+      :for="props.id"
+      :label="props.label"
+      :required="!props.disabled"
+      :disabled="props.disabled"
+      :type="labelState"
+      :hint="props.hint"
+    >
+      <template #required-type v-if="props.required">
+        <slot name="required-type"/>
+      </template>
+    </VLabel>
+    <!-- Password -->
+    <Password
+      v-if="props.isPassword"
+      :id="props.id"
+      v-bind="attrs"
+      class="p-password"
+      :class="[styles['text-body-MD-standard-text-Regular'], {
+        'error': props.isInvalid && !props.isValid && !props.disabled || !!props.errorMessage,
+        'success': !props.isInvalid && props.isValid && !props.disabled && !props.errorMessage || !!props.validMessage,
+        'disabled': props.disabled,
+      }]"
+      :disabled="props.disabled"
+      :aria-disabled="props.disabled"
+      :aria-describedby="descriptionId || undefined"
+      :weakLabel="props.weakLabel"
+      :mediumLabel="props.mediumLabel"
+      :strongLabel="props.strongLabel"
+      :promptLabel="props.promptLabel"
+      :toggleMask="props.toggleMask && !props.disabled"
+      :placeholder="props.placeholder"
+      :feedback="props.feedback"
+      :fluid="true"
+      v-model:model-value="localModelValue"
+      @update:model-value="emit('update:modelValue', $event)"
+      @valueChange="emit('value-change', $event)"
+      @change="emit('change', $event)"
+    >
+      <template #header>
+        <div
+          :class="styles['text-body-MD-standard-text-Medium']"
+          style="padding-bottom: 0.5rem;"
+        >Niveau de complexité</div>
+      </template>
+      <template v-if="props.passwordHint !== undefined" #footer>
+        <VDivider/>
+        <VHint title="Votre mot de passe doit contenir au moins :"/>
+        <div
+          role="alert"
+          aria-live="polite"
+        >
+          <template v-if="Array.isArray(props.passwordHint)">
+            <VHint
+              v-for="message in props.passwordHint"
+              :key="`password-hint-${message}`"
+              :id="descriptionId"
+              :data-testid="descriptionId"
+              :title="message"
+              type="info"
+              icon
+            />
+          </template>
+          <VHint
+            v-else-if="props.passwordHint"
+            :title="props.passwordHint"
+            :id="descriptionId"
+            :data-testid="descriptionId"
+            type="info"
+            icon
+          />
+        </div>
+      </template>
+    </Password>
+
+    <!-- Textarea -->
+    <Textarea
+      v-else-if="props.isTextarea"
+      :id="props.id"
+      v-bind="attrs"
+      :class="[styles['text-body-MD-standard-text-Regular'], {
+        'p-textarea': true,
+        'error': props.isInvalid && !props.isValid && !props.disabled || !!props.errorMessage,
+        'success': !props.isInvalid && props.isValid && !props.disabled  && !props.errorMessage || !!props.validMessage,
+      }]"
+      :disabled="props.disabled"
+      :aria-disabled="props.disabled"
+      :aria-describedby="descriptionId || undefined"
+      :placeholder="props.placeholder"
+      @valueChange="emit('value-change', $event)"
+    />
+
+    <!-- InputText -->
+    <InputText
+      v-else
+      :id="props.id"
+      v-bind="attrs"
+      :class="[styles['text-body-MD-standard-text-Regular'], {
+        'p-inputtext': true,
+        'error': props.isInvalid && !props.isValid && !props.disabled || !!props.errorMessage,
+        'success': !props.isInvalid && props.isValid && !props.disabled && !props.errorMessage || !!props.validMessage,
+      }]"
+      :disabled="props.disabled"
+      :aria-disabled="props.disabled"
+      :aria-describedby="descriptionId || undefined"
+      :placeholder="props.placeholder"
+      v-model:model-value="localModelValue"
+      @update:model-value="emit('update:modelValue', $event)"
+      @valueChange="emit('value-change', $event)"
+    />
+      <div
+    role="alert"
+    aria-live="polite"
+  >
+    <template v-if="Array.isArray(props.errorMessage)">
+      <VHint
+        v-for="message in props.errorMessage"
+        :id="descriptionId"
+        :key="message"
+        :data-testid="descriptionId"
+        :title="message"
+        type="alert"
+        icon
+      />
+    </template>
+    <VHint
+      v-else-if="errorMessage"
+      :id="descriptionId"
+      :key="`error-${errorMessage}`"
+      :data-testid="descriptionId"
+      :title="`${errorMessage}`"
+      type="alert"
+      icon
+    />
+    <template v-if="Array.isArray(props.validMessage)">
+      <VHint
+        v-for="message in props.validMessage"
+        :id="descriptionId"
+        :key="message"
+        :data-testid="descriptionId"
+        :title="message"
+        type="success"
+        icon
+      />
+    </template>
+    <VHint
+      v-else-if="validMessage"
+      :id="descriptionId"
+      :key="`error-${validMessage}`"
+      :data-testid="descriptionId"
+      :title="`${validMessage}`"
+      type="success"
+      icon
+    />
+  </div>
+  </div>
+</template>
+
+<style lang="css" scoped>
+
+.main-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 0.5rem;
+}
+
+.p-textarea {
+  min-height: 5.5rem;
+  max-height: fit-content;
+}
+
+.p-password,
+.p-inputtext { height: 2.5rem;}
+
+.p-password,
+.p-textarea,
+.p-inputtext {width: inherit;}
+
+
+.p-textarea.success, .p-textarea.success:focus-visible, .p-textarea.success:hover,
+.p-inputtext.success, .p-inputtext.success:focus-visible, .p-inputtext.success:hover {
+  border: var(--large-border-width) solid var(--border-plain-success);
+}
+
+
+.p-password.success{
+  --p-inputtext-border-color: transparent;
+  --p-inputtext-hover-border-color: transparent;
+  --p-inputtext-focus-border-color: transparent;
+  border-radius: var(--input-border-raduis);
+  border: var(--large-border-width) solid var(--border-plain-success);
+}
+
+.p-password.error{
+  --p-inputtext-border-color: transparent;
+  --p-inputtext-hover-border-color: transparent;
+  --p-inputtext-focus-border-color: transparent;
+  border-radius: var(--input-border-raduis);
+  border: var(--large-border-width) solid var(--border-plain-error);
+}
+
+.p-textarea.error, .p-textarea.error:focus-visible, .p-textarea.error:hover,
+.p-inputtext.error, .p-inputtext.error:focus-visible, .p-inputtext.error:hover {border: var(--large-border-width) solid var(--border-plain-error);}
+
+
+.p-textarea:disabled,
+.p-inputtext:disabled {
+  border: var(--border-width) solid var(--border-disabled-grey);
+  color: var(--text-disabled-grey);
+  background-color: var(--background-disabled-grey);
+  --p-inputtext-placeholder-color: var(--text-disabled-grey);
+  --p-form-field-placeholder-color: var(--text-disabled-grey);
+  --p-textarea-placeholder-color: var(--text-disabled-grey);
+  --p-form-field-border-color: var(--border-disabled-grey);
+  --p-inputtext-border-color: var(--border-disabled-grey);
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.p-password.disabled{
+  --p-inputtext-border-color: var(--border-disabled-grey);
+  --p-inputtext-hover-border-color: var(--border-disabled-grey);
+  --p-inputtext-focus-border-color: var(--border-disabled-grey);
+  --p-inputtext-placeholder-color: var(--text-disabled-grey);
+  --p-form-field-placeholder-color: var(--text-disabled-grey);
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+</style>
diff --git a/src/components/label/IVLabel.type.ts b/src/components/label/IVLabel.type.ts
new file mode 100644
index 0000000..caad633
--- /dev/null
+++ b/src/components/label/IVLabel.type.ts
@@ -0,0 +1,46 @@
+/**
+ * Interface representing the props for the Label component.
+ */
+export default interface IVLabel {
+  /**
+   * The text content displayed as the label.
+   */
+  label: string;
+
+  /**
+   * The visual style of the label, indicating its semantic meaning.
+   * - `default`: Standard label appearance.
+   * - `error`: Indicates an error state.
+   * - `success`: Indicates a successful or valid state.
+   *
+   * @default 'default'
+   */
+  type?: 'default' | 'error' | 'success' | undefined;
+
+  /**
+   * Whether the label is disabled. When true, the label appears inactive or grayed out.
+   *
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Optional hint text displayed alongside or below the label to provide additional context.
+   */
+  hint?: string;
+
+  /**
+   * Indicates whether the associated field is required.
+   *
+   * @default false
+   */
+  required?: boolean;
+
+  /**
+   * The ID of the input element that this label is associated with.
+   * This helps improve accessibility by linking the label to its corresponding input.
+   */
+  for: string;
+
+}
+
diff --git a/src/components/label/VLabel.vue b/src/components/label/VLabel.vue
new file mode 100644
index 0000000..ae1cd1e
--- /dev/null
+++ b/src/components/label/VLabel.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type IVLabel from './IVLabel.type';
+import styles from '@visua/typography.module.css';
+import VHint from '../hint/VHint.vue';
+
+const props = withDefaults(defineProps<IVLabel>(), {
+  type: 'default',
+  disabled: false,
+  required: false,
+  hint: undefined,
+});
+</script>
+
+<template>
+  <label
+    :for="props.for"
+    :class="[styles['text-body-MD-standard-text-Regular'], {
+      'label': props.type === 'default',
+      'success': props.type === 'success',
+      'error': props.type === 'error',
+      'disabled': props.disabled,
+    }]"
+    :aria-label="props.label"
+    :aria-disabled="props.disabled"
+  >
+    {{ props.label }}
+    <slot name="required-type">
+      <span
+        v-if="props.required"
+        :class="{ 'required': props.required }"
+      >*</span>
+    </slot>
+    <VHint
+      v-if="props.hint"
+      :title="props.hint"
+      :disabled="props.disabled"
+    />
+  </label>
+</template>
+
+<style lang="css" scoped>
+.label {color: var(--text-label-grey);}
+.success {color: var(--text-default-success);}
+.error {color: var(--text-default-error);}
+.disabled {color: var(--text-disabled-grey);}
+.required {color: var(--minor-red-marianne);}
+</style>
diff --git a/test/VGroup.spec.ts b/test/VGroup.spec.ts
new file mode 100644
index 0000000..24dedac
--- /dev/null
+++ b/test/VGroup.spec.ts
@@ -0,0 +1,50 @@
+import { describe, test, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import VGroup from '../src/components/group/VGroup.vue'
+
+describe('VGroup', () => {
+  test('renders default slot content', () => {
+    const wrapper = mount(VGroup, {
+      props: {type: undefined},
+      slots: {
+        default: '<span>Test Content</span>',
+      },
+    })
+    expect(wrapper.html()).toContain('Test Content')
+  })
+
+  test('applies default class when no type is specified', () => {
+    const wrapper = mount(VGroup)
+    expect(wrapper.classes()).toContain('container')
+    expect(wrapper.classes()).not.toContain('error')
+    expect(wrapper.classes()).not.toContain('success')
+  })
+
+  test('applies "error" class when type is "error"', () => {
+    const wrapper = mount(VGroup, {
+      props: { type: 'error' },
+    })
+    expect(wrapper.classes()).toContain('error')
+  })
+
+  test('applies "success" class when type is "success"', () => {
+    const wrapper = mount(VGroup, {
+      props: { type: 'success' },
+    })
+    expect(wrapper.classes()).toContain('success')
+  })
+
+  test('applies "disabled" class when disabled is true', () => {
+    const wrapper = mount(VGroup, {
+      props: { disabled: true, type: undefined },
+    })
+    expect(wrapper.classes()).toContain('disabled')
+  })
+
+  test('does not apply "disabled" class when disabled is false', () => {
+    const wrapper = mount(VGroup, {
+      props: { disabled: false, type: undefined },
+    })
+    expect(wrapper.classes()).not.toContain('disabled')
+  })
+})
diff --git a/test/VInput.spec.ts b/test/VInput.spec.ts
new file mode 100644
index 0000000..5b039d7
--- /dev/null
+++ b/test/VInput.spec.ts
@@ -0,0 +1,190 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import VInput from '../src/components/input/VInput.vue'
+
+const globalConfig = {
+  global: {
+    mocks: {
+      $primevue: {
+        config: {}
+      }
+    },
+    stubs: {
+      VHint: true,
+      VDivider: true,
+      Password: true,
+      Textarea: true,
+      VLabel: true,
+    }
+  }
+}
+
+const noStubVLabelConfig = {
+  ...globalConfig.global,
+  stubs: {
+    ...globalConfig.global.stubs,
+    VLabel: false,
+  }
+}
+
+const noStubTextareaConfig = {
+  ...globalConfig.global,
+  stubs: {
+    ...globalConfig.global.stubs,
+    Textarea: false,
+  }
+}
+
+const noStubPasswordConfig = {
+  ...globalConfig.global,
+  stubs: {
+    ...globalConfig.global.stubs,
+    Textarea: false,
+  }
+}
+
+describe('VInput.vue', () => {
+  it('renders InputText by default', () => {
+    const wrapper = mount(VInput, globalConfig)
+    expect(wrapper.find('input').exists()).toBe(true)
+  })
+
+  it('renders VLabel when labelVisible is true and passes the label prop', () => {
+    const wrapper = mount(VInput, {
+      props: {
+        labelVisible: true,
+        label: 'Username'
+      },
+      global: noStubVLabelConfig
+    })
+
+    const labelComponent = wrapper.findComponent({ name: 'VLabel' })
+    expect(labelComponent.exists()).toBe(true)
+    expect(labelComponent.props('label')).toBe('Username')
+    expect(wrapper.text()).toContain('Username')
+  })
+
+  it('does not render VLabel when labelVisible is false', () => {
+    const wrapper = mount(VInput, {
+      props: {
+        labelVisible: false,
+        label: 'Username'
+      },
+      global: noStubVLabelConfig
+    })
+
+    const labelComponent = wrapper.findComponent({ name: 'VLabel' })
+    expect(labelComponent.exists()).toBe(false)
+  })
+
+  // Test : update:modelValue from InputText
+  it('emits update:modelValue when input value changes', async () => {
+    const wrapper = mount(VInput, {
+      props: {
+        modelValue: ''
+      },
+      global: globalConfig.global
+    })
+
+    const input = wrapper.find('input')
+    await input.setValue('new value')
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual(['new value'])
+  })
+
+  // Test : value-change from InputText
+  it('emits value-change when InputText emits valueChange', async () => {
+    const wrapper = mount(VInput, {
+      props: {
+        modelValue: ''
+      },
+      global: globalConfig.global
+    })
+
+    const inputText = wrapper.findComponent({ name: 'InputText' })
+    inputText.vm.$emit('valueChange', 'changed')
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('value-change')).toBeTruthy()
+    expect(wrapper.emitted('value-change')![0]).toEqual(['changed'])
+  })
+
+    // Test : value-change from Textarea
+  it('emits value-change when Textarea emits valueChange', async () => {
+    const wrapper = mount(VInput, {
+      props: {
+        isTextarea: true,
+        modelValue: ''
+      },
+      global: noStubTextareaConfig
+    })
+
+    const textarea = wrapper.findComponent({ name: 'Textarea' })
+    textarea.vm.$emit('valueChange', 'textarea changed')
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('value-change')).toBeTruthy()
+    expect(wrapper.emitted('value-change')![0]).toEqual(['textarea changed'])
+  })
+
+  // Test : value-change from Password
+  it('emits value-change when Password emits valueChange', async () => {
+    const wrapper = mount(VInput, {
+      props: {
+        isPassword: true,
+        modelValue: ''
+      },
+      global: noStubPasswordConfig
+    })
+
+    const password = wrapper.findComponent({ name: 'Password' })
+    password.vm.$emit('valueChange', 'password changed')
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('value-change')).toBeTruthy()
+    expect(wrapper.emitted('value-change')![0]).toEqual(['password changed'])
+  })
+
+  // Test : update:modelValue from Password
+  it('emits update:modelValue when Password value changes', async () => {
+    const wrapper = mount(VInput, {
+      props: {
+        isPassword: true,
+        modelValue: ''
+      },
+      global: noStubPasswordConfig
+    })
+
+    const password = wrapper.findComponent({ name: 'Password' })
+    password.vm.$emit('update:modelValue', 'new-password')
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual(['new-password'])
+  })
+
+  // Test : change from Password
+  it('emits change when Password emits change', async () => {
+    const wrapper = mount(VInput, {
+      props: {
+        isPassword: true,
+        modelValue: ''
+      },
+      global: noStubPasswordConfig
+    })
+
+    const password = wrapper.findComponent({ name: 'Password' })
+    password.vm.$emit('change', 'password-changed')
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('change')).toBeTruthy()
+    expect(wrapper.emitted('change')![0]).toEqual(['password-changed'])
+  })
+
+})