fix: address pr feedback

src/components/KCheckbox/KCheckbox.vue

@@ -109,7 +109,8 @@ const emit = defineEmits<{
 const slots = useSlots()
 const attrs = useAttrs()
 
-const inputId = attrs.id ? String(attrs.id) : useId()
+const defaultId = useId()
+const inputId = computed((): string => attrs.id ? String(attrs.id) : defaultId)
 const hasLabel = computed((): boolean => !!(props.label || slots.default))
 const isDisabled = computed((): boolean => attrs?.disabled !== undefined && String(attrs?.disabled) !== 'false')
 

src/components/KFileUpload/KFileUpload.vue

@@ -134,7 +134,8 @@ const emit = defineEmits<{
 
 const { stripRequiredLabel } = useUtilities()
 
-const fileInputId = attrs.id ? String(attrs.id) : useId()
+const defaultId = useId()
+const fileInputId = computed((): string => attrs.id ? String(attrs.id) : defaultId)
 
 const modifiedAttrs = computed(() => {
   const $attrs = { ...attrs }

src/components/KInput/KInput.vue

@@ -175,7 +175,8 @@ const slots = useSlots()
 const attrs = useAttrs()
 
 const isRequired = computed((): boolean => attrs?.required !== undefined && String(attrs?.required) !== 'false')
-const inputId = attrs.id ? String(attrs.id) : useId()
+const defaultId = useId()
+const inputId = computed((): string => attrs.id ? String(attrs.id) : defaultId)
 const helpTextId = useId()
 const strippedLabel = computed((): string => stripRequiredLabel(props.label, isRequired.value))
 const hasLabelTooltip = computed((): boolean => !!(props.labelAttributes?.info || slots['label-tooltip']))

src/components/KInputSwitch/KInputSwitch.vue

@@ -99,7 +99,8 @@ const attrs = useAttrs()
 
 const switchInputElement = ref<HTMLInputElement | null>(null)
 
-const inputId = attrs.id ? String(attrs.id) : useId()
+const defaultId = useId()
+const inputId = computed((): string => attrs.id ? String(attrs.id) : defaultId)
 
 /**
 * Strips falsy `disabled` attribute, so it does not fall onto native <a> elements.

src/components/KMultiselect/KMultiselect.vue

@@ -495,7 +495,8 @@ const defaultKPopAttributes = {
 const key = ref(0)
 const stagingKey = ref(0)
 
-const multiselectWrapperId = attrs.id ? String(attrs.id) : useId() // unique id for the KLabel `for` attribute
+const defaultId = useId()
+const multiselectWrapperId = computed((): string => attrs.id ? String(attrs.id) : defaultId) // unique id for the KLabel `for` attribute
 const multiselectKey = useId()
 
 const multiselectElement = ref<HTMLDivElement | null>(null)

src/components/KRadio/KRadio.vue

@@ -176,7 +176,8 @@ const props = defineProps({
 const slots = useSlots()
 const attrs = useAttrs()
 
-const inputId = attrs.id ? String(attrs.id) : useId()
+const defaultId = useId()
+const inputId = computed((): string => attrs.id ? String(attrs.id) : defaultId)
 const isDisabled = computed((): boolean => attrs?.disabled !== undefined && String(attrs?.disabled) !== 'false')
 const hasLabel = computed((): boolean => !!(props.label || slots.default))
 // for regular radio we only show description if there is a label or default slot

src/components/KSelect/KSelect.vue

@@ -364,7 +364,8 @@ const emit = defineEmits<{
 const attrs = useAttrs()
 const slots = useSlots()
 
-const selectInputId = attrs.id ? String(attrs.id) : useId()
+const defaultId = useId()
+const selectInputId = computed((): string => attrs.id ? String(attrs.id) : defaultId)
 
 const isDropdownOpen = ref<boolean>(false)
 

src/components/KTextArea/KTextArea.vue

@@ -160,7 +160,8 @@ const value = computed({
   },
 })
 
-const textAreaId = attrs.id ? String(attrs.id) : useId()
+const defaultId = useId()
+const textAreaId = computed((): string => attrs.id ? String(attrs.id) : defaultId)
 
 const modifiedAttrs = computed((): Record<string, any> => {
   const $attrs = { ...attrs }