@indielayer/ui 1.18.1 → 2.0.0

package/src/components/tag/Tag.vue

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const tagProps = {
   ...useCommon.props(),
   ...useColors.props('secondary'),
@@ -6,10 +8,10 @@ const tagProps = {
     type: String,
     default: 'span',
   },
-  rounded: Boolean,
-  removable: Boolean,
-  outlined: Boolean,
-  filled: Boolean,
+  rounded: optionalBooleanProp(),
+  removable: optionalBooleanProp(),
+  outlined: optionalBooleanProp(),
+  filled: optionalBooleanProp(),
   disabled: Boolean,
   to: [String, Object],
 }
@@ -32,11 +34,13 @@ import { computed, useAttrs, type ExtractPublicPropTypes } from 'vue'
 import { useColors } from '../../composables/useColors'
 import { useCommon } from '../../composables/useCommon'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useResolvedComponentProps } from '../../composables/resolveComponentDefaults'
 import { closeIcon } from '../../common/icons'
 
 import XIcon from '../icon/Icon.vue'
 
 const props = defineProps(tagProps)
+const resolvedProps = useResolvedComponentProps('Tag', props)
 
 defineEmits(['remove'])
 
@@ -65,15 +69,15 @@ const { styles, classes, className } = useTheme('Tag', {}, props)
       [
         className,
         classes.wrapper,
-        outlined ?
+        resolvedProps.outlined ?
           'border-[color:var(--x-tag-border)] dark:border-[color:var(--x-tag-dark-border)]' :
           '!border-transparent bg-[color:var(--x-tag-bg)] dark:bg-[color:var(--x-tag-dark-bg)]',
-        rounded ? 'rounded-full' : 'rounded'
+        resolvedProps.rounded ? 'rounded-full' : 'rounded'
       ]"
   >
     <span
       class="max-w-full"
-      :class="{'pr-4': removable }"
+      :class="{'pr-4': resolvedProps.removable }"
     >
       <div class="flex items-center gap-2">
         <slot name="prefix"></slot>
@@ -83,7 +87,7 @@ const { styles, classes, className } = useTheme('Tag', {}, props)
         </div>
       </div>
 
-      <div v-if="removable" class="absolute right-1.5 top-0 h-full flex items-center">
+      <div v-if="resolvedProps.removable" class="absolute right-1.5 top-0 h-full flex items-center">
         <x-icon
           :size="closeIconSize"
           :icon="closeIcon"

package/src/components/textarea/Textarea.vue

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const textareaProps = {
   ...useCommon.props(),
   ...useInteractive.props(),
@@ -16,18 +18,18 @@ const textareaProps = {
   min: [Number, String],
   minlength: [Number, String],
   placeholder: String,
-  adjustToText: Boolean,
-  preventEnter: Boolean,
-  block: Boolean,
-  resizable: Boolean,
-  showCounter: Boolean,
-  clearable: Boolean,
+  adjustToText: optionalBooleanProp(),
+  preventEnter: optionalBooleanProp(),
+  block: optionalBooleanProp(),
+  resizable: optionalBooleanProp(),
+  showCounter: optionalBooleanProp(),
+  clearable: optionalBooleanProp(),
 }
 
 export type TextareaProps = ExtractPublicPropTypes<typeof textareaProps>
 
-type InternalClasses = 'wrapper' | 'input' | 'icon'
-type InternalExtraData = { errorInternal: Ref<boolean>; }
+type InternalClasses = 'wrapper' | 'input' | 'icon' | 'adornment' | 'adornmentStart' | 'adornmentEnd' | 'adornmentIcon' | 'adornmentSlot'
+type InternalExtraData = { errorInternal: Ref<boolean>; isInsideInputGroup: boolean; inputGroupPosition: import('../../common/inputGroupRadius').InputGroupPosition | undefined; }
 
 export interface TextareaTheme extends ThemeComponent<TextareaProps, InternalClasses, InternalExtraData> {}
 
@@ -40,7 +42,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, watch, type ExtractPublicPropTypes, type Ref, useAttrs, computed } from 'vue'
+import { ref, inject, watch, type ExtractPublicPropTypes, type Ref, useAttrs, computed, useSlots } from 'vue'
 import { useResizeObserver, useEventListener } from '@vueuse/core'
 import { useCSS } from '../../composables/useCSS'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
@@ -48,6 +50,8 @@ import { useCommon } from '../../composables/useCommon'
 import { useColors } from '../../composables/useColors'
 import { useInputtable } from '../../composables/useInputtable'
 import { useInteractive } from '../../composables/useInteractive'
+import type { Size } from '../../composables/useCommon'
+import { injectInputGroupKey } from '../../composables/keys'
 
 import XLabel from '../label/Label.vue'
 import XInputFooter from '../inputFooter/InputFooter.vue'
@@ -56,6 +60,17 @@ import { closeIcon } from '../../common/icons'
 
 const props = defineProps(textareaProps)
 
+const inputGroup = inject(injectInputGroupKey, {
+  registerChild: () => {},
+  unregisterChild: () => {},
+  registerInput: () => {},
+  unregisterInput: () => {},
+  getPosition: () => 'only',
+  childOrder: computed(() => []),
+  isInsideInputGroup: false,
+  groupProps: {},
+})
+
 const emit = defineEmits(useInputtable.emits())
 
 const attrs = useAttrs()
@@ -104,13 +119,26 @@ const { focus, blur } = useInteractive(elRef)
 const {
   errorInternal,
   hideFooterInternal,
+  hideLabelInternal,
   isInsideForm,
+  isInsideInputGroup,
+  inputGroupPosition,
   inputListeners,
   reset,
   validate,
   setError,
 } = useInputtable(props, { focus, emit })
 
+const computedSize = computed((): Size => inputGroup.groupProps?.size ?? props.size)
+const isDisabled = computed(() => props.disabled || !!inputGroup.groupProps?.disabled)
+const computedLabel = computed(() => (hideLabelInternal.value ? undefined : props.label))
+
+const themeProps = computed(() => ({
+  ...props,
+  size: computedSize.value,
+  disabled: isDisabled.value,
+}))
+
 const currentLength = computed(() => {
   const value = props.modelValue
 
@@ -119,13 +147,33 @@ const currentLength = computed(() => {
 
 const showClearIcon = computed(() => props.clearable && props.modelValue !== '')
 
+const slots = useSlots()
+const hasPrefixSlot = computed(() => !!slots.prefix)
+const hasSuffixSlot = computed(() => !!slots.suffix)
+const hasRightAdornment = computed(() => hasSuffixSlot.value || showClearIcon.value)
+
+const leftPaddingClass = computed(() => (hasPrefixSlot.value ? '!pl-10' : ''))
+
+const rightPaddingClass = computed(() => {
+  const units = (showClearIcon.value ? 1 : 0) + (hasSuffixSlot.value ? 1 : 0)
+
+  if (units >= 2) return '!pr-16'
+  if (units === 1) return '!pr-10'
+
+  return ''
+})
+
 function isEmpty(value: typeof props.modelValue) {
   if (typeof value === 'undefined' || value === null) return true
 
   return false
 }
 
-const { styles, classes, className } = useTheme('Textarea', {}, props, { errorInternal })
+const { styles, classes, className } = useTheme('Textarea', {}, themeProps, {
+  errorInternal,
+  isInsideInputGroup,
+  inputGroupPosition,
+})
 
 defineExpose({ focus, blur, reset, validate, setError })
 </script>
@@ -134,10 +182,11 @@ defineExpose({ focus, blur, reset, validate, setError })
   <x-label
     :style="styles"
     :block="block"
-    :disabled="disabled"
+    :disabled="isDisabled"
     :required="required"
     :is-inside-form="isInsideForm"
-    :label="label"
+    :is-inside-input-group="isInsideInputGroup"
+    :label="computedLabel"
     :class="[
       className,
       classes.wrapper,
@@ -145,7 +194,15 @@ defineExpose({ focus, blur, reset, validate, setError })
     :tooltip="tooltip"
   >
     <div class="relative">
-      <slot name="prefix"></slot>
+      <div
+        v-if="hasPrefixSlot"
+        :class="[classes.adornment, classes.adornmentStart]"
+      >
+        <div :class="classes.adornmentSlot">
+          <slot name="prefix" ></slot>
+        </div>
+      </div>
+
       <textarea
         :id="id"
         ref="elRef"
@@ -156,8 +213,10 @@ defineExpose({ focus, blur, reset, validate, setError })
           errorInternal
             ? 'border-error-500 dark:border-error-400 focus:outline-error-500'
             : 'focus:outline-[color:var(--x-textarea-border)]',
+          leftPaddingClass,
+          rightPaddingClass,
         ]"
-        :disabled="disabled"
+        :disabled="isDisabled"
         :max="max"
         :maxlength="maxlength"
         :min="min"
@@ -174,16 +233,21 @@ defineExpose({ focus, blur, reset, validate, setError })
         @input="onInput"
       ></textarea>
 
-      <slot name="suffix">
+      <div
+        v-if="hasRightAdornment"
+        :class="[classes.adornment, classes.adornmentEnd]"
+      >
+        <div v-if="hasSuffixSlot" :class="classes.adornmentSlot">
+          <slot name="suffix" ></slot>
+        </div>
         <x-icon
           v-if="showClearIcon"
-          :size="size"
+          :size="computedSize"
           :icon="closeIcon"
-          class="right-2 cursor-pointer"
-          :class="classes.icon"
+          :class="[classes.adornmentIcon, 'cursor-pointer']"
           @click="reset()"
         />
-      </slot>
+      </div>
     </div>
 
     <x-input-footer

package/src/components/textarea/theme/Textarea.base.theme.ts

@@ -1,11 +1,15 @@
 import type { TextareaTheme } from '../Textarea.vue'
+import { inputGroupRadiusClasses } from '../../../common/inputGroupRadius'
 
 const theme: TextareaTheme = {
   classes: {
     wrapper: '',
 
     input: ({ props, data }) => {
-      const classes = ['appearance-none block w-full placeholder-secondary-400 dark:placeholder-secondary-500 outline-transparent outline outline-2 outline-offset-[-1px] transition duration-150 ease-in-out border-secondary-300 dark:border-secondary-700 border shadow-sm rounded-md']
+      const classes = ['appearance-none block w-full placeholder-secondary-400 dark:placeholder-secondary-500 outline-transparent outline outline-2 outline-offset-[-1px] transition duration-150 ease-in-out border-secondary-300 dark:border-secondary-700 border shadow-xs']
+
+      if (!data.isInsideInputGroup) classes.push('rounded-md')
+      else classes.push(...inputGroupRadiusClasses(data.inputGroupPosition))
 
       if (!props.resizable) classes.push('resize-none')
       if (!data.errorInternal && !props.disabled) classes.push('hover:border-secondary-400 dark:hover:border-secondary-500')
@@ -24,6 +28,11 @@ const theme: TextareaTheme = {
     },
 
     icon: 'text-secondary-600 dark:text-secondary-300 absolute my-auto inset-y-0',
+    adornment: 'absolute inset-y-0 z-10 flex items-center gap-1.5 pointer-events-none',
+    adornmentStart: 'left-0 pl-2',
+    adornmentEnd: 'right-0 pr-2 top-2 items-start',
+    adornmentIcon: 'shrink-0 text-secondary-600 dark:text-secondary-300 pointer-events-auto',
+    adornmentSlot: 'shrink-0 pointer-events-auto text-secondary-600 dark:text-secondary-300 text-sm',
   },
 }
 

package/src/components/textarea/theme/Textarea.carbon.theme.ts

@@ -25,6 +25,11 @@ const theme: TextareaTheme = {
     },
 
     icon: 'text-secondary-600 dark:text-secondary-300 absolute my-auto inset-y-0',
+    adornment: 'absolute inset-y-0 z-10 flex items-center gap-1.5 pointer-events-none',
+    adornmentStart: 'left-0 pl-2',
+    adornmentEnd: 'right-0 pr-2 top-2 items-start',
+    adornmentIcon: 'shrink-0 text-secondary-600 dark:text-secondary-300 pointer-events-auto',
+    adornmentSlot: 'shrink-0 pointer-events-auto text-secondary-600 dark:text-secondary-300 text-sm',
   },
 }
 

package/src/components/toggle/Toggle.vue

@@ -1,10 +1,12 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const toggleProps = {
   ...useCommon.props(),
   ...useColors.props('primary'),
   ...useInteractive.props(),
   ...useInputtable.props(),
-  glow: Boolean,
+  glow: optionalBooleanProp(),
 }
 
 export type ToggleProps = ExtractPublicPropTypes<typeof toggleProps>

package/src/components/upload/Upload.vue

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const validators = {
   ...useCommon.validators(),
   variant: ['box'] as const,
@@ -8,7 +10,7 @@ const uploadProps = {
   ...useInputtable.props(),
   placeholder: String,
   accept: String,
-  multiple: Boolean,
+  multiple: optionalBooleanProp(),
   maxFiles: [Number, String],
   maxFileSize: [Number, String],
   variant: {
@@ -24,7 +26,7 @@ const uploadProps = {
     type: String as PropType<'POST' | 'PUT'>,
     default: 'POST',
   },
-  withCredentials: Boolean,
+  withCredentials: optionalBooleanProp(),
   fileFormDataName: {
     type: String,
     default: 'file',
@@ -291,6 +293,7 @@ const {
   errorInternal,
   hideFooterInternal,
   isInsideForm,
+  isInsideInputGroup,
   inputListeners,
   isFirstValidation,
   validate,
@@ -314,6 +317,7 @@ defineExpose({ focus, blur, reset, validate, setError })
       :disabled="disabled"
       :required="required"
       :is-inside-form="isInsideForm"
+      :is-inside-input-group="isInsideInputGroup"
       :label="label"
       :tooltip="tooltip"
     >

package/src/composables/__tests__/resolveComponentDefaults.spec.ts

@@ -0,0 +1,139 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { resolvePropsWithDefaults } from '../resolveComponentDefaults'
+import { injectOptionsKey, injectThemeKey } from '../keys'
+import Alert from '../../components/alert/Alert.vue'
+import Button from '../../components/button/Button.vue'
+import Input from '../../components/input/Input.vue'
+import type { InputProps } from '../../components/input/Input.vue'
+import BaseTheme from '../../themes/base'
+
+describe('resolvePropsWithDefaults', () => {
+  it('applies configured defaults when prop is undefined', () => {
+    const resolved = resolvePropsWithDefaults<{ type: string; outlined?: boolean; light?: boolean; }>(
+      { type: 'success' },
+      { outlined: true, light: true },
+    )
+
+    expect(resolved).toEqual({ type: 'success', outlined: true, light: true })
+  })
+
+  it('does not override explicit prop values', () => {
+    const resolved = resolvePropsWithDefaults(
+      { outlined: false },
+      { outlined: true },
+    )
+
+    expect(resolved.outlined).toBe(false)
+  })
+
+  it('returns props unchanged when no defaults configured', () => {
+    const props = { type: 'error' as const }
+
+    expect(resolvePropsWithDefaults(props, undefined)).toEqual(props)
+  })
+})
+
+describe('Alert with UI defaults', () => {
+  function mountAlert(props: Record<string, unknown> = {}, defaults?: Record<string, unknown>) {
+    return mount(Alert, {
+      props,
+      global: {
+        provide: {
+          [injectOptionsKey as symbol]: defaults ? { defaults: { Alert: defaults } } : {},
+          [injectThemeKey as symbol]: BaseTheme,
+        },
+      },
+    })
+  }
+
+  it('applies outlined default when prop is omitted (not coerced to false)', () => {
+    const wrapper = mountAlert(
+      { type: 'success', color: 'success' },
+      { outlined: true },
+    )
+
+    expect(wrapper.attributes('style')).toContain('transparent')
+  })
+
+  it('uses light and outlined defaults from injectOptionsKey', () => {
+    const wrapper = mountAlert(
+      { type: 'success', color: 'success' },
+      { outlined: true, light: true },
+    )
+
+    const style = wrapper.attributes('style') || ''
+
+    expect(style).toContain('#f0fdf4')
+    expect(style).toContain('#16a34a')
+  })
+
+  it('respects explicit outlined=false over defaults', () => {
+    const withDefaults = mountAlert(
+      { type: 'success', color: 'success' },
+      { outlined: true, light: true },
+    )
+    const explicit = mountAlert(
+      {
+        type: 'success',
+        color: 'success',
+        outlined: false,
+        light: true,
+      },
+      { outlined: true, light: true },
+    )
+
+    expect(withDefaults.attributes('style')).not.toBe(explicit.attributes('style'))
+  })
+})
+
+describe('Button with UI defaults', () => {
+  function mountButton(props: Record<string, unknown> = {}, defaults?: Record<string, unknown>) {
+    return mount(Button, {
+      props,
+      slots: { default: 'Save' },
+      global: {
+        provide: {
+          [injectOptionsKey as symbol]: defaults ? { defaults: { Button: defaults } } : {},
+          [injectThemeKey as symbol]: BaseTheme,
+        },
+      },
+    })
+  }
+
+  it('applies ghost default when prop is omitted', () => {
+    const withDefault = mountButton({ color: 'primary' }, { ghost: true })
+    const without = mountButton({ color: 'primary' })
+
+    expect(withDefault.classes().join(' ')).not.toContain('shadow-xs')
+    expect(without.classes().join(' ')).toContain('shadow-xs')
+  })
+
+  it('respects explicit ghost=false over defaults', () => {
+    const withDefault = mountButton({ color: 'primary' }, { ghost: true })
+    const explicit = mountButton({ color: 'primary', ghost: false }, { ghost: true })
+
+    expect(withDefault.classes().join(' ')).not.toContain('shadow-xs')
+    expect(explicit.classes().join(' ')).toContain('shadow-xs')
+  })
+})
+
+describe('Input with UI defaults', () => {
+  function mountInput(props: Partial<InputProps> = {}, defaults?: Partial<InputProps>) {
+    return mount(Input, {
+      props,
+      global: {
+        provide: {
+          [injectOptionsKey as symbol]: defaults ? { defaults: { Input: defaults } } : {},
+          [injectThemeKey as symbol]: BaseTheme,
+        },
+      },
+    })
+  }
+
+  it('applies block default when prop is omitted', () => {
+    const wrapper = mountInput({}, { block: true })
+
+    expect(wrapper.classes().join(' ')).toContain('w-full')
+  })
+})

package/src/composables/index.ts

@@ -1,4 +1,5 @@
 export * from './keys'
+export * from './resolveComponentDefaults'
 export * from './useCommon'
 export * from './useColors'
 export * from './useCSS'

package/src/composables/keys.ts

@@ -5,6 +5,7 @@ import type { ButtonGroupInjection } from '../components/button/ButtonGroup.vue'
 import type { NotificationInjection } from '../components/notifications/Notifications.vue'
 import type { IconInjection } from '../components/icon/Icon.vue'
 import type { FormGroupInjection } from '../components/formGroup'
+import type { InputGroupInjection } from '../components/inputGroup'
 import type { AccordionInjection } from '../components/accordion'
 import type { UIOptions } from '../create'
 import type { UITheme } from '../theme'
@@ -14,6 +15,7 @@ export const injectThemeKey = Symbol() as InjectionKey<MaybeRef<UITheme>>
 export const injectTabGroupKey = Symbol() as InjectionKey<TabGroupInjection>
 export const injectFormKey = Symbol() as InjectionKey<FormInjection>
 export const injectFormGroupKey = Symbol() as InjectionKey<FormGroupInjection>
+export const injectInputGroupKey = Symbol() as InjectionKey<InputGroupInjection>
 export const injectIconsKey = Symbol() as InjectionKey<IconInjection>
 export const injectButtonGroupKey = Symbol() as InjectionKey<ButtonGroupInjection>
 export const injectNotificationKey = Symbol() as InjectionKey<NotificationInjection>

package/src/composables/resolveComponentDefaults.ts

@@ -0,0 +1,33 @@
+import { computed, inject, unref, type ComputedRef, type MaybeRef } from 'vue'
+import { injectOptionsKey } from './keys'
+import type { ComponentThemes } from '../theme'
+
+export function resolvePropsWithDefaults<P extends object>(
+  props: P,
+  configured?: Partial<P>,
+): P {
+  if (!configured) return props
+
+  const resolved = { ...props } as Record<string, unknown>
+  const source = props as Record<string, unknown>
+
+  for (const key of Object.keys(configured)) {
+    if (source[key] === undefined) {
+      resolved[key] = configured[key as keyof P]
+    }
+  }
+
+  return resolved as P
+}
+
+export function useResolvedComponentProps<P extends object>(
+  namespace: keyof ComponentThemes,
+  props: MaybeRef<P>,
+): ComputedRef<P> {
+  const options = inject(injectOptionsKey, {})
+
+  return computed(() => resolvePropsWithDefaults(
+    unref(props),
+    options.defaults?.[namespace] as Partial<P> | undefined,
+  ))
+}

package/src/composables/useInputtable.ts

@@ -1,17 +1,20 @@
 import type { MaybeRef, PropType } from 'vue'
 import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue'
-import { injectFormGroupKey, injectFormKey } from './keys'
+import { injectFormGroupKey, injectFormKey, injectInputGroupKey } from './keys'
 
 export interface XFormInputMethods {
   focus: () => void;
-  validate: (val: any) => boolean;
+  validate: (val?: any) => boolean;
   setError: (val: string) => void;
+  getError: () => string;
+  getValue: () => unknown;
 }
 
-export const useInputtable = (props: any, { focus, emit, withListeners = true }: { focus: () => void; emit: any; withListeners?: boolean; }) => {
+export const useInputtable = (props: any, { focus, emit, withListeners = true, formValidate, formGroupJoined }: { focus: () => void; emit: any; withListeners?: boolean; formValidate?: () => boolean; formGroupJoined?: boolean; }) => {
   const isFirstValidation = ref(true)
   const errorInternal = ref(props.error)
   const hideFooterInternal = ref(props.hideFooter)
+  const hideLabelInternal = ref(false)
 
   const name = props.name ? props.name : (Math.random() + 1).toString(36).substring(7)
   const nameInternal = ref(name)
@@ -27,10 +30,34 @@ export const useInputtable = (props: any, { focus, emit, withListeners = true }:
     value: undefined,
   })
 
-  if (formGroup.isInsideFormGroup) {
+  const inputGroup = inject(injectInputGroupKey, {
+    registerChild: () => {},
+    unregisterChild: () => {},
+    registerInput: () => {},
+    unregisterInput: () => {},
+    getPosition: () => 'only' as const,
+    childOrder: computed(() => []),
+    isInsideInputGroup: false,
+    groupProps: {},
+  })
+
+  const inputGroupPosition = computed(() => {
+    if (!inputGroup.isInsideInputGroup) return undefined
+
+    // Subscribe to sibling mount order so radius classes update after each child registers
+    void inputGroup.childOrder.value
+
+    return inputGroup.getPosition(nameInternal.value)
+  })
+
+  if (formGroup.isInsideFormGroup || inputGroup.isInsideInputGroup) {
     hideFooterInternal.value = true
   }
 
+  if (inputGroup.isInsideInputGroup) {
+    hideLabelInternal.value = true
+  }
+
   const form = inject(injectFormKey, {
     registerInput: () => {},
     unregisterInput: () => {},
@@ -48,7 +75,7 @@ export const useInputtable = (props: any, { focus, emit, withListeners = true }:
   }
 
   const validate = (val?: any): boolean => {
-    val = val || props.modelValue
+    val = val === undefined ? props.modelValue : val
 
     isFirstValidation.value = false
 
@@ -116,10 +143,20 @@ export const useInputtable = (props: any, { focus, emit, withListeners = true }:
 
   onMounted(() => {
     if (formGroup.isInsideFormGroup) {
-      formGroup.registerInputGroup(nameInternal.value, focus)
+      formGroup.registerInputGroup(nameInternal.value, focus, formGroupJoined ? { joined: true } : undefined)
     } else {
-      if (!props.skipFormRegistry)
-        form.registerInput(nameInternal.value, focus, validate, setError)
+      if (inputGroup.isInsideInputGroup) {
+        inputGroup.registerInput(nameInternal.value, {
+          focus,
+          validate,
+          setError,
+          getError: () => errorInternal.value,
+          getValue: () => props.modelValue,
+        })
+      }
+
+      if (!props.skipFormRegistry && !inputGroup.isInsideInputGroup)
+        form.registerInput(nameInternal.value, focus, formValidate ?? validate, setError)
     }
   })
 
@@ -127,7 +164,11 @@ export const useInputtable = (props: any, { focus, emit, withListeners = true }:
     if (formGroup.isInsideFormGroup) {
       formGroup.unregisterInputGroup(nameInternal.value)
     } else {
-      if (!props.skipFormRegistry)
+      if (inputGroup.isInsideInputGroup) {
+        inputGroup.unregisterInput(nameInternal.value)
+      }
+
+      if (!props.skipFormRegistry && !inputGroup.isInsideInputGroup)
         form.unregisterInput(nameInternal.value)
     }
 
@@ -137,14 +178,20 @@ export const useInputtable = (props: any, { focus, emit, withListeners = true }:
     isFirstValidation,
     errorInternal,
     hideFooterInternal,
+    hideLabelInternal,
     isFocused,
     isInsideForm: props.skipFormRegistry ? false : form.isInsideForm,
     isInsideFormGroup: formGroup.isInsideFormGroup,
+    isInsideInputGroup: inputGroup.isInsideInputGroup,
+    inputGroupPosition,
+    nameInternal,
     inputListeners,
     formGroup,
+    inputGroup,
     reset,
     validate,
     setError,
+    getError: () => errorInternal.value,
   }
 }