feat: added data ids for input fields (#486)

12-aryan · web-flow · commit 6fc3fe4797d9 · 2025-10-17T13:30:08.000+05:30
* feat: added data ids for input fields

* fix: fixed asterisk position in labels

* fix: fixed data ids for inputs
diff --git a/apps/site/src/demos/DropdownInputDemo.tsx b/apps/site/src/demos/DropdownInputDemo.tsx
@@ -289,6 +289,9 @@ const DropdownInputDemo = () => {
                     <div className="min-h-32 rounded-2xl w-full flex justify-center items-center outline-1 outline-gray-200 bg-gray-50 p-8">
                         <div className="w-full max-w-md">
                             <DropdownInput
+                                data-id={'Enter city name'}
+                                data-input-name={playgroundValue}
+                                name={playgroundValue}
                                 dropdownPosition={DropdownPosition.LEFT}
                                 // slot={<User size={12} />}
                                 onBlur={() => {
diff --git a/apps/site/src/demos/NumberInputDemo.tsx b/apps/site/src/demos/NumberInputDemo.tsx
@@ -60,6 +60,9 @@ const NumberInputDemo = () => {
                 <div className="space-y-6">
                     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                         <NumberInput
+                            data-id={'Enter value'}
+                            data-input-name={playgroundValue?.toString() || ''}
+                            name={playgroundValue?.toString() || ''}
                             label="Value"
                             value={playgroundValue}
                             onChange={(e) =>
diff --git a/apps/site/src/demos/OTPInputDemo.tsx b/apps/site/src/demos/OTPInputDemo.tsx
@@ -130,8 +130,12 @@ const OTPInputDemo = () => {
                     <div className="min-h-40 rounded-2xl w-full flex justify-center items-center outline-1 outline-gray-200 p-8">
                         <div className="w-full max-w-md">
                             <OTPInput
+                                data-id={'Enter OTP Code'}
+                                data-input-name={playgroundValue}
+                                name={playgroundValue}
                                 label={playgroundLabel}
                                 sublabel={playgroundSublabel}
+                                placeholder={'otp field'}
                                 value={playgroundValue}
                                 length={playgroundLength}
                                 autoFocus={hasAutoFocus}
@@ -149,7 +153,6 @@ const OTPInputDemo = () => {
                                 hintText={playgroundHintText}
                                 helpIconHintText={playgroundHelpText}
                                 required={isRequired}
-                                name="playground-otp"
                                 onKeyDown={(e) => {
                                     console.log('onKeyDown', e)
                                 }}
diff --git a/apps/site/src/demos/SearchInputDemo.tsx b/apps/site/src/demos/SearchInputDemo.tsx
@@ -130,6 +130,9 @@ const SearchInputDemo = () => {
                     <div className="min-h-40 rounded-2xl w-full flex justify-center items-center outline-1 outline-gray-200 p-8">
                         <div className="w-full max-w-md">
                             <SearchInput
+                                data-id={'Enter search query'}
+                                data-input-name={playgroundValue}
+                                name={playgroundValue}
                                 value={playgroundValue}
                                 onChange={(e) =>
                                     setPlaygroundValue(e.target.value)
diff --git a/apps/site/src/demos/TextInputDemo.tsx b/apps/site/src/demos/TextInputDemo.tsx
@@ -126,6 +126,9 @@ const InputDemo = () => {
                     <div className="min-h-40 rounded-2xl w-full flex justify-center items-center outline-1 outline-gray-200 p-8">
                         <div className="w-full max-w-md">
                             <TextInput
+                                data-id={'Enter text here...'}
+                                data-input-name={playgroundText}
+                                name={playgroundText}
                                 label={playgroundText}
                                 value={playgroundValue}
                                 onChange={(e) =>
diff --git a/apps/site/src/demos/UnitInputDemo.tsx b/apps/site/src/demos/UnitInputDemo.tsx
@@ -205,6 +205,11 @@ const UnitInputDemo = () => {
                         <h3>Preview</h3>
                         <div style={{ maxWidth: '400px' }}>
                             <UnitInput
+                                data-id={'Enter value'}
+                                data-input-name={
+                                    playgroundValue?.toString() || ''
+                                }
+                                name={playgroundValue?.toString() || ''}
                                 value={playgroundValue}
                                 onChange={(e) => {
                                     const newValue = parseFloat(e.target.value)
@@ -243,7 +248,6 @@ const UnitInputDemo = () => {
                                         ? getRightSlotIcon()
                                         : undefined
                                 }
-                                name="playground-unit-input"
                             />
                         </div>
                     </div>
diff --git a/packages/blend/lib/components/Alert/Alert.tsx b/packages/blend/lib/components/Alert/Alert.tsx
@@ -74,6 +74,7 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(
                             </Block>
                         )}
                         <Text
+                            data-alert-heading={heading}
                             color={alertTokens.text.heading.color[variant]}
                             fontWeight={alertTokens.text.heading.fontWeight}
                             fontSize={alertTokens.text.heading.fontSize}
@@ -112,6 +113,7 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(
                     gap={FOUNDATION_THEME.unit[18]}
                 >
                     <Text
+                        data-alert-description={description}
                         fontWeight={alertTokens.text.description.fontWeight}
                         fontSize={alertTokens.text.description.fontSize}
                         lineHeight={alertTokens.text.description.lineHeight}
diff --git a/packages/blend/lib/components/Inputs/MultiValueInput/MultiValueInput.tsx b/packages/blend/lib/components/Inputs/MultiValueInput/MultiValueInput.tsx
@@ -67,7 +67,12 @@ const MultiValueInput = ({
     const paddingX = multiValueInputTokens.inputContainer.padding.x[size]
     const paddingY = multiValueInputTokens.inputContainer.padding.y[size]
     return (
-        <Block display="flex" flexDirection="column" gap={8}>
+        <Block
+            data-component-field-wrapper={`field-multi-value-input`}
+            display="flex"
+            flexDirection="column"
+            gap={8}
+        >
             <InputLabels
                 label={label}
                 sublabel={sublabel}
diff --git a/packages/blend/lib/components/Inputs/NumberInput/NumberInput.tsx b/packages/blend/lib/components/Inputs/NumberInput/NumberInput.tsx
@@ -53,6 +53,7 @@ const NumberInput = ({
 
     return (
         <Block
+            data-component-field-wrapper={`field-${name}`}
             display="flex"
             flexDirection="column"
             gap={numberInputTokens.gap}
diff --git a/packages/blend/lib/components/Inputs/OTPInput/OTPInput.tsx b/packages/blend/lib/components/Inputs/OTPInput/OTPInput.tsx
@@ -16,6 +16,7 @@ import { useResponsiveTokens } from '../../../hooks/useResponsiveTokens'
 
 const OTPInput = ({
     label,
+    placeholder,
     sublabel,
     disabled,
     helpIconHintText,
@@ -144,6 +145,7 @@ const OTPInput = ({
 
     return (
         <Block
+            data-component={'otp-input'}
             display="flex"
             flexDirection="column"
             gap={otpInputTokens.gap}
@@ -165,6 +167,8 @@ const OTPInput = ({
             >
                 {otp.map((digit, index) => (
                     <PrimitiveInput
+                        placeholder={placeholder}
+                        placeholderColor={'transparent'}
                         form={form}
                         width={otpInputTokens.inputContainer.input.width}
                         height={otpInputTokens.inputContainer.input.height}
diff --git a/packages/blend/lib/components/Inputs/OTPInput/types.ts b/packages/blend/lib/components/Inputs/OTPInput/types.ts
@@ -10,6 +10,7 @@ export type OTPProps = {
     autoFocus?: boolean
     onChange?: (value: string) => void
     form?: string
+    placeholder?: string
 } & Omit<
     React.InputHTMLAttributes<HTMLInputElement>,
     'size' | 'style' | 'className' | 'onChange'
diff --git a/packages/blend/lib/components/Inputs/TextArea/TextArea.tsx b/packages/blend/lib/components/Inputs/TextArea/TextArea.tsx
@@ -44,6 +44,7 @@ const TextArea = ({
 
     return (
         <Block
+            data-component-field-wrapper={`field-textarea`}
             display="flex"
             flexDirection="column"
             gap={textAreaTokens.gap}
diff --git a/packages/blend/lib/components/Inputs/TextInput/TextInput.tsx b/packages/blend/lib/components/Inputs/TextInput/TextInput.tsx
@@ -77,7 +77,13 @@ const TextInput = ({
     }, [leftSlot, rightSlot])
 
     return (
-        <Block display="flex" flexDirection="column" gap={8} width={'100%'}>
+        <Block
+            display="flex"
+            flexDirection="column"
+            gap={8}
+            width={'100%'}
+            data-component-field-wrapper={`field-${name}`}
+        >
             {(!isSmallScreen || size !== TextInputSize.LARGE) && (
                 <InputLabels
                     label={label}
diff --git a/packages/blend/lib/components/Inputs/UnitInput/UnitInput.tsx b/packages/blend/lib/components/Inputs/UnitInput/UnitInput.tsx
@@ -163,7 +163,13 @@ const UnitInput = ({
     }
 
     return (
-        <Block display="flex" flexDirection="column" gap={8} width="100%">
+        <Block
+            data-component-field-wrapper={`field-${name}`}
+            display="flex"
+            flexDirection="column"
+            gap={8}
+            width="100%"
+        >
             {(!isSmallScreen || size !== UnitInputSize.LARGE) && (
                 <InputLabels
                     label={label}
diff --git a/packages/blend/lib/components/Inputs/utils/FloatingLabels/FloatingLabels.tsx b/packages/blend/lib/components/Inputs/utils/FloatingLabels/FloatingLabels.tsx
@@ -14,7 +14,13 @@ const FloatingLabels = ({
     isFocused: boolean
 }) => {
     return (
-        <Block display="flex" alignItems="center" gap={4} width={'100%'}>
+        <Block
+            display="flex"
+            alignItems="center"
+            gap={4}
+            width={'100%'}
+            data-form-label={label}
+        >
             <Text
                 as="label"
                 htmlFor={name}
diff --git a/packages/blend/lib/components/Inputs/utils/InputFooter/InputFooter.tsx b/packages/blend/lib/components/Inputs/utils/InputFooter/InputFooter.tsx
@@ -36,6 +36,7 @@ const InputFooter = ({
                 {error && errorMessage && (
                     <Text
                         // variant="body.md"
+                        data-form-error={errorMessage}
                         color={
                             tokens?.errorMessage?.color ||
                             FOUNDATION_THEME.colors.red[600]
@@ -55,6 +56,7 @@ const InputFooter = ({
                 {hintText && !error && (
                     <Text
                         // variant="body.md"
+                        data-desc-text={hintText}
                         fontWeight={
                             tokens?.hintText?.fontWeight ||
                             FOUNDATION_THEME.font.weight[400]
diff --git a/packages/blend/lib/components/Inputs/utils/InputLabels/InputLabels.tsx b/packages/blend/lib/components/Inputs/utils/InputLabels/InputLabels.tsx
@@ -55,6 +55,7 @@ const InputLabels = <TTokens extends InputLabelTokens>({
         label && (
             <Block display="flex" alignItems="center" gap={4} width={'100%'}>
                 <Text
+                    data-form-label={label}
                     as="label"
                     htmlFor={name}
                     // variant="body.md"
@@ -80,6 +81,8 @@ const InputLabels = <TTokens extends InputLabelTokens>({
                             color:
                                 tokens?.required?.color ||
                                 FOUNDATION_THEME.colors.red[600],
+                            top: '-1px',
+                            left: '-1px',
                         }}
                     >
                         *
diff --git a/packages/blend/lib/components/Primitives/PrimitiveInput/PrimitiveInput.tsx b/packages/blend/lib/components/Primitives/PrimitiveInput/PrimitiveInput.tsx
@@ -423,7 +423,7 @@ const PrimitiveInput: React.FC<InputProps> = forwardRef<
         <StyledInput
             as={as}
             name={props.name}
-            id={props.id}
+            id={props.id ?? (props.name as string | undefined)}
             {...props}
             ref={ref}
         />
