diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md
index ec289dc3..f4642ccd 100644
--- a/docs/components/checkbox.md
+++ b/docs/components/checkbox.md
@@ -3,6 +3,7 @@ import CheckboxDefault from './checkbox/examples/CheckboxDefault.vue'
 import CheckboxDisabled from './checkbox/examples/CheckboxDisabled.vue'
 import CheckboxChecked from './checkbox/examples/CheckboxChecked.vue'
 import CheckboxLink from './checkbox/examples/CheckboxLink.vue'
+import CustomClasses from './checkbox/examples/CustomClasses.vue'
 </script>
 # Vue Checkbox - Flowbite
 
@@ -67,3 +68,15 @@ const ref1 = ref(true)
 ```
 
 <CheckboxLink />
+
+## Override classes
+
+Override default input field class with `classes` and `labelClass` for label.
+
+```vue
+<template>
+  <Input classes="focus:ring-green-500 focus:border-green-500 dark:focus:ring-green-500 dark:focus:border-green-500" placeholder="enter your first name" label="First name" />
+</template>
+```
+
+<CustomClasses />
diff --git a/docs/components/checkbox/examples/CustomClasses.vue b/docs/components/checkbox/examples/CustomClasses.vue
new file mode 100644
index 00000000..9d896166
--- /dev/null
+++ b/docs/components/checkbox/examples/CustomClasses.vue
@@ -0,0 +1,7 @@
+<template>
+    <Checkbox classes="!w-6 !h-6 text-green-500 rounded dark:ring-offset-gray-800 focus:ring-green-500" label="Default checkbox" />
+</template>
+  
+<script setup>
+import Checkbox from '../../../../src/components/Checkbox/Checkbox.vue'
+</script>
diff --git a/docs/components/fileInput.md b/docs/components/fileInput.md
index 92bbfcbb..1e50db53 100644
--- a/docs/components/fileInput.md
+++ b/docs/components/fileInput.md
@@ -4,6 +4,7 @@ import FileInpHelper from './fileInput/examples/FileInpHelper.vue'
 import FileInpSize from './fileInput/examples/FileInpSize.vue'
 import FileInpDropZone from './fileInput/examples/FileInpDropZone.vue'
 import MultipleFile from './fileInput/examples/MultipleFile.vue'
+import CustomClasses from './fileInput/examples/CustomClasses.vue'
 </script>
 
 # Vue FileInput - Flowbite
@@ -101,3 +102,15 @@ import FileInput from 'flowbite-vue'
 ```
 
 <FileInpDropZone />
+
+## Override classes
+
+Override default input field class with `classes` and `labelClass` for label.
+
+```vue
+<template>
+  <FileInput classes="focus:ring-green-500 focus:border-green-500 dark:focus:ring-green-500 dark:focus:border-green-500" label="Upload file" />
+</template>
+```
+
+<CustomClasses />
diff --git a/docs/components/fileInput/examples/CustomClasses.vue b/docs/components/fileInput/examples/CustomClasses.vue
new file mode 100644
index 00000000..9ec75fae
--- /dev/null
+++ b/docs/components/fileInput/examples/CustomClasses.vue
@@ -0,0 +1,8 @@
+<template>
+    <FileInput classes="focus:ring-green-500 focus:border-green-500 dark:focus:ring-green-500 dark:focus:border-green-500" label="Upload file" />
+ </template>
+  
+<script setup>
+import FileInput from '../../../../src/components/FileInput/FileInput.vue'
+</script>
+  
\ No newline at end of file
diff --git a/docs/components/input.md b/docs/components/input.md
index 21a255ce..20e9c29a 100644
--- a/docs/components/input.md
+++ b/docs/components/input.md
@@ -6,6 +6,7 @@ import InputHelperExample from './input/examples/InputHelperExample.vue';
 import InputPrefixExample from './input/examples/InputPrefixExample.vue';
 import InputSuffixExample from './input/examples/InputSuffixExample.vue'
 import InputRequiredExample from './input/examples/InputRequiredExample.vue'
+import CustomClasses from './input/examples/CustomClasses.vue' 
 </script>
 
 # Vue Input - Flowbite
@@ -124,3 +125,15 @@ import { Input, Button } from 'flowbite-vue'
 ```
 
 <InputSuffixExample />
+
+## Override classes
+
+Override default input field class with `classes` and `labelClass` for label.
+
+```vue
+<template>
+  <Input classes="focus:ring-green-500 focus:border-green-500 dark:focus:ring-green-500 dark:focus:border-green-500" placeholder="enter your first name" label="First name" />
+</template>
+```
+
+<CustomClasses />
diff --git a/docs/components/input/examples/CustomClasses.vue b/docs/components/input/examples/CustomClasses.vue
new file mode 100644
index 00000000..514a2c79
--- /dev/null
+++ b/docs/components/input/examples/CustomClasses.vue
@@ -0,0 +1,7 @@
+<template>
+    <Input classes="focus:ring-green-500 focus:border-green-500 dark:focus:ring-green-500 dark:focus:border-green-500" placeholder="enter your first name" label="First name" />
+</template>
+<script lang="ts" setup>
+import { Input } from '../../../../src/index'
+</script>
+  
\ No newline at end of file
diff --git a/docs/components/radio.md b/docs/components/radio.md
index 6e1118d2..e016e17f 100644
--- a/docs/components/radio.md
+++ b/docs/components/radio.md
@@ -6,6 +6,7 @@ import HorizontalListRadio from './radio/examples/HorizontalListRadio.vue'
 import InlineRadio from './radio/examples/InlineRadio.vue'
 import LinkRadio from './radio/examples/LinkRadio.vue'
 import BorderedRadio from './radio/examples/BorderedRadio.vue'
+import CustomClasses from './radio/examples/CustomClasses.vue'
 </script>
 
 # Vue Toggle Radio - Flowbite
@@ -129,4 +130,19 @@ const picked = ref('one')
 </template>
 ```
 
-<BorderedRadio />
\ No newline at end of file
+<BorderedRadio />
+
+## Override classes
+
+Override default radio field class with `classes` and `labelClass` for label.
+
+```vue
+<template>
+    <div>
+      <Radio classes="!w-6 !h-6 text-green-600 focus:ring-green-500 dark:focus:ring-green-500 dark:ring-offset-gray-800" name="default radio" v-model="picked" value="one" label="Default radio" />
+      <Radio classes="!w-6 !h-6 text-green-600 focus:ring-green-500 dark:focus:ring-green-500 dark:ring-offset-gray-800" name="default radio" v-model="picked" value="two" label="Checked state" />
+    </div>
+</template>
+```
+
+<CustomClasses />
diff --git a/docs/components/radio/examples/CustomClasses.vue b/docs/components/radio/examples/CustomClasses.vue
new file mode 100644
index 00000000..7b23dc24
--- /dev/null
+++ b/docs/components/radio/examples/CustomClasses.vue
@@ -0,0 +1,14 @@
+<template>
+    <div>
+      <Radio classes="!w-6 !h-6 text-green-600 focus:ring-green-500 dark:focus:ring-green-500 dark:ring-offset-gray-800" name="default radio" v-model="picked" value="one" label="Default radio" />
+      <Radio classes="!w-6 !h-6 text-green-600 focus:ring-green-500 dark:focus:ring-green-500 dark:ring-offset-gray-800" name="default radio" v-model="picked" value="two" label="Checked state" />
+    </div>
+</template>
+
+<script setup>
+import Radio from '../../../../src/components/Radio/Radio.vue'
+import { ref } from 'vue'
+
+const picked = ref('one')
+</script>
+  
\ No newline at end of file
diff --git a/docs/components/range.md b/docs/components/range.md
index d1d4fdfc..68880dec 100644
--- a/docs/components/range.md
+++ b/docs/components/range.md
@@ -4,6 +4,7 @@ import DisabledRange from './range/examples/DisabledRange.vue'
 import MinMaxRange from './range/examples/MinMaxRange.vue'
 import StepsRange from './range/examples/StepsRange.vue'
 import SizeRange from './range/examples/SizeRange.vue'
+import CustomClasses from './range/examples/CustomClasses.vue'
 </script>
 
 # Vue Toggle Range - Flowbite
@@ -28,7 +29,6 @@ import { ref } from 'vue'
 
 const value = ref('10')
 </script>
-
 ```
 
 <DefaultRange />
@@ -77,3 +77,15 @@ const value = ref('10')
 ```
 
 <SizeRange />
+
+## Override classes
+
+Override default range field class with `classes` and `labelClass` for label.
+
+```vue
+<template>
+  <Range classes="dark:bg-blue-200 bg-blue-200" v-model="value" />
+</template>
+```
+
+<CustomClasses />
diff --git a/docs/components/range/examples/CustomClasses.vue b/docs/components/range/examples/CustomClasses.vue
new file mode 100644
index 00000000..49403d2a
--- /dev/null
+++ b/docs/components/range/examples/CustomClasses.vue
@@ -0,0 +1,12 @@
+<template>
+    <div>
+        <Range classes="dark:bg-blue-200 bg-blue-200" v-model="value" />
+    </div>
+</template>
+  
+<script setup>
+import Range from '../../../../src/components/Range/Range.vue'
+import { ref } from 'vue'
+
+const value = ref('10')
+</script>
diff --git a/docs/components/select.md b/docs/components/select.md
index dcfee55f..b31bc94c 100644
--- a/docs/components/select.md
+++ b/docs/components/select.md
@@ -3,6 +3,7 @@ import SelectExample from './select/examples/SelectExample.vue';
 import DisabledSelect from './select/examples/DisabledSelect.vue';
 import SelectSize from './select/examples/SelectSize.vue';
 import UnderlinedSelect from './select/examples/UnderlinedSelect.vue';
+import CustomClasses from './select/examples/CustomClasses.vue'
 </script>
 
 # Vue Select - Flowbite
@@ -73,4 +74,16 @@ const countries = [
 </template>
 ```
 
-<SelectSize />
\ No newline at end of file
+<SelectSize />
+
+## Override classes
+
+Override default select field class with `classes` and `labelClass` for label.
+
+```vue
+<template>
+  <Select classes="focus:ring-green-500 focus:border-green-500 dark:focus:ring-green-500 dark:focus:border-green-500" :options="countries" label="Select a country" />
+</template>
+```
+
+<CustomClasses />
diff --git a/docs/components/select/examples/CustomClasses.vue b/docs/components/select/examples/CustomClasses.vue
new file mode 100644
index 00000000..75764f07
--- /dev/null
+++ b/docs/components/select/examples/CustomClasses.vue
@@ -0,0 +1,13 @@
+<template>
+    <Select classes="focus:ring-green-500 focus:border-green-500 dark:focus:ring-green-500 dark:focus:border-green-500" :options="countries" label="Select a country" />
+</template>
+  
+<script setup>
+import { Select } from '../../../../src/index'
+  
+const countries = [
+    { value: 'us', name: 'United States' },
+    { value: 'ca', name: 'Canada' },
+    { value: 'fr', name: 'France' },
+]
+</script>
\ No newline at end of file
diff --git a/docs/components/textarea.md b/docs/components/textarea.md
index e7c010c6..a12b6629 100644
--- a/docs/components/textarea.md
+++ b/docs/components/textarea.md
@@ -1,6 +1,7 @@
 <script setup>
 import DefaultTextarea from './textarea/examples/DefaultTextarea.vue'
 import CommentTextarea from './textarea/examples/CommentTextarea.vue'
+import CustomClasses from './textarea/examples/CustomClasses.vue'
 </script>
 
 # Vue Textarea - Flowbite
@@ -63,3 +64,15 @@ import { Button, Textarea } from 'flowbite-vue'
 ```
 
 <CommentTextarea />
+
+## Override classes
+
+Override default input field class with `classes` and `labelClass` for label.
+
+```vue
+<template>
+  <Textarea classes="focus:ring-green-500 focus:border-green-500 dark:focus:ring-green-500 dark:focus:border-green-500" rows="4" placeholder="Write you message..." v-model="message" label="Your message" />
+</template>
+```
+
+<CustomClasses />
diff --git a/docs/components/textarea/examples/CustomClasses.vue b/docs/components/textarea/examples/CustomClasses.vue
new file mode 100644
index 00000000..c6e5e0a4
--- /dev/null
+++ b/docs/components/textarea/examples/CustomClasses.vue
@@ -0,0 +1,12 @@
+<template>
+    <div>
+        <Textarea classes="focus:ring-green-500 focus:border-green-500 dark:focus:ring-green-500 dark:focus:border-green-500" rows="4" placeholder="Write you message..." v-model="message" label="Your message" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Textarea from '../../../../src/components/Textarea/Textarea.vue'
+
+const message = ref('')
+</script>
diff --git a/docs/components/toggle.md b/docs/components/toggle.md
index 05d3f82a..4dc2e05b 100644
--- a/docs/components/toggle.md
+++ b/docs/components/toggle.md
@@ -4,6 +4,7 @@
   import DisabledToggle from './toggle/examples/DisabledToggle.vue'
   import ColorsToggle from './toggle/examples/ColorsToggle.vue'
   import SizeToggle from './toggle/examples/SizeToggle.vue'
+  import CustomClasses from './toggle/examples/CustomClasses.vue'
 </script>
 
 # Vue Toggle - Flowbite
@@ -89,3 +90,15 @@ const toggle = ref(false)
 ```
 
 <SizeToggle />
+
+## Override classes
+
+Override default toggle field class with `classes` and `labelClass` for label.
+
+```vue
+<template>
+  <Toggle classes="peer-focus:ring-pink-300 dark:peer-focus:ring-pink-800 peer-checked:bg-pink-600" v-model="toggle" label="Toggle me" />
+</template>
+```
+
+<CustomClasses />
diff --git a/docs/components/toggle/examples/CustomClasses.vue b/docs/components/toggle/examples/CustomClasses.vue
new file mode 100644
index 00000000..262801db
--- /dev/null
+++ b/docs/components/toggle/examples/CustomClasses.vue
@@ -0,0 +1,13 @@
+<template>
+    <div class="flex flex-col gap-2">
+        <Toggle classes="peer-focus:ring-pink-300 dark:peer-focus:ring-pink-800 peer-checked:bg-pink-600" v-model="toggle" label="Toggle me" />
+    </div>
+</template>
+  
+<script setup>
+import { ref } from 'vue'
+import { Toggle } from '../../../../src/index'
+
+const toggle = ref(false)
+</script>
+  
\ No newline at end of file
diff --git a/src/components/Checkbox/Checkbox.vue b/src/components/Checkbox/Checkbox.vue
index c8a052d2..2083ee7c 100644
--- a/src/components/Checkbox/Checkbox.vue
+++ b/src/components/Checkbox/Checkbox.vue
@@ -1,5 +1,5 @@
 <template>
-  <label class="flex gap-3 items-center justify-start">
+  <label :class="props.labelClass" class="flex gap-3 items-center justify-start">
     <input v-model="model" type="checkbox" :disabled="disabled" :class="[checkboxClasses, props.classes]" />
     <span v-if="label" :class="labelClasses">{{ label }}</span>
     <slot />
@@ -15,12 +15,14 @@ interface CheckboxProps {
   label?: string,
   disabled?: boolean,
   classes?: string,
+  labelClass?: string,
 }
 const props = withDefaults(defineProps<CheckboxProps>(), {
   modelValue: false,
   label: '',
   disabled: false,
   classes: '',
+  labelClass: '',
 })
 
 const emit = defineEmits(['update:modelValue'])
diff --git a/src/components/FileInput/FileInput.vue b/src/components/FileInput/FileInput.vue
index 6a99b6ab..05ff2710 100644
--- a/src/components/FileInput/FileInput.vue
+++ b/src/components/FileInput/FileInput.vue
@@ -2,7 +2,7 @@
   <div>
     <div v-if="!dropzone">
       <label>
-        <span :class="labelClasses">{{ label }}</span>
+        <span :class="[labelClasses, props.labelClass]">{{ label }}</span>
         <input :class="fileInpClasses" :multiple="multiple" @change="handleChange" type="file" />
       </label>
       <slot />
@@ -46,6 +46,7 @@ interface FileInputProps {
   dropzone?: boolean
   multiple?: boolean
   classes?: string
+  labelClass?: string
 }
 const props = withDefaults(defineProps<FileInputProps>(), {
   modelValue: null,
@@ -54,6 +55,7 @@ const props = withDefaults(defineProps<FileInputProps>(), {
   dropzone: false,
   multiple: false,
   classes: '',
+  labelClass: '',
 })
 const dropZoneText = computed(() => {
   if (isArray(props.modelValue)) {
diff --git a/src/components/Input/Input.vue b/src/components/Input/Input.vue
index bbcd35f2..ab0d1a6d 100644
--- a/src/components/Input/Input.vue
+++ b/src/components/Input/Input.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <label v-if="label" :class="labelClasses">{{ label }}</label>
+    <label v-if="label" :class="[labelClasses, props.labelClass]">{{ label }}</label>
     <div class="flex relative">
       <div v-if="$slots.prefix" class="w-10 flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none overflow-hidden">
         <slot name="prefix" />
@@ -37,6 +37,7 @@ interface InputProps {
   required?: boolean;
   modelValue: string;
   classes?: string;
+  labelClass?: string;
 }
 
 const props = withDefaults(defineProps<InputProps>(), {
@@ -47,6 +48,7 @@ const props = withDefaults(defineProps<InputProps>(), {
   required: false,
   modelValue: '',
   classes: '',
+  labelClass: '',
 })
 
 const model = useVModel(props, 'modelValue')
diff --git a/src/components/Radio/Radio.vue b/src/components/Radio/Radio.vue
index 956dfb98..6eebe8e0 100644
--- a/src/components/Radio/Radio.vue
+++ b/src/components/Radio/Radio.vue
@@ -1,5 +1,5 @@
 <template>
-  <label class="flex w-[100%] items-center">
+  <label :class="props.labelClass" class="flex w-[100%] items-center">
     <input type="radio" v-model="model" :disabled="disabled" :name="name" :value="value"
       :class="[radioClasses, props.classes]">
     <span :class="labelClasses">{{ label }}</span>
@@ -18,6 +18,7 @@ interface RadioProps {
   label?: string;
   disabled?: boolean;
   classes?: string;
+  labelClass?: string;
 }
 
 const props = withDefaults(defineProps<RadioProps>(), {
@@ -26,6 +27,7 @@ const props = withDefaults(defineProps<RadioProps>(), {
   label: '',
   disabled: false,
   classes: '',
+  labelClass: '',
 })
 
 const emit = defineEmits(['update:modelValue'])
diff --git a/src/components/Range/Range.vue b/src/components/Range/Range.vue
index b05e3225..1276db87 100644
--- a/src/components/Range/Range.vue
+++ b/src/components/Range/Range.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <label for="default-range" :class="labelClasses">{{ label }}</label>
+    <label for="default-range" :class="[labelClasses, props.labelClass]">{{ label }}</label>
     <input :step="steps" v-model="model" :min="min" :max="max" :disabled="disabled" type="range" :class="[rangeClasses, props.classes]">
   </div>
 </template>
@@ -19,6 +19,7 @@ interface RangeProps {
   size?: InputSize;
   steps?: string;
   classes?: string;
+  labelClass?: string;
 }
 
 const props = withDefaults(defineProps<RangeProps>(), {
@@ -30,6 +31,7 @@ const props = withDefaults(defineProps<RangeProps>(), {
   size: 'md',
   steps: '1',
   classes: '',
+  labelClass: '',
 })
 
 const emit = defineEmits(['update:modelValue'])
diff --git a/src/components/Select/Select.vue b/src/components/Select/Select.vue
index 3cc829d0..946e8b9f 100644
--- a/src/components/Select/Select.vue
+++ b/src/components/Select/Select.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <label v-if="label" :class="labelClasses">{{ label }}</label>
+    <label v-if="label" :class="[labelClasses, props.labelClass]">{{ label }}</label>
     <select v-model="model" :disabled="disabled" :class="[selectClasses, underline? underlineClasses: '', props.classes]">
       <option disabled selected value="">{{ placeholder }}</option>
       <option :value="option.value" v-for="(option, index) in options" :key="index">
@@ -25,6 +25,7 @@ interface InputProps {
   underline?: boolean;
   size?: InputSize;
   classes?: string;
+  labelClass?: string;
 }
 const props = withDefaults(defineProps<InputProps>(), {
   modelValue: '',
@@ -35,6 +36,7 @@ const props = withDefaults(defineProps<InputProps>(), {
   underline: false,
   size: 'md',
   classes: '',
+  labelClass: '',
 })
 const emit = defineEmits(['update:modelValue'])
 
diff --git a/src/components/Textarea/Textarea.vue b/src/components/Textarea/Textarea.vue
index 72a06c29..b3c961f4 100644
--- a/src/components/Textarea/Textarea.vue
+++ b/src/components/Textarea/Textarea.vue
@@ -1,6 +1,6 @@
 <template>
   <label>
-    <div :class="labelClasses">{{ label }}</div>
+    <div :class="[labelClasses, props.labelClass]">{{ label }}</div>
     <div :class="wrapperClasses">
       <textarea v-model="model" :rows="rows" :class="[textareaClasses, props.classes]" :placeholder="placeholder"></textarea>
       <div v-if="$slots.footer" :class="footerClasses">
@@ -21,6 +21,7 @@ interface TextareaProps {
   custom?: boolean;
   placeholder?: string;
   classes?: string;
+  labelClass?: string;
 }
 
 const props = withDefaults(defineProps<TextareaProps>(), {
@@ -30,6 +31,7 @@ const props = withDefaults(defineProps<TextareaProps>(), {
   custom: false,
   placeholder: 'Write your message here...',
   classes: '',
+  labelClass: '',
 })
 
 const emit = defineEmits(['update:modelValue'])
diff --git a/src/components/Toggle/Toggle.vue b/src/components/Toggle/Toggle.vue
index fe93736a..e608681e 100644
--- a/src/components/Toggle/Toggle.vue
+++ b/src/components/Toggle/Toggle.vue
@@ -1,5 +1,5 @@
 <template>
-  <label :class="labelClasses">
+  <label :class="[labelClasses, props.labelClass]">
     <input :disabled="disabled" v-model="model" type="checkbox" class="sr-only peer" />
     <span :class="[toggleClasses, toggleSize, toggleColor, props.classes]"></span>
     <span :class="toggleBallClasses">{{ label }}</span>
@@ -18,6 +18,7 @@ interface ToggleProps {
   size?: InputSize;
   disabled?: boolean;
   classes?: string;
+  labelClass?: string;
 }
 
 const props = withDefaults(defineProps<ToggleProps>(), {
@@ -27,6 +28,7 @@ const props = withDefaults(defineProps<ToggleProps>(), {
   size: 'md',
   disabled: false,
   classes: '',
+  labelClass: '',
 })
 
 const emit = defineEmits(['update:modelValue'])