diff --git a/docs/components/input.md b/docs/components/input.md
index 88e07265..c25bc824 100644
--- a/docs/components/input.md
+++ b/docs/components/input.md
@@ -1,12 +1,12 @@
 <script setup>
 import FwbInputExample from './input/examples/FwbInputExample.vue'
-import FwbInputExampleSize from './input/examples/FwbInputExampleSize.vue'
 import FwbInputExampleDisabled from './input/examples/FwbInputExampleDisabled.vue'
 import FwbInputExampleHelper from './input/examples/FwbInputExampleHelper.vue'
-import FwbInputExampleBlockClasses from './input/examples/FwbInputExampleBlockClasses.vue'
 import FwbInputExamplePrefix from './input/examples/FwbInputExamplePrefix.vue'
-import FwbInputExampleSuffix from './input/examples/FwbInputExampleSuffix.vue'
 import FwbInputExampleRequired from './input/examples/FwbInputExampleRequired.vue'
+import FwbInputExampleSize from './input/examples/FwbInputExampleSize.vue'
+import FwbInputExampleStyling from './input/examples/FwbInputExampleStyling.vue'
+import FwbInputExampleSuffix from './input/examples/FwbInputExampleSuffix.vue'
 import FwbInputExampleValidation from './input/examples/FwbInputExampleValidation.vue'
 </script>
 
@@ -104,33 +104,6 @@ const name = ref('')
 </script>
 ```
 
-## Extra CSS classes
-
-Sometimes it is required to add some customization to the input or the input wrapper.
-By default, `class` attribute is bound to the input element. To customize the input wrapper you can use the `block-classes` property.
-It accepts the values as the `class` attribute
-
-<fwb-input-example-block-classes />
-```vue
-<template>
-  <fwb-input
-    v-model="name"
-    label="First name"
-    placeholder="enter your first name"
-    required
-    class="bg-green-200"
-    block-classes="border-2 border-green-500 p-2 rounded-lg"
-  />
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { FwbInput } from 'flowbite-vue'
-
-const name = ref('')
-</script>
-```
-
 ## Slot - Helper
 
 <fwb-input-example-helper />
@@ -218,22 +191,26 @@ const query = ref('')
 ```vue
 <template>
   <fwb-input
-    v-model="email"
+    v-model="name"
+    label="Your name"
+    placeholder="Success input"
     required
-    placeholder="enter your email address"
-    label="Email"
     validation-status="success"
-  />
+  >
+    <template #validationMessage>
+      <span class="font-medium">Well done!</span> Some success message.
+    </template>
+  </fwb-input>
   <hr class="mt-4 border-0">
   <fwb-input
-    v-model="email"
+    v-model="name"
+    label="Your name"
+    placeholder="Error input"
     required
-    placeholder="enter your email address"
-    label="Email"
     validation-status="error"
   >
     <template #validationMessage>
-      Please enter a valid email address
+      <span class="font-medium">Oh, snapp!</span> Some error message.
     </template>
   </fwb-input>
 </template>
@@ -242,6 +219,44 @@ const query = ref('')
 import { ref } from 'vue'
 import { FwbInput } from 'flowbite-vue'
 
-const email = ref('')
+const name = ref('')
 </script>
 ```
+
+## Styling Inputs
+
+Use dedicated props to pass classes to individual elements.
+
+
+<fwb-input-example-styling />
+```vue
+<template>
+  <fwb-input
+    v-model="name"
+    class="p-2 border border-black rounded-none text-a italic"
+    input-class="p-0 text-center text-gray-700 dark:text-gray-200"
+    label-class="text-center p-2 m-0 text-gray-900 dark:text-gray-200"
+    label="First name"
+    placeholder="enter your first name"
+    wrapper-class="bg-gray-100 dark:bg-gray-800"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbInput } from 'flowbite-vue'
+
+const name = ref('')
+</script>
+```
+
+
+## Input component API
+
+### FwbInput Props
+| Name         | Type             | Default | Description                                                  |
+| ------------ | ---------------- | ------- | ------------------------------------------------------------ |
+| wrapperClass | String \| Object | `''`    | Added to main component wrapper                              |
+| labelClass   | String \| Object | `''`    | Added to `<label>` element.                                  |
+| class        | String \| Object | `''`    | Added to wrapper around `<input>` element and prefix/suffix. |
+| inputClass   | String \| Object | `''`    | Added to `<input>` element.                                  |
diff --git a/docs/components/input/examples/FwbInputExampleDisabled.vue b/docs/components/input/examples/FwbInputExampleDisabled.vue
index 50d0a8ac..b9668d62 100644
--- a/docs/components/input/examples/FwbInputExampleDisabled.vue
+++ b/docs/components/input/examples/FwbInputExampleDisabled.vue
@@ -1,10 +1,12 @@
 <template>
-  <fwb-input
-    v-model="name"
-    disabled
-    label="First name"
-    placeholder="enter your first name"
-  />
+  <div class="vp-raw">
+    <fwb-input
+      v-model="name"
+      disabled
+      label="First name"
+      placeholder="enter your first name"
+    />
+  </div>
 </template>
 
 <script lang="ts" setup>
diff --git a/docs/components/input/examples/FwbInputExampleHelper.vue b/docs/components/input/examples/FwbInputExampleHelper.vue
index 2b1e60d7..7e1ea648 100644
--- a/docs/components/input/examples/FwbInputExampleHelper.vue
+++ b/docs/components/input/examples/FwbInputExampleHelper.vue
@@ -8,8 +8,8 @@
       <template #helper>
         We'll never share your details. Read our
         <fwb-a
-          href="#"
           color="text-blue-600 dark:text-blue-500"
+          href="#"
         >
           Privacy Policy
         </fwb-a>.
diff --git a/docs/components/input/examples/FwbInputExampleBlockClasses.vue b/docs/components/input/examples/FwbInputExampleStyling.vue
similarity index 54%
rename from docs/components/input/examples/FwbInputExampleBlockClasses.vue
rename to docs/components/input/examples/FwbInputExampleStyling.vue
index 9efacf76..9b57b99f 100644
--- a/docs/components/input/examples/FwbInputExampleBlockClasses.vue
+++ b/docs/components/input/examples/FwbInputExampleStyling.vue
@@ -2,10 +2,12 @@
   <div class="vp-raw">
     <fwb-input
       v-model="name"
+      class="p-2 border border-gray-900 rounded-none"
+      input-class="p-0 text-center text-gray-700 dark:text-gray-200"
+      label-class="text-center p-2 m-0 text-gray-900 dark:text-gray-200 italic"
       label="First name"
       placeholder="enter your first name"
-      class="bg-green-200 dark:bg-green-700"
-      block-classes="border-2 border-green-500 p-2 rounded-lg"
+      wrapper-class="bg-gray-100 dark:bg-gray-800"
     />
   </div>
 </template>
diff --git a/docs/components/input/examples/FwbInputExampleValidation.vue b/docs/components/input/examples/FwbInputExampleValidation.vue
index 47d3538f..8d44f253 100644
--- a/docs/components/input/examples/FwbInputExampleValidation.vue
+++ b/docs/components/input/examples/FwbInputExampleValidation.vue
@@ -1,22 +1,26 @@
 <template>
   <div class="vp-raw">
     <fwb-input
-      v-model="email"
+      v-model="name"
+      label="Your name"
+      placeholder="Success input"
       required
-      placeholder="enter your email address"
-      label="Email"
       validation-status="success"
-    />
+    >
+      <template #validationMessage>
+        <span class="font-medium">Well done!</span> Some success message.
+      </template>
+    </fwb-input>
     <hr class="mt-4 border-0">
     <fwb-input
-      v-model="email"
+      v-model="name"
+      label="Your name"
+      placeholder="Error input"
       required
-      placeholder="enter your email address"
-      label="Email"
       validation-status="error"
     >
       <template #validationMessage>
-        Please enter a valid email address
+        <span class="font-medium">Oh, snapp!</span> Some error message.
       </template>
     </fwb-input>
   </div>
@@ -27,5 +31,5 @@ import { ref } from 'vue'
 
 import { FwbInput } from '../../../../src/index'
 
-const email = ref('')
+const name = ref('')
 </script>
diff --git a/src/components/FwbInput/FwbInput.vue b/src/components/FwbInput/FwbInput.vue
index 1d49b2bc..aa3c5475 100644
--- a/src/components/FwbInput/FwbInput.vue
+++ b/src/components/FwbInput/FwbInput.vue
@@ -1,13 +1,10 @@
 <template>
-  <div :class="blockClasses">
+  <div :class="wrapperClass">
     <label
       v-if="label"
-      :class="labelClasses"
+      :class="labelClass"
     >{{ label }}</label>
-    <div
-      class="relative flex items-center"
-      :class="[inputBlockClasses]"
-    >
+    <div :class="inputWrapperClass">
       <div
         v-if="$slots.prefix"
         class="ms-2 flex shrink-0 items-center"
@@ -17,11 +14,11 @@
       <input
         v-bind="$attrs"
         v-model="model"
+        :autocomplete="autocomplete"
+        :class="inputClass"
         :disabled="disabled"
-        :type="type"
         :required="required"
-        :autocomplete="autocomplete"
-        :class="[inputClasses]"
+        :type="type"
       >
       <div
         v-if="$slots.suffix"
@@ -32,13 +29,13 @@
     </div>
     <p
       v-if="$slots.validationMessage"
-      :class="validationWrapperClasses"
+      :class="validationMessageClass"
     >
       <slot name="validationMessage" />
     </p>
     <p
       v-if="$slots.helper"
-      class="mt-2 text-sm text-gray-500 dark:text-gray-400"
+      :class="helperMessageClass"
     >
       <slot name="helper" />
     </p>
@@ -46,29 +43,26 @@
 </template>
 
 <script lang="ts" setup>
-import { useVModel } from '@vueuse/core'
-import { twMerge } from 'tailwind-merge'
-import { computed, toRefs } from 'vue'
+
+import { toRefs } from 'vue'
 
 import { useInputClasses } from './composables/useInputClasses'
-import {
-  type CommonAutoFill,
-  type InputSize,
-  type InputType,
-  type ValidationStatus,
-  validationStatusMap,
-} from './types'
+
+import type { CommonAutoFill, InputSize, InputType, ValidationStatus } from './types'
 
 interface InputProps {
+  autocomplete?: CommonAutoFill
+  class?: string | Record<string, boolean>
   disabled?: boolean
+  inputClass?: string | Record<string, boolean>
   label?: string
+  labelClass?: string | Record<string, boolean>
   modelValue?: string | number
   required?: boolean
   size?: InputSize
   type?: InputType
-  autocomplete?: CommonAutoFill
   validationStatus?: ValidationStatus
-  blockClasses?: string | string[] | Record<string, unknown>
+  wrapperClass?: string | Record<string, boolean>
 }
 
 defineOptions({
@@ -76,25 +70,28 @@ defineOptions({
 })
 
 const props = withDefaults(defineProps<InputProps>(), {
+  autocomplete: 'off',
+  class: '',
   disabled: false,
+  inputClass: '',
   label: '',
+  labelClass: '',
   modelValue: '',
   required: false,
   size: 'md',
   type: 'text',
-  autocomplete: 'off',
   validationStatus: undefined,
-  blockClasses: undefined,
+  wrapperClass: '',
 })
 
-const model = useVModel(props, 'modelValue')
-
-const { inputClasses, inputBlockClasses, labelClasses } = useInputClasses(toRefs(props))
-
-const validationWrapperClasses = computed(() => twMerge(
-  'mt-2 text-sm',
-  props.validationStatus === validationStatusMap.Success ? 'text-green-600 dark:text-green-500' : '',
-  props.validationStatus === validationStatusMap.Error ? 'text-red-600 dark:text-red-500' : '',
+const model = defineModel({ type: String })
 
-))
+const {
+  wrapperClass,
+  helperMessageClass,
+  validationMessageClass,
+  labelClass,
+  inputWrapperClass,
+  inputClass,
+} = useInputClasses(toRefs(props))
 </script>
diff --git a/src/components/FwbInput/composables/useInputClasses.ts b/src/components/FwbInput/composables/useInputClasses.ts
index daec06af..aa244d65 100644
--- a/src/components/FwbInput/composables/useInputClasses.ts
+++ b/src/components/FwbInput/composables/useInputClasses.ts
@@ -1,76 +1,98 @@
-import { twMerge } from 'tailwind-merge'
 import { computed, type Ref } from 'vue'
 
-import {
-  type InputSize,
-  type ValidationStatus,
-  validationStatusMap,
-} from '../types'
+import { type InputSize, type ValidationStatus, validationStatusMap } from '../types'
 
-// LABEL
-const baseLabelClasses = 'block mb-2 text-sm font-medium'
+import { useMergeClasses } from '@/composables/useMergeClasses'
 
-// INPUT
-const defaultInputClasses = 'block flex-grow w-full p-0 bg-transparent text-inherit ring-offset-0 ring-0 border-0 focus:ring-offset-0 focus:ring-0 focus:border-0'
+const defaultWrapperClasses = ''
+const defaultLabelClasses = 'block mb-2 text-sm font-medium'
+const defaultInputWrapperClasses = 'relative flex items-center has-[input:focus]:ring-offset-0 has-[input:focus]:ring-1 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg has-[input:focus]:ring-blue-500 has-[input:focus]:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:has-[input:focus]:ring-blue-500 dark:has-[input:focus]:border-blue-500'
+const defaultInputClasses = 'block flex-grow w-full p-0 bg-transparent text-inherit ring-offset-0 ring-0 border-0 focus:ring-offset-0 focus:ring-0 focus:border-0 dark:placeholder-gray-400'
+const defaultHelperClasses = 'mt-2 text-sm text-gray-500 dark:text-gray-400'
 
-// BLOCK
-const defaultBlockClasses = 'has-[input:focus]:ring-offset-0 has-[input:focus]:ring-1 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg has-[input:focus]:ring-blue-500 has-[input:focus]:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:has-[input:focus]:ring-blue-500 dark:has-[input:focus]:border-blue-500'
+const disabledInputWrapperClasses = 'bg-gray-100'
+const disabledInputClasses = 'cursor-not-allowed'
 
-const disabledInputClasses = 'cursor-not-allowed bg-gray-100'
 const inputSizeClasses: Record<InputSize, string> = {
-  lg: 'p-4',
-  md: 'p-2.5 text-sm',
   sm: 'p-2 text-sm',
+  md: 'p-2.5 text-sm',
+  lg: 'p-4',
 }
 
-const successInputClasses = 'bg-green-50 border-green-500 dark:border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 has-[input:focus]:ring-green-500 has-[input:focus]:border-green-500'
-const errorInputClasses = 'bg-red-50 border-red-500 text-red-900 placeholder-red-700 has-[input:focus]:ring-red-500 has-[input:focus]:border-red-500 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500'
+const errorInputWrapperClasses = 'bg-red-50 border-red-500 text-red-900 placeholder-red-700 has-[input:focus]:ring-red-500 has-[input:focus]:border-red-500 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500'
+const errorTextClasses = 'text-red-700 dark:text-red-500'
+const successInputWrapperClasses = 'bg-green-50 border-green-500 dark:border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 has-[input:focus]:ring-green-500 has-[input:focus]:border-green-500 '
+const successTextClasses = 'text-green-700 dark:text-green-500'
+const errorInputClasses = 'text-red-900 placeholder-red-700 dark:placeholder-red-500'
+const successInputClasses = 'text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500'
 
 export type UseInputClassesProps = {
-  size: Ref<InputSize>
+  class: Ref<string | Record<string, boolean>>
   disabled: Ref<boolean>
+  inputClass: Ref<string | Record<string, boolean>>
+  labelClass: Ref<string | Record<string, boolean>>
+  size: Ref<InputSize>
   validationStatus: Ref<ValidationStatus | undefined>
+  wrapperClass: Ref<string | Record<string, boolean>>
 }
 
 export function useInputClasses (props: UseInputClassesProps): {
-  inputBlockClasses: Ref<string>
-  inputClasses: Ref<string>
-  labelClasses: Ref<string>
+  helperMessageClass: Ref<string>
+  inputClass: Ref<string>
+  inputWrapperClass: Ref<string>
+  labelClass: Ref<string>
+  validationMessageClass: Ref<string>
+  wrapperClass: Ref<string>
 } {
-  const inputBlockClasses = computed(() => {
-    const vs = props.validationStatus.value
+  const wrapperClass = computed(() => useMergeClasses([
+    defaultWrapperClasses,
+    props.wrapperClass.value,
+  ]))
 
-    const classByStatus = vs === validationStatusMap.Success
-      ? successInputClasses
-      : vs === validationStatusMap.Error
-        ? errorInputClasses
-        : ''
+  const labelClass = computed(() => useMergeClasses([
+    defaultLabelClasses,
+    props.labelClass.value,
+    props.validationStatus.value === validationStatusMap.Success
+      ? successTextClasses
+      : props.validationStatus.value === validationStatusMap.Error ? errorTextClasses : '',
+  ]))
 
-    return twMerge(
-      defaultBlockClasses,
-      classByStatus,
-      props.disabled.value ? disabledInputClasses : '',
-    )
-  })
+  const inputWrapperClass = computed(() => useMergeClasses([
+    defaultInputWrapperClasses,
+    props.class.value,
+    props.validationStatus.value === validationStatusMap.Success
+      ? successInputWrapperClasses
+      : props.validationStatus.value === validationStatusMap.Error ? errorInputWrapperClasses : '',
+    props.disabled.value ? disabledInputWrapperClasses : '',
+  ]))
 
-  const inputClasses = computed(() => {
-    return twMerge(defaultInputClasses, inputSizeClasses[props.size.value])
-  })
+  const inputClass = computed(() => useMergeClasses([
+    defaultInputClasses,
+    inputSizeClasses[props.size.value],
+    props.validationStatus.value === validationStatusMap.Success
+      ? successInputClasses
+      : props.validationStatus.value === validationStatusMap.Error ? errorInputClasses : '',
+    props.inputClass.value,
+    props.disabled.value ? disabledInputClasses : '',
+  ]))
 
-  const labelClasses = computed(() => {
-    const vs = props.validationStatus.value
-    const classByStatus = vs === validationStatusMap.Success
-      ? 'text-green-700 dark:text-green-500'
-      : vs === validationStatusMap.Error
-        ? 'text-red-700 dark:text-red-500'
-        : 'text-gray-900 dark:text-white'
+  const validationMessageClass = computed(() => useMergeClasses([
+    defaultHelperClasses,
+    props.validationStatus.value === validationStatusMap.Success
+      ? successTextClasses
+      : props.validationStatus.value === validationStatusMap.Error ? errorTextClasses : '',
+  ]))
 
-    return twMerge(baseLabelClasses, classByStatus)
-  })
+  const helperMessageClass = computed(() => useMergeClasses([
+    defaultHelperClasses,
+  ]))
 
   return {
-    inputBlockClasses,
-    inputClasses,
-    labelClasses,
+    helperMessageClass,
+    inputClass,
+    inputWrapperClass,
+    labelClass,
+    validationMessageClass,
+    wrapperClass,
   }
 }
diff --git a/src/components/FwbInput/types.ts b/src/components/FwbInput/types.ts
index f752f235..157c6151 100644
--- a/src/components/FwbInput/types.ts
+++ b/src/components/FwbInput/types.ts
@@ -6,8 +6,8 @@ export type InputType = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-loc
 export type CommonAutoFill = 'on' | 'off' | 'email' | 'tel' | 'name' | 'username' | 'current-password' | 'country' | 'postal-code' | 'language' | 'bday'
 
 export const validationStatusMap = {
-  Success: 'success',
   Error: 'error',
+  Success: 'success',
 } as const
 
 export type ValidationStatus = typeof validationStatusMap[keyof typeof validationStatusMap]
diff --git a/src/composables/useMergeClasses.ts b/src/composables/useMergeClasses.ts
index 8ca24660..ac6176ad 100644
--- a/src/composables/useMergeClasses.ts
+++ b/src/composables/useMergeClasses.ts
@@ -1,4 +1,29 @@
 import { twMerge } from 'tailwind-merge'
 
-export const useMergeClasses = (componentClasses: string | string[]): string =>
-  twMerge(componentClasses)
+import type { ClassInput } from '@/types/global'
+
+function normalizeClasses (input: ClassInput): string {
+  if (typeof input === 'string') {
+    return input.trim()
+  }
+
+  if (Array.isArray(input)) {
+    return input
+      .map(normalizeClasses)
+      .join(' ')
+      .trim()
+  }
+
+  if (typeof input === 'object' && input !== null) {
+    return Object.entries(input)
+      .filter(([_, value]) => value)
+      .map(([key]) => key)
+      .join(' ')
+  }
+
+  return ''
+}
+
+export const useMergeClasses = (componentClasses: ClassInput): string => {
+  return twMerge(normalizeClasses(componentClasses))
+}
diff --git a/src/types/global.ts b/src/types/global.ts
new file mode 100644
index 00000000..c35720fc
--- /dev/null
+++ b/src/types/global.ts
@@ -0,0 +1,5 @@
+import type { Ref } from 'vue'
+
+export type ClassInput = string | Record<string, boolean> | Array<string | Record<string, boolean>>
+
+export type ClassRef = Ref<ClassInput>