@equinor/eds-core-react/dist/esm/components/InputWrapper/useInputField.js

The React implementation of the Equinor Design System

import { useId } from 'react';

/**
 * Shared hook for TextField and Textarea that handles common logic
 * for IDs, labels, helper text, and ARIA attributes
 */
const useInputField = ({
  id,
  label,
  meta,
  helperText,
  helperIcon,
  variant,
  disabled,
  className,
  style
}) => {
  const generatedFieldId = useId();
  const generatedHelperTextId = useId();

  // Use provided ID or fall back to generated one
  const fieldId = id ?? generatedFieldId;
  const helperTextId = generatedHelperTextId;
  const hasHelperText = Boolean(helperText);
  const containerProps = {
    className,
    style: {
      width: '100%',
      ...style
    },
    color: variant
  };
  const labelProps = {
    htmlFor: fieldId,
    label,
    meta,
    disabled
  };
  const helperProps = {
    id: hasHelperText ? helperTextId : null,
    text: helperText,
    icon: helperIcon
  };
  const ariaProps = {
    id: fieldId,
    'aria-invalid': variant === 'error' || undefined,
    ...(hasHelperText && {
      'aria-describedby': helperTextId
    })
  };
  return {
    fieldId,
    helperTextId: hasHelperText ? helperTextId : null,
    containerProps,
    labelProps,
    helperProps,
    ariaProps
  };
};

export { useInputField };