Add support for form group beforeInput and afterInput

colinrotherham · colinrotherham · commit 3760167f5618 · 2025-12-16T17:55:13.000Z
diff --git a/src/components/form-elements/character-count/CharacterCount.tsx b/src/components/form-elements/character-count/CharacterCount.tsx
@@ -14,15 +14,18 @@ import {
 import { FormGroup } from '#components/utils/index.js';
 import { type FormElementProps } from '#util/types/FormTypes.js';
 
-export interface CharacterCountProps
-  extends
-    ComponentPropsWithoutRef<'textarea'>,
-    Omit<FormElementProps, 'fieldsetProps' | 'legend' | 'legendProps'> {
+export interface CharacterCountElementProps extends ComponentPropsWithoutRef<'textarea'> {
   maxLength?: number;
   maxWords?: number;
   threshold?: number;
 }
 
+export type CharacterCountProps = CharacterCountElementProps &
+  Omit<
+    FormElementProps<CharacterCountElementProps, 'textarea'>,
+    'fieldsetProps' | 'legend' | 'legendProps'
+  >;
+
 export const CharacterCount = forwardRef<HTMLTextAreaElement, CharacterCountProps>(
   ({ maxLength, maxWords, threshold, formGroupProps, ...rest }, forwardedRef) => {
     const moduleRef = useRef<HTMLDivElement>(null);
@@ -47,7 +50,7 @@ export const CharacterCount = forwardRef<HTMLTextAreaElement, CharacterCountProp
     }
 
     return (
-      <FormGroup<CharacterCountProps>
+      <FormGroup<CharacterCountProps, 'textarea'>
         inputType="textarea"
         formGroupProps={{
           ...formGroupProps,
diff --git a/src/components/form-elements/checkboxes/Checkboxes.tsx b/src/components/form-elements/checkboxes/Checkboxes.tsx
@@ -18,12 +18,14 @@ import { FormGroup } from '#components/utils/index.js';
 import { generateRandomName } from '#util/tools/index.js';
 import { type FormElementProps } from '#util/types/FormTypes.js';
 
-export interface CheckboxesProps
-  extends ComponentPropsWithoutRef<'div'>, Omit<FormElementProps, 'label' | 'labelProps'> {
+export interface CheckboxesElementProps extends ComponentPropsWithoutRef<'div'> {
   idPrefix?: string;
   small?: boolean;
 }
 
+export type CheckboxesProps = CheckboxesElementProps &
+  Omit<FormElementProps<CheckboxesElementProps, 'div'>, 'label' | 'labelProps'>;
+
 const CheckboxesComponent = forwardRef<HTMLDivElement, CheckboxesProps>((props, forwardedRef) => {
   const { children, idPrefix, ...rest } = props;
 
@@ -82,7 +84,7 @@ const CheckboxesComponent = forwardRef<HTMLDivElement, CheckboxesProps>((props,
   }
 
   return (
-    <FormGroup<CheckboxesProps> inputType="checkboxes" {...rest}>
+    <FormGroup<CheckboxesProps, 'div'> inputType="checkboxes" {...rest}>
       {({ className, small, name, id, idPrefix, error, ...restRenderProps }) => {
         resetCheckboxIds();
         const contextValue: ICheckboxesContext = {
diff --git a/src/components/form-elements/checkboxes/components/CheckboxesItem.tsx b/src/components/form-elements/checkboxes/components/CheckboxesItem.tsx
@@ -17,16 +17,19 @@ import { HintText } from '#components/form-elements/hint-text/index.js';
 import { Label } from '#components/form-elements/label/index.js';
 import { type ComponentPropsWithDataAttributes, type FormElementProps } from '#util/types/index.js';
 
-export interface CheckboxesItemProps
-  extends
-    ComponentPropsWithoutRef<'input'>,
-    Pick<FormElementProps, 'hint' | 'hintProps' | 'labelProps'> {
+export interface CheckboxesItemElementProps extends ComponentPropsWithoutRef<'input'> {
   conditional?: ReactNode;
   forceShowConditional?: boolean;
   conditionalProps?: ComponentPropsWithRef<'div'>;
   exclusive?: boolean;
 }
 
+export type CheckboxesItemProps = CheckboxesItemElementProps &
+  Omit<
+    FormElementProps<CheckboxesItemElementProps, 'input'>,
+    'fieldsetProps' | 'label' | 'legend' | 'legendProps'
+  >;
+
 export const CheckboxesItem = forwardRef<HTMLInputElement, CheckboxesItemProps>(
   (props, forwardedRef) => {
     const {
diff --git a/src/components/form-elements/date-input/DateInput.tsx b/src/components/form-elements/date-input/DateInput.tsx
@@ -36,15 +36,21 @@ export interface DateInputElement extends Omit<HTMLInputElement, 'value' | 'onCh
   onChange?: EventHandler<DateInputChangeEvent>;
 }
 
-export interface DateInputProps
-  extends
-    Omit<ComponentPropsWithoutRef<'div'>, 'defaultValue' | 'onChange'>,
-    Omit<FormElementProps, 'label' | 'labelProps'> {
+export interface DateInputElementProps extends Omit<
+  ComponentPropsWithoutRef<'div'>,
+  'defaultValue' | 'onChange'
+> {
   value?: Partial<DateInputValue>;
   defaultValue?: Partial<DateInputValue>;
   onChange?: EventHandler<DateInputChangeEvent>;
 }
 
+export type DateInputProps = DateInputElementProps &
+  Omit<
+    FormElementProps<Omit<ComponentPropsWithoutRef<'div'>, 'defaultValue' | 'onChange'>, 'div'>,
+    'label' | 'labelProps'
+  >;
+
 export type DateInputType = 'day' | 'month' | 'year';
 
 const DateInputComponent = forwardRef<HTMLDivElement, DateInputProps>(
@@ -78,7 +84,7 @@ const DateInputComponent = forwardRef<HTMLDivElement, DateInputProps>(
     };
 
     return (
-      <FormGroup<Omit<DateInputProps, 'value' | 'defaultValue'>>
+      <FormGroup<Omit<DateInputProps, 'value' | 'defaultValue'>, 'div'>
         formGroupProps={{ ...formGroupProps, ref: moduleRef }}
         fieldsetProps={{ role: 'group' }}
         inputType="dateinput"
diff --git a/src/components/form-elements/date-input/components/DateInputField.tsx b/src/components/form-elements/date-input/components/DateInputField.tsx
@@ -14,12 +14,17 @@ import { DateInputContext, type IDateInputContext } from '../DateInputContext.js
 import { Label } from '#components/form-elements/label/index.js';
 import { type FormElementProps } from '#util/types/FormTypes.js';
 
-export interface IndividualDateInputProps
-  extends ComponentPropsWithoutRef<'input'>, Pick<FormElementProps, 'label' | 'labelProps'> {
+export interface IndividualDateInputElementProps extends ComponentPropsWithoutRef<'input'> {
   error?: string | ReactElement | false;
   inputType: 'day' | 'month' | 'year';
 }
 
+export type IndividualDateInputProps = IndividualDateInputElementProps &
+  Omit<
+    FormElementProps<IndividualDateInputElementProps, 'input'>,
+    'error' | 'fieldsetProps' | 'legend' | 'legendProps'
+  >;
+
 const labels: Record<'day' | 'month' | 'year', string> = {
   day: 'Day',
   month: 'Month',
diff --git a/src/components/form-elements/radios/Radios.tsx b/src/components/form-elements/radios/Radios.tsx
@@ -18,13 +18,15 @@ import { FormGroup } from '#components/utils/index.js';
 import { generateRandomName } from '#util/tools/index.js';
 import { type FormElementProps } from '#util/types/FormTypes.js';
 
-export interface RadiosProps
-  extends ComponentPropsWithoutRef<'div'>, Omit<FormElementProps, 'label' | 'labelProps'> {
+export interface RadiosElementProps extends ComponentPropsWithoutRef<'div'> {
   idPrefix?: string;
   inline?: boolean;
   small?: boolean;
 }
 
+export type RadiosProps = RadiosElementProps &
+  Omit<FormElementProps<RadiosElementProps, 'div'>, 'label' | 'labelProps'>;
+
 const RadiosComponent = forwardRef<HTMLDivElement, RadiosProps>((props, forwardedRef) => {
   const { children, idPrefix, ...rest } = props;
 
@@ -89,7 +91,7 @@ const RadiosComponent = forwardRef<HTMLDivElement, RadiosProps>((props, forwarde
   }
 
   return (
-    <FormGroup<RadiosProps> inputType="radios" {...rest}>
+    <FormGroup<RadiosProps, 'div'> inputType="radios" {...rest}>
       {({ className, inline, small, name, id, error, ...restRenderProps }) => {
         resetRadioIds();
         const contextValue: IRadiosContext = {
diff --git a/src/components/form-elements/radios/components/RadiosItem.tsx b/src/components/form-elements/radios/components/RadiosItem.tsx
@@ -17,15 +17,18 @@ import { HintText } from '#components/form-elements/hint-text/index.js';
 import { Label } from '#components/form-elements/label/index.js';
 import { type FormElementProps } from '#util/types/FormTypes.js';
 
-export interface RadiosItemProps
-  extends
-    ComponentPropsWithoutRef<'input'>,
-    Pick<FormElementProps, 'hint' | 'hintProps' | 'labelProps'> {
+export interface RadiosItemElementProps extends ComponentPropsWithoutRef<'input'> {
   conditional?: ReactNode;
   forceShowConditional?: boolean;
   conditionalProps?: ComponentPropsWithRef<'div'>;
 }
 
+export type RadiosItemProps = RadiosItemElementProps &
+  Omit<
+    FormElementProps<RadiosItemElementProps, 'input'>,
+    'fieldsetProps' | 'label' | 'legend' | 'legendProps'
+  >;
+
 export const RadiosItem = forwardRef<HTMLInputElement, RadiosItemProps>((props, forwardedRef) => {
   const {
     className,
diff --git a/src/components/form-elements/select/Select.tsx b/src/components/form-elements/select/Select.tsx
@@ -6,12 +6,14 @@ import { forwardRef, type ComponentPropsWithoutRef } from 'react';
 import { FormGroup } from '#components/utils/index.js';
 import { type FormElementProps } from '#util/types/FormTypes.js';
 
-export type SelectProps = ComponentPropsWithoutRef<'select'> &
-  Omit<FormElementProps, 'fieldsetProps' | 'legend' | 'legendProps'>;
+export type SelectElementProps = ComponentPropsWithoutRef<'select'>;
+
+export type SelectProps = SelectElementProps &
+  Omit<FormElementProps<SelectElementProps, 'select'>, 'fieldsetProps' | 'legend' | 'legendProps'>;
 
 const SelectComponent = forwardRef<HTMLSelectElement, SelectProps>(
   ({ children, ...rest }, forwardedRef) => (
-    <FormGroup<SelectProps> inputType="select" {...rest}>
+    <FormGroup<SelectProps, 'select'> inputType="select" {...rest}>
       {({ className, error, ...restRenderProps }) => (
         <select
           className={classNames('nhsuk-select', { 'nhsuk-select--error': error }, className)}
diff --git a/src/components/form-elements/text-input/TextInput.tsx b/src/components/form-elements/text-input/TextInput.tsx
@@ -7,16 +7,19 @@ import { FormGroup } from '#components/utils/index.js';
 import { type FormElementProps } from '#util/types/FormTypes.js';
 import { type InputWidth } from '#util/types/NHSUKTypes.js';
 
-export interface TextInputProps
-  extends
-    ComponentPropsWithoutRef<'input'>,
-    Omit<FormElementProps, 'fieldsetProps' | 'legend' | 'legendProps'> {
+export interface TextInputElementProps extends ComponentPropsWithoutRef<'input'> {
   width?: InputWidth;
   code?: boolean;
   prefix?: string;
   suffix?: string;
 }
 
+export type TextInputProps = TextInputElementProps &
+  Omit<
+    FormElementProps<TextInputElementProps, 'input'>,
+    'fieldsetProps' | 'legend' | 'legendProps'
+  >;
+
 const TextInputPrefix: FC<Pick<TextInputProps, 'prefix'>> = ({ prefix }) => (
   <div className="nhsuk-input__prefix" aria-hidden="true">
     {prefix}
@@ -29,10 +32,17 @@ const TextInputSuffix: FC<Pick<TextInputProps, 'suffix'>> = ({ suffix }) => (
   </div>
 );
 
-export const TextInput = forwardRef<HTMLInputElement, TextInputProps>((props, forwardedRef) => (
-  <FormGroup<TextInputProps> {...props} inputType="input">
-    {({ width, className, code, error, type = 'text', prefix, suffix, ...rest }) => {
-      const Input = (
+export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
+  ({ prefix, suffix, formGroupProps, ...props }, forwardedRef) => (
+    <FormGroup<TextInputProps, 'input'>
+      {...props}
+      formGroupProps={{
+        ...formGroupProps,
+        beforeInput: prefix ? () => <TextInputPrefix prefix={prefix} /> : undefined,
+        afterInput: suffix ? () => <TextInputSuffix suffix={suffix} /> : undefined,
+      }}
+    >
+      {({ width, className, code, error, type = 'text', prefix, suffix, ...rest }) => (
         <input
           className={classNames(
             'nhsuk-input',
@@ -45,19 +55,9 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>((props, fo
           type={type}
           {...rest}
         />
-      );
-
-      return prefix || suffix ? (
-        <div className="nhsuk-input__wrapper">
-          {prefix ? <TextInputPrefix prefix={prefix} /> : null}
-          {Input}
-          {suffix ? <TextInputSuffix suffix={suffix} /> : null}
-        </div>
-      ) : (
-        Input
-      );
-    }}
-  </FormGroup>
-));
+      )}
+    </FormGroup>
+  ),
+);
 
 TextInput.displayName = 'TextInput';
diff --git a/src/components/form-elements/text-input/__tests__/TextInput.test.tsx b/src/components/form-elements/text-input/__tests__/TextInput.test.tsx
@@ -149,8 +149,8 @@ describe('TextInput', () => {
     ({ prefix, suffix }) => {
       const { container } = render(<TextInput prefix={prefix} suffix={suffix} />);
 
-      const prefixElement = container.querySelector('.nhsuk-input__wrapper > .nhsuk-input__prefix');
-      const suffixElement = container.querySelector('.nhsuk-input__wrapper > .nhsuk-input__suffix');
+      const prefixElement = container.querySelector('.nhsuk-input-wrapper > .nhsuk-input__prefix');
+      const suffixElement = container.querySelector('.nhsuk-input-wrapper > .nhsuk-input__suffix');
 
       if (prefix) {
         expect(prefixElement).not.toBeNull();
@@ -167,10 +167,10 @@ describe('TextInput', () => {
       }
 
       if (!prefix && !suffix) {
-        expect(container.querySelector('.nhsuk-input__wrapper')).toBeNull();
+        expect(container.querySelector('.nhsuk-input-wrapper')).toBeNull();
         expect(container.querySelector('.nhsuk-input')).not.toBeNull();
       } else {
-        expect(container.querySelector('.nhsuk-input__wrapper > .nhsuk-input')).not.toBeNull();
+        expect(container.querySelector('.nhsuk-input-wrapper > .nhsuk-input')).not.toBeNull();
       }
     },
   );
diff --git a/src/components/form-elements/textarea/Textarea.tsx b/src/components/form-elements/textarea/Textarea.tsx
@@ -6,11 +6,16 @@ import { forwardRef, type ComponentPropsWithoutRef } from 'react';
 import { FormGroup } from '#components/utils/index.js';
 import { type FormElementProps } from '#util/types/FormTypes.js';
 
-export type TextareaProps = ComponentPropsWithoutRef<'textarea'> &
-  Omit<FormElementProps, 'fieldsetProps' | 'legend' | 'legendProps'>;
+export type TextareaElementProps = ComponentPropsWithoutRef<'textarea'>;
+
+export type TextareaProps = TextareaElementProps &
+  Omit<
+    FormElementProps<TextareaElementProps, 'textarea'>,
+    'fieldsetProps' | 'legend' | 'legendProps'
+  >;
 
 export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>((props, forwardedRef) => (
-  <FormGroup<TextareaProps> inputType="textarea" {...props}>
+  <FormGroup<TextareaProps, 'textarea'> inputType="textarea" {...props}>
     {({ children, className, error, ...rest }) => (
       <>
         <textarea
diff --git a/src/components/utils/FormGroup.tsx b/src/components/utils/FormGroup.tsx
diff --git a/src/components/utils/__tests__/FormGroup.test.tsx b/src/components/utils/__tests__/FormGroup.test.tsx
diff --git a/src/util/types/FormTypes.ts b/src/util/types/FormTypes.ts
