diff --git a/packages/react/src/components/TextInput/TextInput.js b/packages/react/src/components/TextInput/TextInput.js index fc943e010f58..03f69ec27933 100644 --- a/packages/react/src/components/TextInput/TextInput.js +++ b/packages/react/src/components/TextInput/TextInput.js @@ -85,6 +85,7 @@ const TextInput = React.forwardRef(function TextInput( title: placeholder, disabled: normalizedProps.disabled, readOnly, + ['aria-describedby']: normalizedProps.helperId, ...other, }; const inputWrapperClasses = classNames( @@ -134,8 +135,11 @@ const TextInput = React.forwardRef(function TextInput( {labelText} ) : null; + const helper = helperText ? ( -
{helperText}
+
+ {helperText} +
) : null; const input = ( diff --git a/packages/react/src/internal/useNormalizedInputProps.js b/packages/react/src/internal/useNormalizedInputProps.js index f0fa7b6ba83e..de4ba8fa2e5b 100644 --- a/packages/react/src/internal/useNormalizedInputProps.js +++ b/packages/react/src/internal/useNormalizedInputProps.js @@ -67,6 +67,7 @@ export function useNormalizedInputProps({ warnId: `${id}-warn-msg`, validation: null, icon: null, + helperId: `${id}-helper-text`, }; if (readOnly) {