diff --git a/apps/scandic-web/components/TempDesignSystem/Form/Input/AriaInputWithLabel/index.tsx b/apps/scandic-web/components/TempDesignSystem/Form/Input/AriaInputWithLabel/index.tsx index b944b0bb8..2e980044c 100644 --- a/apps/scandic-web/components/TempDesignSystem/Form/Input/AriaInputWithLabel/index.tsx +++ b/apps/scandic-web/components/TempDesignSystem/Form/Input/AriaInputWithLabel/index.tsx @@ -2,6 +2,7 @@ import { cx } from "class-variance-authority" import { type ForwardedRef, forwardRef, + useId, useImperativeHandle, useRef, } from "react" @@ -20,6 +21,12 @@ const AriaInputWithLabel = forwardRef(function AriaInputWithLabelComponent( ) { const ref = useRef(null) + // Unique id is required for multiple inputs of same name appearing multiple times + // on same page. This will inherited by parent label element. + // Shouldn't really be needed if we don't set id though. + const uniqueId = useId() + const inputId = `${uniqueId}-${props.name}` + useImperativeHandle(forwardedRef, () => ref.current as HTMLInputElement) return ( @@ -38,6 +45,7 @@ const AriaInputWithLabel = forwardRef(function AriaInputWithLabelComponent( {...props} className={cx(styles.input, props.className)} ref={ref} + id={inputId} />