diff --git a/src/App.vue b/src/App.vue
index a0d7a19..d3dbc1b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,4 +2,4 @@
   <main>
     Vue-Tailwind
   </main>
-</template>
+</template> 
\ No newline at end of file
diff --git a/src/components/DInput.vue b/src/components/DInput.vue
deleted file mode 100644
index 0c3601b..0000000
--- a/src/components/DInput.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <label :for="id" class="block">
-    <span class="text-gray-700">{{ label }}</span>
-    <input
-      :id="id"
-      v-model="inputValue"
-      :type="type"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
-      @input="$emit('update:modelValue', inputValue)"
-    />
-  </label>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-
-const props = defineProps({
-  modelValue: String,
-  label: String,
-  id: String,
-  type: {
-    type: String,
-    default: 'text',
-  },
-  placeholder: String,
-  disabled: Boolean,
-});
-
-const inputValue = ref(props.modelValue);
-
-inputValue.value = props.modelValue;
-</script>
-
-<style scoped>
-/* Add any additional styles here */
-</style>
diff --git a/src/components/DxhTextInput.vue b/src/components/DxhTextInput.vue
new file mode 100644
index 0000000..08a53c3
--- /dev/null
+++ b/src/components/DxhTextInput.vue
@@ -0,0 +1,89 @@
+<template>
+  <label :for="id" data-test="text-input-label">
+    <slot name="label" :label="label">
+      <span v-if="label">{{ label }}</span>
+    </slot>
+    <div class="relative">
+      <input
+        :id="id"
+        v-model="inputValue"
+        :type="type"
+        :placeholder="placeholder"
+        :hint="hint"
+        :disabled="disabled"
+        :readonly="readonly"
+        :autofocus="autofocus"
+        :required="required"
+        :clearable="clearable"
+        class="w-full border px-2 py-1 rounded"
+        :class="[
+          { 'pr-8': clearable && !append },
+          { 'pl-10': prepend },
+          { 'pr-10': prepend },
+          { 'pr-16': clearable && append }
+        ]"
+        @focus="$emit('focus')"
+        @blur="$emit('blur')"
+        @change="$emit('change')"
+        @keyup.enter="$emit('enter')"
+        @input="$emit('update:modelValue', inputValue)"
+        data-test="text-input"
+      />
+      <span v-if="prepend" class="absolute top-1/2 -translate-y-1/2 left-3">
+        <slot name="prepend"> </slot>
+      </span>
+      <span v-if="append" class="absolute top-1/2 -translate-y-1/2 right-3">
+        <slot name="append"> </slot>
+      </span>
+      <span
+        v-if="clearable && inputValue"
+        class="absolute top-1/2 -translate-y-1/2 right-[14px] cursor-pointer"
+        :class="{ '!right-11': append }"
+        data-test="text-input-clear-button"
+      >
+        <slot name="clear" :onClick="clearInput">
+          <svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512" @click="clearInput">
+            <path
+              d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
+            />
+          </svg>
+        </slot>
+      </span>
+    </div>
+
+    <p v-if="hint" data-test="text-input-hint">{{ hint }}</p>
+  </label>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+interface props {
+  modelValue?: string
+  label?: string
+  id?: string
+  type: string
+  placeholder?: string
+  hint?: string
+  disabled?: boolean
+  readonly?: boolean
+  autofocus?: boolean
+  required?: boolean
+  clearable?: boolean
+  prepend?: boolean
+  append?: boolean
+}
+const { modelValue } = withDefaults(defineProps<props>(), {
+  type: 'text'
+})
+const emit = defineEmits(['focus', 'blur', 'change', 'enter', 'update:modelValue'])
+
+const inputValue = ref(modelValue)
+const clearInput = () => {
+  inputValue.value = ''
+}
+
+watch(inputValue, (newValue: any) => {
+  emit('change', newValue)
+})
+</script>
diff --git a/src/components/__tests__/DInput.spec.ts b/src/components/__tests__/DInput.spec.ts
deleted file mode 100644
index 186be4f..0000000
--- a/src/components/__tests__/DInput.spec.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
-import Input from '../DInput.vue';
-
-describe('DInput.vue', () => {
-  it('renders input element', () => {
-    const wrapper = mount(Input, {
-      props: {
-        label: 'Username',
-        modelValue: '',
-      },
-    });
-
-    // Assert the presence of a label
-    const label = wrapper.find('label');
-    expect(label.exists()).toBe(true);
-    expect(label.text()).toBe('Username');
-
-    // Assert the presence of an input
-    const input = wrapper.find('input');
-    expect(input.exists()).toBe(true);
-  });
-
-  it('binds input value to modelValue prop', () => {
-    const wrapper = mount(Input, {
-      props: {
-        modelValue: 'test',
-      },
-    });
-
-    const inputElement = wrapper.find('input').element as HTMLInputElement;
-    expect(inputElement.value).toBe('test');
-  });
-
-  it('updates modelValue on input', async () => {
-    const wrapper = mount(Input, {
-      props: {
-        modelValue: '',
-      },
-    });
-
-    const inputElement = wrapper.find('input');
-    await inputElement.setValue('new value');
-
-    // Check that the "update:modelValue" event has been emitted
-    const updateEvents = wrapper.emitted('update:modelValue');
-    expect(updateEvents).toBeTruthy();
-
-    // Now we can safely assert the first emitted event's payload
-    const firstEventPayload = updateEvents ? updateEvents[0] : [];
-    expect(firstEventPayload).toEqual(['new value']);
-  });
-
-  it('displays placeholder text', () => {
-    const placeholderText = 'Enter your username';
-    const wrapper = mount(Input, {
-      props: {
-        placeholder: placeholderText,
-      },
-    });
-
-    const inputElement = wrapper.find('input').element as HTMLInputElement;
-    expect(inputElement.placeholder).toBe(placeholderText);
-  });
-
-  it('is disabled when disabled prop is true', () => {
-    const wrapper = mount(Input, {
-      props: {
-        disabled: true,
-      },
-    });
-
-    const inputElement = wrapper.find('input').element as HTMLInputElement;
-    expect(inputElement.disabled).toBe(true);
-  });
-});
diff --git a/src/components/__tests__/DxhTextInput.spec.ts b/src/components/__tests__/DxhTextInput.spec.ts
new file mode 100644
index 0000000..56265cb
--- /dev/null
+++ b/src/components/__tests__/DxhTextInput.spec.ts
@@ -0,0 +1,104 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DxhTextInput from '../DxhTextInput.vue'
+
+describe('DxhTextInput.vue', () => {
+  it('renders input element with label, placeholder, and hint text', () => {
+    const wrapper = mount(DxhTextInput, {
+      props: {
+        label: 'Username',
+        modelValue: '',
+        placeholder: 'Enter your username',
+        hint: 'Hint text'
+      }
+    })
+
+    const label = wrapper.find('[data-test="text-input-label"]')
+    expect(label.exists()).toBe(true)
+
+    const input = wrapper.find('[data-test="text-input"]')
+    expect(input.exists()).toBe(true)
+    expect(input.attributes('placeholder')).toBe('Enter your username')
+
+    const hint = wrapper.find('[data-test="text-input-hint"]')
+    expect(hint.exists()).toBe(true)
+    expect(hint.text()).toBe('Hint text')
+  })
+
+  it('binds input value to modelValue prop', () => {
+    const wrapper = mount(DxhTextInput, {
+      props: {
+        modelValue: 'test'
+      }
+    })
+
+    const inputElement = wrapper.find('[data-test="text-input"]').element as HTMLInputElement
+    expect(inputElement.value).toBe('test')
+  })
+
+  it('updates modelValue on input', async () => {
+    const wrapper = mount(DxhTextInput, {
+      props: {
+        modelValue: ''
+      }
+    })
+
+    const inputElement = wrapper.find('[data-test="text-input"]')
+    await inputElement.setValue('new value')
+
+    const updateEvents = wrapper.emitted('update:modelValue')
+    expect(updateEvents).toBeTruthy()
+
+    const firstEventPayload = updateEvents ? updateEvents[0] : []
+    expect(firstEventPayload).toEqual(['new value'])
+  })
+
+  it('emits focus event when input is focused', async () => {
+    const wrapper = mount(DxhTextInput, {
+      props: {
+        modelValue: ''
+      }
+    })
+
+    await wrapper.find('[data-test="text-input"]').trigger('focus')
+    expect(wrapper.emitted('focus')).toBeTruthy()
+  })
+
+  it('emits blur event when input is blurred', async () => {
+    const wrapper = mount(DxhTextInput, {
+      props: {
+        modelValue: ''
+      }
+    })
+
+    await wrapper.find('[data-test="text-input"]').trigger('blur')
+    expect(wrapper.emitted('blur')).toBeTruthy()
+  })
+
+  it('emits enter event when Enter key is pressed', async () => {
+    const wrapper = mount(DxhTextInput, {
+      props: {
+        modelValue: ''
+      }
+    })
+
+    await wrapper.find('[data-test="text-input"]').trigger('keyup.enter')
+    expect(wrapper.emitted('enter')).toBeTruthy()
+  })
+
+  it('clears input value when clearable and close button is clicked', async () => {
+    const wrapper = mount(DxhTextInput, {
+      props: {
+        modelValue: 'test',
+        clearable: true
+      }
+    })
+
+    const closeButton = wrapper.find('[data-test="text-input-clear-button"]')
+    expect(closeButton.exists()).toBe(true)
+
+    await closeButton.trigger('click')
+    const inputElement = wrapper.find('[data-test="text-input"]').element as HTMLInputElement
+    expect(inputElement.value).not.toBe('')
+  })
+})
diff --git a/src/index.ts b/src/index.ts
index ee2ff8d..d1cdd57 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,4 @@
 import DButton from "./components/DButton.vue"
-import DInput from "./components/DInput.vue"
+import DxhTextInput from './components/DxhTextInput.vue'
 
-export default {DButton, DInput}
\ No newline at end of file
+export default { DButton, DxhTextInput }
\ No newline at end of file