Add support for small radios and checkboxes

Author: colinrotherham

src/components/form-elements/checkboxes/Checkboxes.tsx

@@ -13,6 +13,7 @@ export interface CheckboxesProps
   extends ComponentPropsWithoutRef<'div'>,
     Omit<FormElementProps, 'label' | 'labelProps'> {
   idPrefix?: string;
+  small?: boolean;
 }
 
 const CheckboxesComponent = forwardRef<HTMLDivElement, CheckboxesProps>((props, forwardedRef) => {
@@ -72,7 +73,7 @@ const CheckboxesComponent = forwardRef<HTMLDivElement, CheckboxesProps>((props,
   return (
     <FormGroup<CheckboxesProps> inputType="checkboxes" {...rest}>
       {/* eslint-disable-next-line @typescript-eslint/no-unused-vars */}
-      {({ className, name, id, idPrefix, error, ...restRenderProps }) => {
+      {({ className, small, name, id, idPrefix, error, ...restRenderProps }) => {
         resetCheckboxIds();
         const contextValue: ICheckboxesContext = {
           name,
@@ -82,7 +83,11 @@ const CheckboxesComponent = forwardRef<HTMLDivElement, CheckboxesProps>((props,
         };
         return (
           <div
-            className={classNames('nhsuk-checkboxes', className)}
+            className={classNames(
+              'nhsuk-checkboxes',
+              { 'nhsuk-checkboxes--small': small },
+              className,
+            )}
             data-module="nhsuk-checkboxes"
             id={id}
             ref={moduleRef}

src/components/form-elements/radios/Radios.tsx

@@ -12,8 +12,9 @@ import { type FormElementProps } from '#util/types/FormTypes.js';
 export interface RadiosProps
   extends ComponentPropsWithoutRef<'div'>,
     Omit<FormElementProps, 'label' | 'labelProps'> {
-  inline?: boolean;
   idPrefix?: string;
+  inline?: boolean;
+  small?: boolean;
 }
 
 const RadiosComponent = forwardRef<HTMLDivElement, RadiosProps>((props, forwardedRef) => {
@@ -79,7 +80,7 @@ const RadiosComponent = forwardRef<HTMLDivElement, RadiosProps>((props, forwarde
   return (
     <FormGroup<RadiosProps> inputType="radios" {...rest}>
       {/* eslint-disable-next-line @typescript-eslint/no-unused-vars */}
-      {({ className, inline, name, id, error, ...restRenderProps }) => {
+      {({ className, inline, small, name, id, error, ...restRenderProps }) => {
         resetRadioIds();
         const contextValue: IRadiosContext = {
           getRadioId: (reference) => getRadioId(id, reference),
@@ -92,7 +93,14 @@ const RadiosComponent = forwardRef<HTMLDivElement, RadiosProps>((props, forwarde
 
         return (
           <div
-            className={classNames('nhsuk-radios', { 'nhsuk-radios--inline': inline }, className)}
+            className={classNames(
+              'nhsuk-radios',
+              {
+                'nhsuk-radios--inline': inline,
+                'nhsuk-radios--small': small,
+              },
+              className,
+            )}
             data-module="nhsuk-radios"
             id={id}
             ref={moduleRef}