feat(FwbInput): Add direct error message support

docs/components/input.md

@@ -104,6 +104,75 @@ const name = ref('')
 </script>
 ```
 
+## Error Messages
+
+- Set validation status via `validationStatus` prop, which accepts `'success'` or `'error'`.
+- Add error messages directly via `error-message` prop.
+- Add success messages directly via `success-message` prop.
+- Control visibility of messages with the `hide-details` prop.
+
+<fwb-input-example-error-message />
+```vue
+<template>
+  <!-- Direct error message prop -->
+  <fwb-input
+    v-model="username"
+    label="Username"
+    placeholder="Enter your username"
+    validation-status="error"
+    error-message="This username is already taken"
+  />
+
+  <!-- Direct success message prop -->
+  <fwb-input
+    v-model="email"
+    label="Email"
+    placeholder="Enter your email"
+    validation-status="success"
+    success-message="Email format is valid"
+  />
+
+  <!-- Form validation example -->
+  <fwb-input
+    v-model="password"
+    type="password"
+    label="Password"
+    placeholder="Enter your password"
+    :validation-status="passwordError ? 'error' : 'success'"
+    :error-message="passwordError"
+    :success-message="passwordError ? '' : 'Password meets requirements'"
+  />
+
+  <!-- Hide details example -->
+  <fwb-input
+    v-model="phone"
+    label="Phone Number"
+    placeholder="Enter your phone number"
+    validation-status="error"
+    error-message="Please enter a valid phone number"
+    hide-details
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { FwbInput } from 'flowbite-vue'
+
+// Form values
+const username = ref('')
+const email = ref('')
+const password = ref('')
+const phone = ref('')
+
+// Form validation
+const passwordError = computed(() => {
+  if (!password.value) return 'Password is required'
+  if (password.value.length < 8) return 'Password must be at least 8 characters'
+  return ''
+})
+</script>
+```
+
 ## Extra CSS classes
 
 Sometimes it is required to add some customization to the input or the input wrapper.

docs/components/input/examples/FwbInputExampleErrorMessage.vue

@@ -0,0 +1,131 @@
+<template>
+    <div class="vp-raw">
+      <h3 class="mb-3 text-lg font-medium text-gray-900 dark:text-white">Error Messages Examples</h3>
+
+      <!-- Direct error message prop -->
+      <div class="mb-4">
+        <fwb-input
+          v-model="username"
+          label="Username"
+          placeholder="Enter your username"
+          validation-status="error"
+          error-message="This username is already taken"
+        />
+      </div>
+
+      <!-- Direct success message prop -->
+      <div class="mb-4">
+        <fwb-input
+          v-model="email"
+          label="Email"
+          placeholder="Enter your email"
+          validation-status="success"
+          success-message="Email format is valid"
+        />
+      </div>
+
+      <!-- Form validation example -->
+      <div class="mb-4">
+        <fwb-input
+          v-model="password"
+          type="password"
+          label="Password"
+          placeholder="Enter your password"
+          :validation-status="passwordValidation.status"
+          :error-message="passwordValidation.message"
+        />
+      </div>
+
+      <!-- Toggle hideDetails demo -->
+      <div class="mb-4 flex items-center">
+        <fwb-checkbox
+          v-model="hideDetails"
+          label="Hide error details"
+        />
+      </div>
+
+      <!-- Example with hideDetails -->
+      <div class="mb-4">
+        <fwb-input
+          v-model="phone"
+          label="Phone Number"
+          placeholder="Enter your phone number"
+          validation-status="error"
+          error-message="Please enter a valid phone number"
+          :hide-details="hideDetails"
+        />
+      </div>
+
+      <!-- Comparison: prop vs slot approach -->
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+        <div>
+          <h4 class="mb-2 text-base font-medium text-gray-900 dark:text-white">Using error-message prop</h4>
+          <fwb-input
+            v-model="address"
+            label="Address"
+            placeholder="Enter your address"
+            validation-status="error"
+            error-message="Please enter your full address"
+          />
+        </div>
+
+        <div>
+          <h4 class="mb-2 text-base font-medium text-gray-900 dark:text-white">Using validation slot</h4>
+          <fwb-input
+            v-model="address"
+            label="Address"
+            placeholder="Enter your address"
+            validation-status="error"
+          >
+            <template #validationMessage>
+              <div class="flex items-center">
+                <svg class="w-4 h-4 mr-1.5 text-red-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                  <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
+                </svg>
+                Please enter your full address
+              </div>
+            </template>
+          </fwb-input>
+        </div>
+      </div>
+    </div>
+  </template>
+
+  <script lang="ts" setup>
+  import { computed, ref } from 'vue'
+
+  import { FwbCheckbox, FwbInput } from '../../../../src/index'
+  import { validationStatusMap } from '../../../../src/components/FwbInput/types'
+
+  // Form values
+  const username = ref('')
+  const email = ref('')
+  const password = ref('')
+  const phone = ref('')
+  const address = ref('')
+
+  // UI state
+  const hideDetails = ref(false)
+
+  // Form validation
+  const passwordValidation = computed(() => {
+    if (!password.value) {
+      return {
+        status: validationStatusMap.Error,
+        message: 'Password is required'
+      }
+    }
+
+    if (password.value.length < 8) {
+      return {
+        status: validationStatusMap.Error,
+        message: 'Password must be at least 8 characters'
+      }
+    }
+
+    return {
+      status: validationStatusMap.Success,
+      message: 'Password meets requirements'
+    }
+  })
+  </script>

src/components/FwbInput/FwbInput.vue

@@ -30,12 +30,32 @@
         <slot name="suffix" />
       </div>
     </div>
+    <!-- Error message section -->
     <p
-      v-if="$slots.validationMessage"
+      v-if="showErrorMessage"
+      :class="validationWrapperClasses"
+    >
+      <slot name="validationMessage">
+        {{ errorMessage }}
+      </slot>
+    </p>
+    <!-- Success message section -->
+    <p
+      v-else-if="showSuccessMessage"
+      :class="validationWrapperClasses"
+    >
+      <slot name="validationMessage">
+        {{ successMessage }}
+      </slot>
+    </p>
+    <!-- Fallback for when using slot without status -->
+    <p
+      v-else-if="$slots.validationMessage"
       :class="validationWrapperClasses"
     >
       <slot name="validationMessage" />
     </p>
+    <!-- Helper text -->
     <p
       v-if="$slots.helper"
       class="mt-2 text-sm text-gray-500 dark:text-gray-400"
@@ -69,6 +89,9 @@ interface InputProps {
   autocomplete?: CommonAutoFill
   validationStatus?: ValidationStatus
   blockClasses?: string | string[] | Record<string, unknown>
+  errorMessage?: string // New prop for direct error messaging
+  successMessage?: string // New prop for success messaging
+  hideDetails?: boolean // To control visibility of error/helper messages
 }
 
 defineOptions({
@@ -85,16 +108,30 @@ const props = withDefaults(defineProps<InputProps>(), {
   autocomplete: 'off',
   validationStatus: undefined,
   blockClasses: undefined,
+  errorMessage: '',
+  successMessage: '',
+  hideDetails: false,
 })
 
 const model = useVModel(props, 'modelValue')
 
 const { inputClasses, inputBlockClasses, labelClasses } = useInputClasses(toRefs(props))
 
+// Computed properties to determine visibility of messages
+const showErrorMessage = computed(() => 
+  !props.hideDetails && 
+  (props.validationStatus === validationStatusMap.Error || props.errorMessage)
+)
+
+const showSuccessMessage = computed(() => 
+  !props.hideDetails && 
+  props.validationStatus === validationStatusMap.Success && 
+  props.successMessage
+)
+
 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' : '',
-
 ))
-</script>
+</script>