From fbdbd133562b6d8203a0f434abd40f6d3c39baa7 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Tue, 13 Feb 2024 13:43:28 +0100
Subject: [PATCH 1/3] refactor(project): form fields and control elements

---
 packages/common/types/form.d.ts               |   4 +-
 .../src/components/Account/Account.tsx        |   7 +-
 .../__snapshots__/Account.test.tsx.snap       |  32 +-
 .../src/components/Checkbox/Checkbox.test.tsx |  18 -
 .../src/components/Checkbox/Checkbox.tsx      |  61 --
 .../__snapshots__/CheckoutForm.test.tsx.snap  |  56 +-
 .../CustomRegisterField.tsx                   |  26 +-
 .../CustomRegisterField.test.tsx.snap         | 136 ++---
 .../DateField/DateField.module.scss           | 105 ----
 .../DeleteAccountModal/DeleteAccountModal.tsx |   2 +-
 .../DevConfigSelector/DevConfigSelector.tsx   |   4 +-
 .../src/components/Dropdown/Dropdown.tsx      |  97 ----
 .../EditCardPaymentForm.tsx                   |   8 +-
 .../EditPasswordForm/EditPasswordForm.tsx     |   5 +-
 .../EditPasswordForm.test.tsx.snap            |  38 +-
 .../ui-react/src/components/Filter/Filter.tsx |   5 +-
 .../FinalizePayment/FinalizePayment.tsx       |   2 +-
 .../ForgotPasswordForm/ForgotPasswordForm.tsx |   4 +-
 .../ForgotPasswordForm.test.tsx.snap          |  14 +-
 .../FormField/FormField.module.scss           |  22 +
 .../src/components/FormField/FormField.tsx    |  41 ++
 .../Input.module.scss}                        |  64 +-
 .../ui-react/src/components/Input/Input.tsx   |  98 ++++
 .../components/LoginForm/LoginForm.test.tsx   |   8 +-
 .../src/components/LoginForm/LoginForm.tsx    |   2 +-
 .../__snapshots__/LoginForm.test.tsx.snap     |  30 +-
 .../components/OfferSwitch/OfferSwitch.tsx    |   2 +-
 .../src/components/Payment/Payment.tsx        |   2 +-
 .../__snapshots__/Payment.test.tsx.snap       |  21 +-
 .../components/PaymentForm/PaymentForm.tsx    |   8 +-
 .../PersonalDetailsForm.tsx                   |  20 +-
 .../PersonalDetailsForm.test.tsx.snap         | 548 +++++++++++-------
 .../ui-react/src/components/Radio/Radio.tsx   |  54 --
 .../RegistrationForm/RegistrationForm.tsx     |  25 +-
 .../RegistrationForm.test.tsx.snap            |  36 +-
 .../Select.module.scss}                       | 103 ++--
 .../ui-react/src/components/Select/Select.tsx |  93 +++
 .../Checkbox/Checkbox.module.scss             |  27 +-
 .../form-fields/Checkbox/Checkbox.test.tsx    |  24 +
 .../form-fields/Checkbox/Checkbox.tsx         |  71 +++
 .../__snapshots__/Checkbox.test.tsx.snap      |  11 +-
 .../CreditCardCVCField.test.tsx               |   0
 .../CreditCardCVCField/CreditCardCVCField.tsx |   0
 .../CreditCardCVCField.test.tsx.snap          |  14 +-
 .../CreditCardExpiryField.test.tsx            |   0
 .../CreditCardExpiryField.tsx                 |   0
 .../CreditCardExpiryField.test.tsx.snap       |  14 +-
 .../CreditCardNumberField.module.scss         |   0
 .../CreditCardNumberField.test.tsx            |   0
 .../CreditCardNumberField.tsx                 |   0
 .../CreditCardNumberField.test.tsx.snap       |  14 +-
 .../DateField/DateField.module.scss           |  64 ++
 .../{ => form-fields}/DateField/DateField.tsx | 205 ++++---
 .../Dropdown/Dropdown.test.tsx                |   0
 .../form-fields/Dropdown/Dropdown.tsx         |  46 ++
 .../PasswordField/PasswordField.test.tsx      |   0
 .../PasswordField/PasswordField.tsx           |  25 +-
 .../__snapshots__/PasswordField.test.tsx.snap |  16 +-
 .../{ => form-fields}/Radio/Radio.module.scss |  33 +-
 .../{ => form-fields}/Radio/Radio.test.tsx    |   2 +-
 .../components/form-fields/Radio/Radio.tsx    |  56 ++
 .../Radio/__snapshots__/Radio.test.tsx.snap   |  75 +++
 .../TextField/TextField.module.scss           |   7 +
 .../TextField/TextField.test.tsx              |   0
 .../form-fields/TextField/TextField.tsx       |  35 ++
 .../__snapshots__/TextField.test.tsx.snap     |  48 +-
 .../ui-react/src/containers/Profiles/Form.tsx |   6 +-
 packages/ui-react/src/pages/Home/Home.tsx     |   2 -
 .../User/__snapshots__/User.test.tsx.snap     |  42 +-
 packages/ui-react/src/types/form.ts           |  15 +
 .../DemoConfigDialog/DemoConfigDialog.tsx     |   2 +-
 .../DemoConfigDialog.test.tsx.snap            |  11 +-
 72 files changed, 1526 insertions(+), 1140 deletions(-)
 delete mode 100644 packages/ui-react/src/components/Checkbox/Checkbox.test.tsx
 delete mode 100644 packages/ui-react/src/components/Checkbox/Checkbox.tsx
 delete mode 100644 packages/ui-react/src/components/DateField/DateField.module.scss
 delete mode 100644 packages/ui-react/src/components/Dropdown/Dropdown.tsx
 create mode 100644 packages/ui-react/src/components/FormField/FormField.module.scss
 create mode 100644 packages/ui-react/src/components/FormField/FormField.tsx
 rename packages/ui-react/src/components/{TextField/TextField.module.scss => Input/Input.module.scss} (64%)
 create mode 100644 packages/ui-react/src/components/Input/Input.tsx
 delete mode 100644 packages/ui-react/src/components/Radio/Radio.tsx
 rename packages/ui-react/src/components/{Dropdown/Dropdown.module.scss => Select/Select.module.scss} (55%)
 create mode 100644 packages/ui-react/src/components/Select/Select.tsx
 rename packages/ui-react/src/components/{ => form-fields}/Checkbox/Checkbox.module.scss (81%)
 create mode 100644 packages/ui-react/src/components/form-fields/Checkbox/Checkbox.test.tsx
 create mode 100644 packages/ui-react/src/components/form-fields/Checkbox/Checkbox.tsx
 rename packages/ui-react/src/components/{ => form-fields}/Checkbox/__snapshots__/Checkbox.test.tsx.snap (67%)
 rename packages/ui-react/src/components/{ => form-fields}/CreditCardCVCField/CreditCardCVCField.test.tsx (100%)
 rename packages/ui-react/src/components/{ => form-fields}/CreditCardCVCField/CreditCardCVCField.tsx (100%)
 rename packages/ui-react/src/components/{ => form-fields}/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap (70%)
 rename packages/ui-react/src/components/{ => form-fields}/CreditCardExpiryField/CreditCardExpiryField.test.tsx (100%)
 rename packages/ui-react/src/components/{ => form-fields}/CreditCardExpiryField/CreditCardExpiryField.tsx (100%)
 rename packages/ui-react/src/components/{ => form-fields}/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap (69%)
 rename packages/ui-react/src/components/{ => form-fields}/CreditCardNumberField/CreditCardNumberField.module.scss (100%)
 rename packages/ui-react/src/components/{ => form-fields}/CreditCardNumberField/CreditCardNumberField.test.tsx (100%)
 rename packages/ui-react/src/components/{ => form-fields}/CreditCardNumberField/CreditCardNumberField.tsx (100%)
 rename packages/ui-react/src/components/{ => form-fields}/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap (69%)
 create mode 100644 packages/ui-react/src/components/form-fields/DateField/DateField.module.scss
 rename packages/ui-react/src/components/{ => form-fields}/DateField/DateField.tsx (50%)
 rename packages/ui-react/src/components/{ => form-fields}/Dropdown/Dropdown.test.tsx (100%)
 create mode 100644 packages/ui-react/src/components/form-fields/Dropdown/Dropdown.tsx
 rename packages/ui-react/src/components/{ => form-fields}/PasswordField/PasswordField.test.tsx (100%)
 rename packages/ui-react/src/components/{ => form-fields}/PasswordField/PasswordField.tsx (70%)
 rename packages/ui-react/src/components/{ => form-fields}/PasswordField/__snapshots__/PasswordField.test.tsx.snap (85%)
 rename packages/ui-react/src/components/{ => form-fields}/Radio/Radio.module.scss (77%)
 rename packages/ui-react/src/components/{ => form-fields}/Radio/Radio.test.tsx (94%)
 create mode 100644 packages/ui-react/src/components/form-fields/Radio/Radio.tsx
 create mode 100644 packages/ui-react/src/components/form-fields/Radio/__snapshots__/Radio.test.tsx.snap
 create mode 100644 packages/ui-react/src/components/form-fields/TextField/TextField.module.scss
 rename packages/ui-react/src/components/{ => form-fields}/TextField/TextField.test.tsx (100%)
 create mode 100644 packages/ui-react/src/components/form-fields/TextField/TextField.tsx
 rename packages/ui-react/src/components/{ => form-fields}/TextField/__snapshots__/TextField.test.tsx.snap (72%)
 create mode 100644 packages/ui-react/src/types/form.ts

diff --git a/packages/common/types/form.d.ts b/packages/common/types/form.d.ts
index f4616910b..336d1270f 100644
--- a/packages/common/types/form.d.ts
+++ b/packages/common/types/form.d.ts
@@ -1,5 +1,5 @@
-export type UseFormChangeHandler = React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-export type UseFormBlurHandler = React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+export type UseFormChangeHandler = React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>;
+export type UseFormBlurHandler = React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>;
 export type UseFormSubmitHandler = React.FormEventHandler<HTMLFormElement>;
 
 export type GenericFormErrors = { form: string };
diff --git a/packages/ui-react/src/components/Account/Account.tsx b/packages/ui-react/src/components/Account/Account.tsx
index 94b61e2c7..9752b12f9 100644
--- a/packages/ui-react/src/components/Account/Account.tsx
+++ b/packages/ui-react/src/components/Account/Account.tsx
@@ -20,9 +20,9 @@ import Alert from '../Alert/Alert';
 import Button from '../Button/Button';
 import Form from '../Form/Form';
 import IconButton from '../IconButton/IconButton';
-import TextField from '../TextField/TextField';
-import Checkbox from '../Checkbox/Checkbox';
 import FormFeedback from '../FormFeedback/FormFeedback';
+import TextField from '../form-fields/TextField/TextField';
+import Checkbox from '../form-fields/Checkbox/Checkbox';
 import CustomRegisterField from '../CustomRegisterField/CustomRegisterField';
 import Icon from '../Icon/Icon';
 import { modalURLFromLocation } from '../../utils/location';
@@ -351,8 +351,9 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
                     name={`consentsValues.${consent.name}`}
                     checked={isTruthyCustomParamValue(section.values.consentsValues?.[consent.name])}
                     onChange={section.onChange}
-                    label={formatConsentLabel(consent.label)}
+                    checkboxLabel={formatConsentLabel(consent.label)}
                     disabled={consent.required || section.isBusy}
+                    required={consent.required}
                     lang={htmlLang}
                   />
                 ))}
diff --git a/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap b/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap
index 624a6df72..25c330d33 100644
--- a/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap
+++ b/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap
@@ -25,10 +25,10 @@ exports[`<Account> > renders and matches snapshot 1`] = `
       novalidate=""
     >
       <div
-        class="_textField_e16c1b"
+        class="_formField_86f2f5 _textField_c799b0"
       >
         <label
-          class="_label_e16c1b"
+          class="_label_86f2f5"
           for="text-field_1235_firstname"
         >
           account.firstname
@@ -36,8 +36,9 @@ exports[`<Account> > renders and matches snapshot 1`] = `
         <input
           aria-describedby="helper_text_1235_firstname"
           aria-invalid="false"
+          aria-required="false"
           autocomplete="given-name"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_firstname"
           lang="en"
           name="firstName"
@@ -47,10 +48,10 @@ exports[`<Account> > renders and matches snapshot 1`] = `
         />
       </div>
       <div
-        class="_textField_e16c1b"
+        class="_formField_86f2f5 _textField_c799b0"
       >
         <label
-          class="_label_e16c1b"
+          class="_label_86f2f5"
           for="text-field_1235_lastname"
         >
           account.lastname
@@ -58,8 +59,9 @@ exports[`<Account> > renders and matches snapshot 1`] = `
         <input
           aria-describedby="helper_text_1235_lastname"
           aria-invalid="false"
+          aria-required="false"
           autocomplete="family-name"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_lastname"
           lang="en"
           name="lastName"
@@ -100,10 +102,10 @@ exports[`<Account> > renders and matches snapshot 1`] = `
       novalidate=""
     >
       <div
-        class="_textField_e16c1b"
+        class="_formField_86f2f5 _textField_c799b0"
       >
         <label
-          class="_label_e16c1b"
+          class="_label_86f2f5"
           for="text-field_1235_email"
         >
           account.email
@@ -111,8 +113,9 @@ exports[`<Account> > renders and matches snapshot 1`] = `
         <input
           aria-describedby="helper_text_1235_email"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="email"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_email"
           name="email"
           readonly=""
@@ -183,25 +186,22 @@ exports[`<Account> > renders and matches snapshot 1`] = `
       novalidate=""
     >
       <div
-        class="_checkbox_531f07"
+        class="_formField_86f2f5 _checkbox_a98c3a"
       >
         <div
-          class="_row_531f07"
+          class="_row_a98c3a"
         >
           <input
             aria-describedby="helper_text_1235_consentsvalues_marketing"
-            id="check-box_1235_consentsvalues_marketing"
+            id="text-field_1235_consentsvalues_marketing"
             name="consentsValues.marketing"
             type="checkbox"
             value=""
           />
           <label
-            for="check-box_1235_consentsvalues_marketing"
+            for="text-field_1235_consentsvalues_marketing"
             lang="en"
           >
-            <span
-              aria-hidden="true"
-            />
             Receive Marketing Emails
           </label>
         </div>
diff --git a/packages/ui-react/src/components/Checkbox/Checkbox.test.tsx b/packages/ui-react/src/components/Checkbox/Checkbox.test.tsx
deleted file mode 100644
index 3bd4cf316..000000000
--- a/packages/ui-react/src/components/Checkbox/Checkbox.test.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import Checkbox from './Checkbox';
-
-describe('<Checkbox>', () => {
-  test('renders and matches snapshot', () => {
-    const { container } = render(<Checkbox label="label" name="name" value="value" onChange={vi.fn()} />);
-
-    expect(container).toMatchSnapshot();
-  });
-
-  test('should set the checked state', () => {
-    const { getByLabelText } = render(<Checkbox label="label" name="name" value="value" checked={true} onChange={vi.fn()} />);
-
-    expect(getByLabelText('label')).toBeChecked();
-  });
-});
diff --git a/packages/ui-react/src/components/Checkbox/Checkbox.tsx b/packages/ui-react/src/components/Checkbox/Checkbox.tsx
deleted file mode 100644
index 2b07b3933..000000000
--- a/packages/ui-react/src/components/Checkbox/Checkbox.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, { type ReactNode } from 'react';
-import classNames from 'classnames';
-import { useTranslation } from 'react-i18next';
-import useOpaqueId from '@jwp/ott-hooks-react/src/useOpaqueId';
-
-import HelperText from '../HelperText/HelperText';
-
-import styles from './Checkbox.module.scss';
-
-type Props = {
-  label?: ReactNode;
-  name: string;
-  value?: string;
-  checked?: boolean;
-  onChange: React.ChangeEventHandler<HTMLInputElement>;
-  header?: string;
-  error?: boolean;
-  helperText?: string;
-  disabled?: boolean;
-  required?: boolean;
-  lang?: string;
-};
-
-const Checkbox: React.FC<Props> = ({ label, name, onChange, header, checked, value, helperText, disabled, error, required, lang, ...rest }: Props) => {
-  const { t } = useTranslation('common');
-  const id = useOpaqueId('check-box', name);
-  const helperTextId = useOpaqueId('helper_text', name);
-
-  return (
-    <div className={classNames(styles.checkbox, { [styles.error]: error })} {...rest}>
-      {header ? (
-        <div className={styles.header}>
-          {header}
-          {!required ? <span>{t('optional')}</span> : null}
-        </div>
-      ) : null}
-      <div className={styles.row}>
-        <input
-          name={name}
-          type="checkbox"
-          id={id}
-          value={value}
-          onChange={onChange}
-          checked={checked}
-          disabled={disabled}
-          aria-required={required}
-          aria-describedby={helperTextId}
-        />
-        <label htmlFor={id} lang={lang}>
-          <span aria-hidden="true">{required ? '* ' : ''}</span>
-          {label}
-        </label>
-      </div>
-      <HelperText id={helperTextId} error={error} className={error ? styles.helperTextError : undefined}>
-        {helperText}
-      </HelperText>
-    </div>
-  );
-};
-
-export default Checkbox;
diff --git a/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap b/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap
index 68dd32a08..ca30638db 100644
--- a/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap
+++ b/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap
@@ -85,22 +85,28 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
         >
           <div>
             <div
-              class="_textField_e16c1b"
+              class="_formField_86f2f5 _textField_c799b0"
             >
               <label
-                class="_label_e16c1b"
+                class="_label_86f2f5"
                 for="text-field_1235_cardholdername"
               >
                 checkout.card_holder_name
+                <span
+                  aria-hidden="true"
+                >
+                  *
+                </span>
               </label>
               <div
-                class="_container_e16c1b"
+                class="_container_859b20"
               >
                 <input
                   aria-describedby="helper_text_1235_cardholdername"
                   aria-invalid="false"
+                  aria-required="true"
                   autocomplete="cc-name"
-                  class="_input_e16c1b"
+                  class="_input_859b20"
                   id="text-field_1235_cardholdername"
                   name="cardholderName"
                   placeholder="checkout.credit_card_name"
@@ -113,22 +119,28 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
           </div>
           <div>
             <div
-              class="_textField_e16c1b directPostCreditCardNumber"
+              class="_formField_86f2f5 _textField_c799b0 directPostCreditCardNumber"
             >
               <label
-                class="_label_e16c1b"
+                class="_label_86f2f5"
                 for="text-field_1235_cardnumber"
               >
                 Card number
+                <span
+                  aria-hidden="true"
+                >
+                  *
+                </span>
               </label>
               <div
-                class="_container_e16c1b"
+                class="_container_859b20"
               >
                 <input
                   aria-describedby="helper_text_1235_cardnumber"
                   aria-invalid="false"
+                  aria-required="true"
                   autocomplete="cc-number"
-                  class="_input_e16c1b"
+                  class="_input_859b20"
                   id="text-field_1235_cardnumber"
                   name="cardNumber"
                   pattern="\\d*"
@@ -145,22 +157,28 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
           >
             <div>
               <div
-                class="_textField_e16c1b directPostExpiryDate"
+                class="_formField_86f2f5 _textField_c799b0 directPostExpiryDate"
               >
                 <label
-                  class="_label_e16c1b"
+                  class="_label_86f2f5"
                   for="text-field_1235_cardexpiry"
                 >
                   Expiry date
+                  <span
+                    aria-hidden="true"
+                  >
+                    *
+                  </span>
                 </label>
                 <div
-                  class="_container_e16c1b"
+                  class="_container_859b20"
                 >
                   <input
                     aria-describedby="helper_text_1235_cardexpiry"
                     aria-invalid="false"
+                    aria-required="true"
                     autocomplete="cc-exp"
-                    class="_input_e16c1b"
+                    class="_input_859b20"
                     id="text-field_1235_cardexpiry"
                     name="cardExpiry"
                     pattern="\\d*"
@@ -174,23 +192,29 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
             </div>
             <div>
               <div
-                class="_textField_e16c1b directPostSecurityCode"
+                class="_formField_86f2f5 _textField_c799b0 directPostSecurityCode"
               >
                 <label
-                  class="_label_e16c1b"
+                  class="_label_86f2f5"
                   for="text-field_1235_cardcvc"
                 >
                   payment.security_code
+                  <span
+                    aria-hidden="true"
+                  >
+                    *
+                  </span>
                 </label>
                 <div
-                  class="_container_e16c1b"
+                  class="_container_859b20"
                 >
                   <input
                     aria-describedby="helper_text_1235_cardcvc"
                     aria-invalid="false"
                     aria-label="payment.security_code"
+                    aria-required="true"
                     autocomplete="cc-csc"
-                    class="_input_e16c1b"
+                    class="_input_859b20"
                     id="text-field_1235_cardcvc"
                     name="cardCVC"
                     pattern="\\d*"
diff --git a/packages/ui-react/src/components/CustomRegisterField/CustomRegisterField.tsx b/packages/ui-react/src/components/CustomRegisterField/CustomRegisterField.tsx
index 204cd417b..5bcb0916d 100644
--- a/packages/ui-react/src/components/CustomRegisterField/CustomRegisterField.tsx
+++ b/packages/ui-react/src/components/CustomRegisterField/CustomRegisterField.tsx
@@ -4,17 +4,17 @@ import type { RegisterFieldOptions } from '@inplayer-org/inplayer.js';
 import type { CustomRegisterFieldVariant } from '@jwp/ott-common/types/account';
 import { isTruthyCustomParamValue, testId } from '@jwp/ott-common/src/utils/common';
 
-import Checkbox from '../Checkbox/Checkbox';
-import TextField from '../TextField/TextField';
-import Radio from '../Radio/Radio';
-import Dropdown from '../Dropdown/Dropdown';
-import DateField from '../DateField/DateField';
+import Checkbox from '../form-fields/Checkbox/Checkbox';
+import TextField from '../form-fields/TextField/TextField';
+import Radio from '../form-fields/Radio/Radio';
+import Dropdown from '../form-fields/Dropdown/Dropdown';
+import DateField from '../form-fields/DateField/DateField';
 
 export type CustomRegisterFieldCommonProps = {
   type?: CustomRegisterFieldVariant;
   name: string;
   value: string | boolean;
-  onChange: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  onChange: ChangeEventHandler;
 } & Partial<{
   label: ReactNode;
   placeholder: string;
@@ -27,7 +27,7 @@ export type CustomRegisterFieldCommonProps = {
   lang: string;
 }>;
 
-const CustomRegisterField: FC<CustomRegisterFieldCommonProps> = ({ type, value = '', options, editing, lang, ...props }) => {
+const CustomRegisterField: FC<CustomRegisterFieldCommonProps> = ({ type, value = '', label, options, editing, lang, ...props }) => {
   const { t, i18n } = useTranslation();
 
   const optionsList = useMemo(() => {
@@ -49,9 +49,9 @@ const CustomRegisterField: FC<CustomRegisterFieldCommonProps> = ({ type, value =
 
   switch (type) {
     case 'input':
-      return <TextField {...props} value={value as string} testId={testId(`crf-${type}`)} />;
+      return <TextField {...props} value={String(value)} label={label} testId={testId(`crf-${type}`)} />;
     case 'radio':
-      return <Radio {...props} values={optionsList} value={value as string} header={props.label} data-testid={testId(`crf-${type}`)} lang={lang} />;
+      return <Radio {...props} label={label} values={optionsList} value={String(value)} data-testid={testId(`crf-${type}`)} lang={lang} />;
     case 'select':
     case 'country':
     case 'us_state':
@@ -59,17 +59,17 @@ const CustomRegisterField: FC<CustomRegisterFieldCommonProps> = ({ type, value =
         <Dropdown
           {...props}
           options={optionsList}
-          value={value as string}
+          value={String(value)}
+          label={label}
           defaultLabel={props.placeholder}
-          fullWidth
           testId={testId(`crf-${type}`)}
           lang={lang}
         />
       );
     case 'datepicker':
-      return <DateField {...props} value={value as string} testId={testId(`crf-${type}`)} />;
+      return <DateField {...props} value={String(value)} label={label} testId={testId(`crf-${type}`)} />;
     default:
-      return <Checkbox {...props} checked={isTruthyCustomParamValue(value)} data-testid={testId(`crf-${type}`)} lang={lang} />;
+      return <Checkbox {...props} checkboxLabel={label} checked={isTruthyCustomParamValue(value)} data-testid={testId(`crf-${type}`)} lang={lang} />;
   }
 };
 
diff --git a/packages/ui-react/src/components/CustomRegisterField/__snapshots__/CustomRegisterField.test.tsx.snap b/packages/ui-react/src/components/CustomRegisterField/__snapshots__/CustomRegisterField.test.tsx.snap
index d514ad065..4e8facf32 100644
--- a/packages/ui-react/src/components/CustomRegisterField/__snapshots__/CustomRegisterField.test.tsx.snap
+++ b/packages/ui-react/src/components/CustomRegisterField/__snapshots__/CustomRegisterField.test.tsx.snap
@@ -3,25 +3,22 @@
 exports[`<CustomRegisterField> > renders and matches snapshot <Checkbox> 1`] = `
 <div>
   <div
-    class="_checkbox_531f07"
-    data-testid="crf-checkbox"
+    class="_formField_86f2f5 _checkbox_a98c3a"
   >
     <div
-      class="_row_531f07"
+      class="_row_a98c3a"
     >
       <input
         aria-describedby="helper_text_1235_name"
-        id="check-box_1235_name"
+        data-testid="crf-checkbox"
+        id="text-field_1235_name"
         name="name"
         type="checkbox"
         value=""
       />
       <label
-        for="check-box_1235_name"
+        for="text-field_1235_name"
       >
-        <span
-          aria-hidden="true"
-        />
         label
       </label>
     </div>
@@ -32,42 +29,40 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Checkbox> 1`] = `
 exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="country"> 1`] = `
 <div>
   <div
-    class="_container_bb73c6 _fullWidth_bb73c6 _medium_bb73c6"
+    class="_formField_86f2f5"
     data-testid="crf-country"
   >
     <label
-      class="_label_bb73c6"
-      for="1235"
+      class="_label_86f2f5"
+      for="text-field_1235_name"
     >
       label
-      <span>
-        optional
-      </span>
     </label>
     <div
-      class="_dropdown_bb73c6 _fullWidth_bb73c6"
+      class="_container_d97916"
     >
       <select
         aria-describedby="helper_text_1235_name"
+        aria-invalid="false"
         aria-required="false"
-        class="_select_bb73c6"
-        id="1235"
+        class="_select_d97916"
+        id="text-field_1235_name"
         name="name"
       >
         <option
-          class="_option_bb73c6"
+          class="_option_d97916"
           value="af"
         >
           country:af
         </option>
         <option
-          class="_option_bb73c6"
+          class="_option_d97916"
           value="ax"
         >
           country:ax
         </option>
         <option
-          class="_option_bb73c6"
+          class="_option_d97916"
           value="al"
         >
           country:al
@@ -81,31 +76,27 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="co
 exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="datepicker"> 1`] = `
 <div>
   <div
-    class="_dateField_eb6974"
+    class="_formField_86f2f5 _dateField_0addad"
     data-testid="crf-datepicker"
-    id="text-field_1235_name"
   >
     <label
-      class="_label_eb6974"
+      class="_label_86f2f5"
       for="text-field_1235_name"
     >
       label
-      <span>
-        optional
-      </span>
     </label>
     <div
-      class="_container_eb6974"
+      class="_container_0addad"
     >
       <input
         aria-describedby="helper_text_1235_name"
-        class="_hiddenInput_eb6974"
+        class="_hiddenInput_0addad"
         id="text-field_1235_name-hidden"
         name="name"
       />
       <input
         autocomplete="bday-day"
-        class="_input_eb6974"
+        class="_input_0addad"
         id="text-field_1235_name-date"
         maxlength="2"
         name="date"
@@ -116,7 +107,7 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="da
        / 
       <input
         autocomplete="bday-month"
-        class="_input_eb6974"
+        class="_input_0addad"
         id="text-field_1235_name-month"
         maxlength="2"
         name="month"
@@ -127,7 +118,7 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="da
        / 
       <input
         autocomplete="bday-year"
-        class="_input_eb6974"
+        class="_input_0addad"
         id="text-field_1235_name-year"
         maxlength="4"
         name="year"
@@ -143,25 +134,22 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="da
 exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="randomstring"> 1`] = `
 <div>
   <div
-    class="_checkbox_531f07"
-    data-testid="crf-randomstring"
+    class="_formField_86f2f5 _checkbox_a98c3a"
   >
     <div
-      class="_row_531f07"
+      class="_row_a98c3a"
     >
       <input
         aria-describedby="helper_text_1235_name"
-        id="check-box_1235_name"
+        data-testid="crf-randomstring"
+        id="text-field_1235_name"
         name="name"
         type="checkbox"
         value=""
       />
       <label
-        for="check-box_1235_name"
+        for="text-field_1235_name"
       >
-        <span
-          aria-hidden="true"
-        />
         label
       </label>
     </div>
@@ -172,26 +160,24 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="ra
 exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="select"> 1`] = `
 <div>
   <div
-    class="_container_bb73c6 _fullWidth_bb73c6 _medium_bb73c6"
+    class="_formField_86f2f5"
     data-testid="crf-select"
   >
     <label
-      class="_label_bb73c6"
-      for="1235"
+      class="_label_86f2f5"
+      for="text-field_1235_name"
     >
       label
-      <span>
-        optional
-      </span>
     </label>
     <div
-      class="_dropdown_bb73c6 _fullWidth_bb73c6"
+      class="_container_d97916"
     >
       <select
         aria-describedby="helper_text_1235_name"
+        aria-invalid="false"
         aria-required="false"
-        class="_select_bb73c6"
-        id="1235"
+        class="_select_d97916"
+        id="text-field_1235_name"
         name="name"
       />
     </div>
@@ -202,42 +188,40 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="se
 exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="us_state"> 1`] = `
 <div>
   <div
-    class="_container_bb73c6 _fullWidth_bb73c6 _medium_bb73c6"
+    class="_formField_86f2f5"
     data-testid="crf-us_state"
   >
     <label
-      class="_label_bb73c6"
-      for="1235"
+      class="_label_86f2f5"
+      for="text-field_1235_name"
     >
       label
-      <span>
-        optional
-      </span>
     </label>
     <div
-      class="_dropdown_bb73c6 _fullWidth_bb73c6"
+      class="_container_d97916"
     >
       <select
         aria-describedby="helper_text_1235_name"
+        aria-invalid="false"
         aria-required="false"
-        class="_select_bb73c6"
-        id="1235"
+        class="_select_d97916"
+        id="text-field_1235_name"
         name="name"
       >
         <option
-          class="_option_bb73c6"
+          class="_option_d97916"
           value="al"
         >
           us_state:al
         </option>
         <option
-          class="_option_bb73c6"
+          class="_option_d97916"
           value="ak"
         >
           us_state:ak
         </option>
         <option
-          class="_option_bb73c6"
+          class="_option_d97916"
           value="az"
         >
           us_state:az
@@ -251,23 +235,17 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="us
 exports[`<CustomRegisterField> > renders and matches snapshot <Radio> 1`] = `
 <div>
   <div
-    data-testid="crf-radio"
-    label="label"
+    class="_formField_86f2f5"
   >
     <label
-      class="_header_d50e6e"
-      data-testid="radio-header"
-      for="radio_1235_name"
+      class="_label_86f2f5"
+      for="text-field_1235_name"
     >
-      <span>
-        label
-      </span>
-      <span
-        class="_note_d50e6e"
-      >
-        optional
-      </span>
+      label
     </label>
+    <div
+      id="text-field_1235_name"
+    />
   </div>
 </div>
 `;
@@ -275,25 +253,23 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Radio> 1`] = `
 exports[`<CustomRegisterField> > renders and matches snapshot <TextField> 1`] = `
 <div>
   <div
-    class="_textField_e16c1b"
+    class="_formField_86f2f5 _textField_c799b0"
     data-testid="crf-input"
   >
     <label
-      class="_label_e16c1b"
+      class="_label_86f2f5"
       for="text-field_1235_name"
     >
       label
-      <span>
-        optional
-      </span>
     </label>
     <div
-      class="_container_e16c1b"
+      class="_container_859b20"
     >
       <input
         aria-describedby="helper_text_1235_name"
         aria-invalid="false"
-        class="_input_e16c1b"
+        aria-required="false"
+        class="_input_859b20"
         id="text-field_1235_name"
         name="name"
         type="text"
diff --git a/packages/ui-react/src/components/DateField/DateField.module.scss b/packages/ui-react/src/components/DateField/DateField.module.scss
deleted file mode 100644
index c4e91652f..000000000
--- a/packages/ui-react/src/components/DateField/DateField.module.scss
+++ /dev/null
@@ -1,105 +0,0 @@
-@use '@jwp/ott-ui-react/src/styles/variables';
-@use '@jwp/ott-ui-react/src/styles/theme';
-
-.dateField {
-  width: 100%;
-  margin-bottom: 8px;
-
-  &.error {
-    .container {
-      border-color: theme.$text-field-error-color;
-    }
-  }
-
-  &.disabled {
-    .container {
-      opacity: 0.7;
-    }
-  }
-
-  &:hover {
-    &:not(.disabled) {
-      .container {
-        background-color: theme.$text-field-hover-bg-color;
-        border-color: theme.$text-field-hover-border-color;
-      }
-    }
-  }
-}
-
-.label {
-  display: block;
-  margin-bottom: 4px;
-  font-weight: var(--body-font-weight-bold);
-  text-align: left;
-
-  > span {
-    float: right;
-    color: rgba(variables.$white, 0.7);
-    font-weight: normal;
-  }
-}
-
-.control > div {
-  width: 48px;
-  height: 48px;
-}
-
-.container {
-  display: flex;
-  align-items: center;
-  width: 100%;
-
-  color: theme.$text-field-resting-color;
-
-  font-weight: var(--body-font-weight-bold);
-  font-size: 16px;
-
-  background-color: theme.$text-field-bg-color;
-  border: 1px solid theme.$text-field-resting-border-color;
-  border-radius: 4px;
-  transition: border 0.2s ease;
-
-  &:focus-within {
-    color: theme.$text-field-active-color;
-    border-color: theme.$text-field-active-border-color;
-  }
-}
-
-.input {
-  width: 100%;
-  min-height: 48px;
-  padding: 14px 16px;
-  color: inherit;
-  font-size: 16px;
-  line-height: variables.$base-line-height;
-  text-align: center;
-  background: transparent;
-  border: none;
-  outline: none;
-  appearance: none;
-
-  &::-webkit-inner-spin-button {
-    display: none;
-  }
-
-  &[name="date"] {
-    width: 43px;
-    padding-right: 4px;
-  }
-
-  &[name="month"] {
-    width: 35px;
-    padding-right: 4px;
-    padding-left: 4px;
-  }
-
-  &[name="year"] {
-    width: 60px;
-    padding-left: 4px;
-  }
-}
-
-.hiddenInput {
-  display: none;
-}
diff --git a/packages/ui-react/src/components/DeleteAccountModal/DeleteAccountModal.tsx b/packages/ui-react/src/components/DeleteAccountModal/DeleteAccountModal.tsx
index 6d8a33fd6..404251e02 100644
--- a/packages/ui-react/src/components/DeleteAccountModal/DeleteAccountModal.tsx
+++ b/packages/ui-react/src/components/DeleteAccountModal/DeleteAccountModal.tsx
@@ -13,7 +13,7 @@ import classNames from 'classnames';
 import { useAriaAnnouncer } from '../../containers/AnnouncementProvider/AnnoucementProvider';
 import { modalURLFromLocation } from '../../utils/location';
 import Button from '../Button/Button';
-import PasswordField from '../PasswordField/PasswordField';
+import PasswordField from '../form-fields/PasswordField/PasswordField';
 import useQueryParam from '../../hooks/useQueryParam';
 import FormFeedback from '../FormFeedback/FormFeedback';
 
diff --git a/packages/ui-react/src/components/DevConfigSelector/DevConfigSelector.tsx b/packages/ui-react/src/components/DevConfigSelector/DevConfigSelector.tsx
index 795579841..1a1f0c7a7 100644
--- a/packages/ui-react/src/components/DevConfigSelector/DevConfigSelector.tsx
+++ b/packages/ui-react/src/components/DevConfigSelector/DevConfigSelector.tsx
@@ -3,7 +3,7 @@ import { createURL } from '@jwp/ott-common/src/utils/urlFormatting';
 import { CONFIG_QUERY_KEY } from '@jwp/ott-common/src/constants';
 import { jwDevEnvConfigs, testConfigs } from '@jwp/ott-testing/constants';
 
-import Dropdown from '../Dropdown/Dropdown';
+import Select from '../Select/Select';
 
 import styles from './DevConfigSelector.module.scss';
 
@@ -23,7 +23,7 @@ const DevConfigSelector = ({ selectedConfig }: Props) => {
   }, []);
 
   return (
-    <Dropdown
+    <Select
       className={styles.dropdown}
       size="small"
       options={configOptions}
diff --git a/packages/ui-react/src/components/Dropdown/Dropdown.tsx b/packages/ui-react/src/components/Dropdown/Dropdown.tsx
deleted file mode 100644
index b70dfb45e..000000000
--- a/packages/ui-react/src/components/Dropdown/Dropdown.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React, { type ReactNode } from 'react';
-import classNames from 'classnames';
-import { useTranslation } from 'react-i18next';
-import useOpaqueId from '@jwp/ott-hooks-react/src/useOpaqueId';
-
-import HelperText from '../HelperText/HelperText';
-
-import styles from './Dropdown.module.scss';
-
-type Props = {
-  name: string;
-  value: string;
-  className?: string;
-  defaultLabel?: string;
-  options?: (string | { value: string; label: string })[];
-  optionsStyle?: string;
-  label?: ReactNode;
-  fullWidth?: boolean;
-  size?: 'small' | 'medium';
-  error?: boolean;
-  helperText?: string;
-  required?: boolean;
-  hideOptional?: boolean;
-  onChange: React.ChangeEventHandler;
-  testId?: string;
-  lang?: string;
-};
-
-const Dropdown: React.FC<Props & React.AriaAttributes> = ({
-  name,
-  value,
-  className,
-  defaultLabel,
-  options,
-  onChange,
-  optionsStyle,
-  label,
-  fullWidth,
-  error,
-  helperText,
-  required = false,
-  size = 'medium',
-  testId,
-  hideOptional,
-  lang,
-  ...rest
-}: Props & React.AriaAttributes) => {
-  const { t } = useTranslation('common');
-  const id = useOpaqueId();
-  const helperTextId = useOpaqueId('helper_text', name);
-
-  return (
-    <div className={classNames(styles.container, { [styles.fullWidth]: fullWidth, [styles.error]: error }, styles[size], className)} data-testid={testId}>
-      {(label || (!required && !hideOptional)) && (
-        <label htmlFor={id} className={styles.label}>
-          {label}
-          {!required && !hideOptional ? <span>{t('optional')}</span> : null}
-        </label>
-      )}
-      <div className={classNames(styles.dropdown, { [styles.fullWidth]: fullWidth })}>
-        <select
-          id={id}
-          className={styles.select}
-          name={name}
-          value={value}
-          onChange={onChange}
-          aria-required={required}
-          aria-invalid={error}
-          aria-describedby={helperTextId}
-          lang={lang}
-          {...rest}
-        >
-          {defaultLabel && (
-            <option className={classNames(styles.option, optionsStyle)} value="" disabled={required}>
-              {defaultLabel}
-            </option>
-          )}
-          {options &&
-            options.map((option) => (
-              <option
-                className={classNames(styles.option, optionsStyle)}
-                key={typeof option === 'string' ? option : option.value}
-                value={typeof option === 'string' ? option : option.value}
-              >
-                {typeof option === 'string' ? option : option.label}
-              </option>
-            ))}
-        </select>
-      </div>
-      <HelperText id={helperTextId} error={error}>
-        {helperText}
-      </HelperText>
-    </div>
-  );
-};
-
-export default Dropdown;
diff --git a/packages/ui-react/src/components/EditCardPaymentForm/EditCardPaymentForm.tsx b/packages/ui-react/src/components/EditCardPaymentForm/EditCardPaymentForm.tsx
index 369610415..5f919445a 100644
--- a/packages/ui-react/src/components/EditCardPaymentForm/EditCardPaymentForm.tsx
+++ b/packages/ui-react/src/components/EditCardPaymentForm/EditCardPaymentForm.tsx
@@ -10,10 +10,10 @@ import AccountController from '@jwp/ott-common/src/controllers/AccountController
 import useForm from '@jwp/ott-hooks-react/src/useForm';
 
 import Button from '../Button/Button';
-import CreditCardCVCField from '../CreditCardCVCField/CreditCardCVCField';
-import CreditCardExpiryField from '../CreditCardExpiryField/CreditCardExpiryField';
-import CreditCardNumberField from '../CreditCardNumberField/CreditCardNumberField';
-import TextField from '../TextField/TextField';
+import CreditCardCVCField from '../form-fields/CreditCardCVCField/CreditCardCVCField';
+import CreditCardExpiryField from '../form-fields/CreditCardExpiryField/CreditCardExpiryField';
+import CreditCardNumberField from '../form-fields/CreditCardNumberField/CreditCardNumberField';
+import TextField from '../form-fields/TextField/TextField';
 import { useAriaAnnouncer } from '../../containers/AnnouncementProvider/AnnoucementProvider';
 
 import styles from './EditCardPaymentForm.module.scss';
diff --git a/packages/ui-react/src/components/EditPasswordForm/EditPasswordForm.tsx b/packages/ui-react/src/components/EditPasswordForm/EditPasswordForm.tsx
index 8413310ac..3a2f4246d 100644
--- a/packages/ui-react/src/components/EditPasswordForm/EditPasswordForm.tsx
+++ b/packages/ui-react/src/components/EditPasswordForm/EditPasswordForm.tsx
@@ -4,8 +4,8 @@ import type { EditPasswordFormData } from '@jwp/ott-common/types/account';
 import type { FormErrors } from '@jwp/ott-common/types/form';
 import { testId } from '@jwp/ott-common/src/utils/common';
 
-import PasswordField from '../PasswordField/PasswordField';
-import TextField from '../TextField/TextField';
+import PasswordField from '../form-fields/PasswordField/PasswordField';
+import TextField from '../form-fields/TextField/TextField';
 import Button from '../Button/Button';
 import FormFeedback from '../FormFeedback/FormFeedback';
 import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
@@ -109,6 +109,7 @@ const EditPasswordForm: React.FC<Props> = ({
         error={!!errors.passwordConfirmation}
         name="passwordConfirmation"
         autoComplete="new-password"
+        showHelperText={false}
         required
       />
 
diff --git a/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap b/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap
index 6588c0191..05c99cb80 100644
--- a/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap
+++ b/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap
@@ -12,22 +12,28 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
       reset.password_reset
     </h2>
     <div
-      class="_textField_e16c1b _rightControl_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_password"
       >
         reset.new_password
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20 _rightControl_859b20"
       >
         <input
           aria-describedby="helper_text_1235_password"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="new-password"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_password"
           name="password"
           placeholder="reset.password"
@@ -36,7 +42,7 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
           value=""
         />
         <div
-          class="_control_e16c1b"
+          class="_control_859b20"
         >
           <button
             aria-label="reset.view_password"
@@ -65,22 +71,28 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b _rightControl_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_passwordconfirmation"
       >
         reset.repeat_new_password
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20 _rightControl_859b20"
       >
         <input
           aria-describedby="helper_text_1235_passwordconfirmation"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="new-password"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_passwordconfirmation"
           name="passwordConfirmation"
           placeholder="reset.repeat_new_password"
@@ -89,7 +101,7 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
           value=""
         />
         <div
-          class="_control_e16c1b"
+          class="_control_859b20"
         >
           <button
             aria-label="reset.view_password"
@@ -110,12 +122,6 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
           </button>
         </div>
       </div>
-      <div
-        class="_helperText_da58e0"
-        id="helper_text_1235_passwordconfirmation"
-      >
-        reset.password_helper_text
-      </div>
     </div>
     <button
       aria-disabled="false"
diff --git a/packages/ui-react/src/components/Filter/Filter.tsx b/packages/ui-react/src/components/Filter/Filter.tsx
index ffe24f0db..bcd384486 100644
--- a/packages/ui-react/src/components/Filter/Filter.tsx
+++ b/packages/ui-react/src/components/Filter/Filter.tsx
@@ -2,7 +2,7 @@ import React, { type FC, Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 import useBreakpoint, { Breakpoint } from '@jwp/ott-ui-react/src/hooks/useBreakpoint';
 
-import Dropdown from '../Dropdown/Dropdown';
+import Select from '../Select/Select';
 import Button from '../Button/Button';
 
 import styles from './Filter.module.scss';
@@ -49,7 +49,7 @@ const Filter: FC<Props> = ({ name, value, defaultLabel, options, setValue, force
         </div>
       ) : (
         <div className={styles.filterDropDown}>
-          <Dropdown
+          <Select
             className={styles.dropDown}
             size="small"
             options={options}
@@ -58,7 +58,6 @@ const Filter: FC<Props> = ({ name, value, defaultLabel, options, setValue, force
             value={value}
             onChange={handleChange}
             aria-label={t('filter_videos_by', { name })}
-            hideOptional
           />
         </div>
       )}
diff --git a/packages/ui-react/src/components/FinalizePayment/FinalizePayment.tsx b/packages/ui-react/src/components/FinalizePayment/FinalizePayment.tsx
index 32878c32c..a0df5676d 100644
--- a/packages/ui-react/src/components/FinalizePayment/FinalizePayment.tsx
+++ b/packages/ui-react/src/components/FinalizePayment/FinalizePayment.tsx
@@ -73,7 +73,7 @@ const FinalizePayment = () => {
           />
         </>
       ) : (
-        <div className={styles.loading}>
+        <div>
           <Spinner />
         </div>
       )}
diff --git a/packages/ui-react/src/components/ForgotPasswordForm/ForgotPasswordForm.tsx b/packages/ui-react/src/components/ForgotPasswordForm/ForgotPasswordForm.tsx
index 47d950cf9..a02ba78f1 100644
--- a/packages/ui-react/src/components/ForgotPasswordForm/ForgotPasswordForm.tsx
+++ b/packages/ui-react/src/components/ForgotPasswordForm/ForgotPasswordForm.tsx
@@ -5,7 +5,7 @@ import type { FormErrors } from '@jwp/ott-common/types/form';
 import { testId } from '@jwp/ott-common/src/utils/common';
 
 import Button from '../Button/Button';
-import TextField from '../TextField/TextField';
+import TextField from '../form-fields/TextField/TextField';
 import FormFeedback from '../FormFeedback/FormFeedback';
 
 import styles from './ForgotPasswordForm.module.scss';
@@ -24,7 +24,7 @@ const ForgotPasswordForm: React.FC<Props> = ({ onSubmit, onChange, value, errors
   const { t } = useTranslation('account');
 
   return (
-    <form onSubmit={onSubmit} data-testid={testId('forgot-password-form')} noValidate className={styles.forgotPasswordForm}>
+    <form onSubmit={onSubmit} data-testid={testId('forgot-password-form')} noValidate>
       <h2 className={styles.title}>{t('reset.forgot_password')}</h2>
       {errors.form ? <FormFeedback variant="error">{errors.form}</FormFeedback> : null}
       <p className={styles.text}>{t('reset.forgot_text')}</p>
diff --git a/packages/ui-react/src/components/ForgotPasswordForm/__snapshots__/ForgotPasswordForm.test.tsx.snap b/packages/ui-react/src/components/ForgotPasswordForm/__snapshots__/ForgotPasswordForm.test.tsx.snap
index d7350f90a..0980f3f28 100644
--- a/packages/ui-react/src/components/ForgotPasswordForm/__snapshots__/ForgotPasswordForm.test.tsx.snap
+++ b/packages/ui-react/src/components/ForgotPasswordForm/__snapshots__/ForgotPasswordForm.test.tsx.snap
@@ -17,22 +17,28 @@ exports[`<ForgotPasswordForm> > renders and matches snapshot type forgot 1`] = `
       reset.forgot_text
     </p>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_email"
       >
         reset.email
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_email"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="email"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_email"
           name="email"
           placeholder="reset.email"
diff --git a/packages/ui-react/src/components/FormField/FormField.module.scss b/packages/ui-react/src/components/FormField/FormField.module.scss
new file mode 100644
index 000000000..2cf65d9b8
--- /dev/null
+++ b/packages/ui-react/src/components/FormField/FormField.module.scss
@@ -0,0 +1,22 @@
+@use '@jwp/ott-ui-react/src/styles/variables';
+@use '@jwp/ott-ui-react/src/styles/theme';
+
+.formField {
+  width: 100%;
+  margin-bottom: 8px;
+}
+
+.label {
+  display: block;
+  margin-bottom: 4px;
+  font-weight: var(--body-font-weight-bold);
+  text-align: left;
+
+  > span {
+    margin-left: 4px;
+    font-family: Verdana, sans-serif;
+    font-weight: normal;
+    font-size: 12px;
+    vertical-align: top;
+  }
+}
diff --git a/packages/ui-react/src/components/FormField/FormField.tsx b/packages/ui-react/src/components/FormField/FormField.tsx
new file mode 100644
index 000000000..db7661b9d
--- /dev/null
+++ b/packages/ui-react/src/components/FormField/FormField.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import classNames from 'classnames';
+import useOpaqueId from '@jwp/ott-hooks-react/src/useOpaqueId';
+
+import HelperText from '../HelperText/HelperText';
+import type { FormControlProps } from '../../types/form';
+
+import styles from './FormField.module.scss';
+
+type RenderInputProps = {
+  helperTextId: string;
+  id: string;
+};
+
+type Props = {
+  helperText?: React.ReactNode;
+  renderInput: (fieldProps: RenderInputProps) => React.ReactElement;
+} & Omit<FormControlProps, 'value' | 'placeholder'>;
+
+export const FormField = ({ className, renderInput, required, label, error, helperText, testId, editing = true, name }: Props) => {
+  const formFieldClassName = classNames(styles.formField, className);
+  const id = useOpaqueId('text-field', name);
+  const helperTextId = useOpaqueId('helper_text', name);
+
+  return (
+    <div className={formFieldClassName} data-testid={testId}>
+      {!!label && (
+        <label htmlFor={id} className={styles.label}>
+          {label}
+          {required && editing ? <span aria-hidden="true">*</span> : null}
+        </label>
+      )}
+      {renderInput({ helperTextId, id })}
+      {editing && (
+        <HelperText id={helperTextId} error={error}>
+          {helperText}
+        </HelperText>
+      )}
+    </div>
+  );
+};
diff --git a/packages/ui-react/src/components/TextField/TextField.module.scss b/packages/ui-react/src/components/Input/Input.module.scss
similarity index 64%
rename from packages/ui-react/src/components/TextField/TextField.module.scss
rename to packages/ui-react/src/components/Input/Input.module.scss
index 3457d7ac5..66b80a7a5 100644
--- a/packages/ui-react/src/components/TextField/TextField.module.scss
+++ b/packages/ui-react/src/components/Input/Input.module.scss
@@ -1,20 +1,23 @@
 @use '@jwp/ott-ui-react/src/styles/variables';
 @use '@jwp/ott-ui-react/src/styles/theme';
 
-.textField {
+.container {
+  display: flex;
   width: 100%;
-  margin-bottom: 8px;
+
+  color: theme.$text-field-resting-color;
+
+  background-color: theme.$text-field-bg-color;
+  border: 1px solid theme.$text-field-resting-border-color;
+  border-radius: 4px;
+  transition: border 0.2s ease;
 
   &.error {
-    .container {
-      border-color: theme.$text-field-error-color;
-    }
+    border-color: theme.$text-field-error-color;
   }
 
   &.disabled {
-    .container {
-      opacity: 0.7;
-    }
+    opacity: 0.7;
   }
 
   &.leftControl .input {
@@ -25,58 +28,31 @@
     padding-right: 0;
   }
 
+  &:focus-within {
+    color: theme.$text-field-active-color;
+    border-color: theme.$text-field-active-border-color;
+  }
+
   &:hover {
     &:not(.disabled) {
-      .container {
-        background-color: theme.$text-field-hover-bg-color;
-        border-color: theme.$text-field-hover-border-color;
-      }
+      background-color: theme.$text-field-hover-bg-color;
+      border-color: theme.$text-field-hover-border-color;
     }
   }
 }
 
-.label {
-  display: block;
-  margin-bottom: 4px;
-  font-weight: var(--body-font-weight-bold);
-  text-align: left;
-
-  > span {
-    float: right;
-    color: rgba(variables.$white, 0.7);
-    font-weight: normal;
-  }
-}
-
-.control > button {
+.control > div {
   width: 48px;
   height: 48px;
 }
 
-.container {
-  display: flex;
-  width: 100%;
-
-  color: theme.$text-field-resting-color;
-
-  background-color: theme.$text-field-bg-color;
-  border: 1px solid theme.$text-field-resting-border-color;
-  border-radius: 4px;
-  transition: border 0.2s ease;
-
-  &:focus-within {
-    color: theme.$text-field-active-color;
-    border-color: theme.$text-field-active-border-color;
-  }
-}
-
 .input {
   width: 100%;
   min-height: 48px;
   padding: 14px 16px;
   color: inherit;
   font-size: 16px;
-  line-height: 18px;
+  line-height: variables.$base-line-height;
   background: transparent;
   border: none;
   outline: none;
diff --git a/packages/ui-react/src/components/Input/Input.tsx b/packages/ui-react/src/components/Input/Input.tsx
new file mode 100644
index 000000000..e3ded1897
--- /dev/null
+++ b/packages/ui-react/src/components/Input/Input.tsx
@@ -0,0 +1,98 @@
+import React, { type InputHTMLAttributes, type RefObject, type TextareaHTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+import type { FormControlProps } from '../../types/form';
+
+import styles from './Input.module.scss';
+
+type CommonProps = {
+  id?: string;
+  helperTextId?: string;
+  leftControl?: React.ReactNode;
+  rightControl?: React.ReactNode;
+  multiline?: boolean;
+} & FormControlProps;
+
+type HTMLInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+type HTMLTextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>;
+
+type InputProps = HTMLInputProps & {
+  type?: InputHTMLAttributes<HTMLInputElement>['type'];
+  multiline?: boolean;
+  inputRef?: RefObject<HTMLInputElement>;
+  textAreaRef?: never;
+} & CommonProps;
+type TextAreaProps = HTMLTextAreaProps & { type?: never; multiline: true; inputRef?: never; textAreaRef?: RefObject<HTMLTextAreaElement> } & CommonProps;
+
+export type Props = InputProps | TextAreaProps;
+
+const isTextArea = (_props: HTMLInputProps | HTMLTextAreaProps, multiline?: boolean): _props is HTMLTextAreaProps => !!multiline;
+
+const Input = ({
+  required,
+  className,
+  disabled,
+  editing = true,
+  value,
+  id,
+  name,
+  multiline,
+  error,
+  helperTextId,
+  type,
+  textAreaRef,
+  inputRef,
+  leftControl,
+  rightControl,
+  ...inputProps
+}: Props) => {
+  // Default to 'text' if 'type' property is absent, which occurs in textareas.
+  const inputType = type || 'text';
+  const containerClassName = classNames(
+    styles.container,
+    {
+      [styles.error]: error,
+      [styles.disabled]: disabled,
+      [styles.leftControl]: !!leftControl,
+      [styles.rightControl]: !!rightControl,
+    },
+    className,
+  );
+
+  const ariaAttributes = {
+    'aria-required': !!required,
+    'aria-invalid': Boolean(required && error && value !== ''),
+    'aria-describedby': helperTextId,
+  } as const;
+
+  const commonProps: HTMLInputProps | HTMLTextAreaProps = {
+    id,
+    name,
+    value,
+    disabled,
+    rows: multiline ? 3 : undefined,
+    className: styles.input,
+    readOnly: !editing,
+    required: required,
+    ...ariaAttributes,
+    ...inputProps,
+  };
+
+  const input = isTextArea(commonProps, multiline) ? (
+    <textarea {...commonProps} ref={textAreaRef} />
+  ) : (
+    <input {...commonProps} type={inputType} ref={inputRef} />
+  );
+
+  return editing ? (
+    <div className={containerClassName}>
+      {leftControl ? <div className={styles.control}>{leftControl}</div> : null}
+      {input}
+      {rightControl ? <div className={styles.control}>{rightControl}</div> : null}
+    </div>
+  ) : (
+    input
+  );
+};
+
+export default Input;
diff --git a/packages/ui-react/src/components/LoginForm/LoginForm.test.tsx b/packages/ui-react/src/components/LoginForm/LoginForm.test.tsx
index d6cda2224..c1f15c208 100644
--- a/packages/ui-react/src/components/LoginForm/LoginForm.test.tsx
+++ b/packages/ui-react/src/components/LoginForm/LoginForm.test.tsx
@@ -69,8 +69,8 @@ describe('<LoginForm>', () => {
 
     await waitForWithFakeTimers();
 
-    expect(getByLabelText('login.email')).toHaveValue('myemail@email.com');
-    expect(getByLabelText('login.password')).toHaveValue('mypassword');
+    expect(getByLabelText('login.email', { exact: false })).toHaveValue('myemail@email.com');
+    expect(getByLabelText('login.password', { exact: false })).toHaveValue('mypassword');
   });
 
   test('sets the correct errors in the form fields', async () => {
@@ -167,8 +167,8 @@ describe('<LoginForm>', () => {
     );
 
     act(() => {
-      fireEvent.change(getByLabelText('login.email'), { target: { value: 'email' } });
-      fireEvent.change(getByLabelText('login.password'), { target: { value: 'password' } });
+      fireEvent.change(getByLabelText('login.email', { exact: false }), { target: { value: 'email' } });
+      fireEvent.change(getByLabelText('login.password', { exact: false }), { target: { value: 'password' } });
     });
 
     await waitForWithFakeTimers();
diff --git a/packages/ui-react/src/components/LoginForm/LoginForm.tsx b/packages/ui-react/src/components/LoginForm/LoginForm.tsx
index 3e36ab5bb..42a586471 100644
--- a/packages/ui-react/src/components/LoginForm/LoginForm.tsx
+++ b/packages/ui-react/src/components/LoginForm/LoginForm.tsx
@@ -10,7 +10,7 @@ import { simultaneousLoginWarningKey } from '@jwp/ott-common/src/constants';
 import Visibility from '@jwp/ott-theme/assets/icons/visibility.svg?react';
 import VisibilityOff from '@jwp/ott-theme/assets/icons/visibility_off.svg?react';
 
-import TextField from '../TextField/TextField';
+import TextField from '../form-fields/TextField/TextField';
 import Button from '../Button/Button';
 import Link from '../Link/Link';
 import IconButton from '../IconButton/IconButton';
diff --git a/packages/ui-react/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap b/packages/ui-react/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap
index 0628874b0..791901494 100644
--- a/packages/ui-react/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap
+++ b/packages/ui-react/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap
@@ -31,23 +31,29 @@ exports[`<LoginForm> > renders and matches snapshot 1`] = `
       login.sign_in
     </h2>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
       data-testid="login-email-input"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_email"
       >
         login.email
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_email"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="email"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_email"
           name="email"
           placeholder="login.email"
@@ -58,23 +64,29 @@ exports[`<LoginForm> > renders and matches snapshot 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b _rightControl_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
       data-testid="login-password-input"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_password"
       >
         login.password
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20 _rightControl_859b20"
       >
         <input
           aria-describedby="helper_text_1235_password"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="current-password"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_password"
           name="password"
           placeholder="login.password"
@@ -83,7 +95,7 @@ exports[`<LoginForm> > renders and matches snapshot 1`] = `
           value=""
         />
         <div
-          class="_control_e16c1b"
+          class="_control_859b20"
         >
           <button
             aria-label="login.view_password"
diff --git a/packages/ui-react/src/components/OfferSwitch/OfferSwitch.tsx b/packages/ui-react/src/components/OfferSwitch/OfferSwitch.tsx
index 9fbc7883e..3ced92a6e 100644
--- a/packages/ui-react/src/components/OfferSwitch/OfferSwitch.tsx
+++ b/packages/ui-react/src/components/OfferSwitch/OfferSwitch.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import type { Offer } from '@jwp/ott-common/types/checkout';
 import { formatLocalizedDate, formatPrice } from '@jwp/ott-common/src/utils/formatting';
 
-import Checkbox from '../Checkbox/Checkbox';
+import Checkbox from '../form-fields/Checkbox/Checkbox';
 
 import styles from './OfferSwitch.module.scss';
 
diff --git a/packages/ui-react/src/components/Payment/Payment.tsx b/packages/ui-react/src/components/Payment/Payment.tsx
index b209a7058..c276b0965 100644
--- a/packages/ui-react/src/components/Payment/Payment.tsx
+++ b/packages/ui-react/src/components/Payment/Payment.tsx
@@ -18,7 +18,7 @@ import Alert from '../Alert/Alert';
 import Button from '../Button/Button';
 import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
 import OfferSwitch from '../OfferSwitch/OfferSwitch';
-import TextField from '../TextField/TextField';
+import TextField from '../form-fields/TextField/TextField';
 import Icon from '../Icon/Icon';
 import { modalURLFromLocation } from '../../utils/location';
 
diff --git a/packages/ui-react/src/components/Payment/__snapshots__/Payment.test.tsx.snap b/packages/ui-react/src/components/Payment/__snapshots__/Payment.test.tsx.snap
index 57c66f0d5..1620f8f2e 100644
--- a/packages/ui-react/src/components/Payment/__snapshots__/Payment.test.tsx.snap
+++ b/packages/ui-react/src/components/Payment/__snapshots__/Payment.test.tsx.snap
@@ -19,10 +19,10 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
     </div>
     <div>
       <div
-        class="_textField_e16c1b"
+        class="_formField_86f2f5 _textField_c799b0"
       >
         <label
-          class="_label_e16c1b"
+          class="_label_86f2f5"
           for="text-field_1235_cardnumber"
         >
           user:payment.card_number
@@ -31,8 +31,9 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
           aria-describedby="helper_text_1235_cardnumber"
           aria-invalid="false"
           aria-label="user:payment.card_number_hidden"
+          aria-required="false"
           autocomplete="cc-number"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_cardnumber"
           name="cardNumber"
           readonly=""
@@ -44,10 +45,10 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
         class="_cardDetails_c57ff5"
       >
         <div
-          class="_textField_e16c1b"
+          class="_formField_86f2f5 _textField_c799b0"
         >
           <label
-            class="_label_e16c1b"
+            class="_label_86f2f5"
             for="text-field_1235_cardexpiry"
           >
             user:payment.expiry_date
@@ -55,8 +56,9 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
           <input
             aria-describedby="helper_text_1235_cardexpiry"
             aria-invalid="false"
+            aria-required="false"
             autocomplete="cc-exp"
-            class="_input_e16c1b"
+            class="_input_859b20"
             id="text-field_1235_cardexpiry"
             name="cardExpiry"
             readonly=""
@@ -65,10 +67,10 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
           />
         </div>
         <div
-          class="_textField_e16c1b"
+          class="_formField_86f2f5 _textField_c799b0"
         >
           <label
-            class="_label_e16c1b"
+            class="_label_86f2f5"
             for="text-field_1235_cardsecuritycode"
           >
             user:payment.security_code
@@ -77,8 +79,9 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
             aria-describedby="helper_text_1235_cardsecuritycode"
             aria-invalid="false"
             aria-label="user:payment.security_code_hidden"
+            aria-required="false"
             autocomplete="cc-csc"
-            class="_input_e16c1b"
+            class="_input_859b20"
             id="text-field_1235_cardsecuritycode"
             name="cardSecurityCode"
             readonly=""
diff --git a/packages/ui-react/src/components/PaymentForm/PaymentForm.tsx b/packages/ui-react/src/components/PaymentForm/PaymentForm.tsx
index 9d8092101..9d6220ebc 100644
--- a/packages/ui-react/src/components/PaymentForm/PaymentForm.tsx
+++ b/packages/ui-react/src/components/PaymentForm/PaymentForm.tsx
@@ -6,10 +6,10 @@ import useForm from '@jwp/ott-hooks-react/src/useForm';
 import { testId } from '@jwp/ott-common/src/utils/common';
 
 import Button from '../Button/Button';
-import CreditCardCVCField from '../CreditCardCVCField/CreditCardCVCField';
-import CreditCardExpiryField from '../CreditCardExpiryField/CreditCardExpiryField';
-import CreditCardNumberField from '../CreditCardNumberField/CreditCardNumberField';
-import TextField from '../TextField/TextField';
+import CreditCardCVCField from '../form-fields/CreditCardCVCField/CreditCardCVCField';
+import CreditCardExpiryField from '../form-fields/CreditCardExpiryField/CreditCardExpiryField';
+import CreditCardNumberField from '../form-fields/CreditCardNumberField/CreditCardNumberField';
+import TextField from '../form-fields/TextField/TextField';
 import FormFeedback from '../FormFeedback/FormFeedback';
 
 import styles from './PaymentForm.module.scss';
diff --git a/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx b/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
index f69cb6a33..74dfaf035 100644
--- a/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
+++ b/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
@@ -4,12 +4,12 @@ import type { CleengCaptureField, CleengCaptureQuestionField, PersonalDetailsFor
 import { testId } from '@jwp/ott-common/src/utils/common';
 import useForm, { type UseFormOnSubmitHandler } from '@jwp/ott-hooks-react/src/useForm';
 
-import TextField from '../TextField/TextField';
+import TextField from '../form-fields/TextField/TextField';
 import Button from '../Button/Button';
-import Dropdown from '../Dropdown/Dropdown';
-import Checkbox from '../Checkbox/Checkbox';
-import Radio from '../Radio/Radio';
-import DateField from '../DateField/DateField';
+import Dropdown from '../form-fields/Dropdown/Dropdown';
+import Checkbox from '../form-fields/Checkbox/Checkbox';
+import Radio from '../form-fields/Radio/Radio';
+import DateField from '../form-fields/DateField/DateField';
 import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
 import FormFeedback from '../FormFeedback/FormFeedback';
 
@@ -18,10 +18,12 @@ import styles from './PersonalDetailsForm.module.scss';
 type Props = {
   initialValues: PersonalDetailsFormData;
   onSubmit: UseFormOnSubmitHandler<PersonalDetailsFormData>;
+  onChange: React.ChangeEventHandler;
+  setValue: (key: keyof PersonalDetailsFormData, value: string) => void;
   error?: string;
   fields: Record<string, CleengCaptureField>;
   questions: CleengCaptureQuestionField[];
-  onQuestionChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  onQuestionChange: React.ChangeEventHandler;
   questionValues: Record<string, string>;
   questionErrors: Record<string, string>;
 };
@@ -63,11 +65,11 @@ const PersonalDetailsForm: React.FC<Props> = ({ initialValues, onSubmit, fields,
     if (values.length === 1 && values[0].value === '') {
       return <TextField value={questionValues[key]} label={question} {...props} />;
     } else if (values.length === 1) {
-      return <Checkbox checked={!!questionValues[key]} value={values[0].value} header={question} label={values[0].label} {...props} />;
+      return <Checkbox checked={!!questionValues[key]} value={values[0].value} label={question} checkboxLabel={values[0].label} {...props} />;
     } else if (values.length === 2) {
-      return <Radio values={values} value={questionValues[key]} header={question} {...props} />;
+      return <Radio values={values} value={questionValues[key]} label={question} {...props} />;
     } else if (values.length > 2) {
-      return <Dropdown options={values} value={questionValues[key]} label={question} defaultLabel={t('personal_details.select_answer')} {...props} fullWidth />;
+      return <Dropdown options={values} value={questionValues[key]} label={question} defaultLabel={t('personal_details.select_answer')} {...props} />;
     }
 
     return null;
diff --git a/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap b/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
index 902240880..2d871699b 100644
--- a/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
+++ b/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
@@ -12,22 +12,28 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       personal_details.title
     </h2>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_firstname"
       >
         personal_details.fist_name
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_firstname"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="given-name"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_firstname"
           name="firstName"
           placeholder="personal_details.fist_name"
@@ -38,22 +44,28 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_lastname"
       >
         personal_details.last_name
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_lastname"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="family-name"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_lastname"
           name="lastName"
           placeholder="personal_details.last_name"
@@ -64,25 +76,23 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_companyname"
       >
         personal_details.company_name
-        <span>
-          optional
-        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_companyname"
           aria-invalid="false"
+          aria-required="false"
           autocomplete="organization"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_companyname"
           name="companyName"
           placeholder="personal_details.company_name"
@@ -92,22 +102,28 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_address"
       >
         personal_details.address
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_address"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="address-line1"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_address"
           name="address"
           placeholder="personal_details.address"
@@ -118,25 +134,23 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_address2"
       >
         personal_details.address2
-        <span>
-          optional
-        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_address2"
           aria-invalid="false"
+          aria-required="false"
           autocomplete="address-line2"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_address2"
           name="address2"
           placeholder="personal_details.address2"
@@ -146,22 +160,28 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_city"
       >
         personal_details.city
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_city"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="address-level2"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_city"
           name="city"
           placeholder="personal_details.city"
@@ -172,22 +192,28 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_state"
       >
         personal_details.state
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_state"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="address-level1"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_state"
           name="state"
           placeholder="personal_details.state"
@@ -198,22 +224,28 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_postcode"
       >
         personal_details.post_code
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_postcode"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="postal-code"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_postcode"
           name="postCode"
           placeholder="personal_details.post_code"
@@ -224,21 +256,27 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_phonenumber"
       >
         personal_details.phone_number
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_phonenumber"
           aria-invalid="false"
-          class="_input_e16c1b"
+          aria-required="true"
+          class="_input_859b20"
           id="text-field_1235_phonenumber"
           name="phoneNumber"
           placeholder="personal_details.phone_number"
@@ -249,28 +287,32 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       </div>
     </div>
     <div
-      class="_dateField_eb6974"
-      id="text-field_1235_birthdate"
+      class="_formField_86f2f5 _dateField_0addad"
     >
       <label
-        class="_label_eb6974"
+        class="_label_86f2f5"
         for="text-field_1235_birthdate"
       >
         personal_details.birth_date
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_eb6974"
+        class="_container_0addad"
       >
         <input
           aria-describedby="helper_text_1235_birthdate"
           aria-invalid="false"
-          class="_hiddenInput_eb6974"
+          class="_hiddenInput_0addad"
           id="text-field_1235_birthdate-hidden"
           name="birthDate"
         />
         <input
           autocomplete="bday-day"
-          class="_input_eb6974"
+          class="_input_0addad"
           id="text-field_1235_birthdate-date"
           maxlength="2"
           name="date"
@@ -278,10 +320,10 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
           type="number"
           value="27"
         />
-         / 
+         /
         <input
           autocomplete="bday-month"
-          class="_input_eb6974"
+          class="_input_0addad"
           id="text-field_1235_birthdate-month"
           maxlength="2"
           name="month"
@@ -289,10 +331,10 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
           type="number"
           value="2"
         />
-         / 
+         /
         <input
           autocomplete="bday-year"
-          class="_input_eb6974"
+          class="_input_0addad"
           id="text-field_1235_birthdate-year"
           maxlength="4"
           name="year"
@@ -303,46 +345,52 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       </div>
     </div>
     <div
-      class="_container_bb73c6 _fullWidth_bb73c6 _error_bb73c6 _medium_bb73c6"
+      class="_formField_86f2f5"
     >
       <label
-        class="_label_bb73c6"
-        for="1235"
+        class="_label_86f2f5"
+        for="text-field_1235_key1"
       >
         Which number is 2?
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_dropdown_bb73c6 _fullWidth_bb73c6"
+        class="_container_d97916 _error_d97916"
       >
         <select
           aria-describedby="helper_text_1235_key1"
           aria-invalid="true"
           aria-required="true"
-          class="_select_bb73c6"
-          id="1235"
+          class="_select_d97916"
+          id="text-field_1235_key1"
           name="key1"
+          required=""
         >
           <option
-            class="_option_bb73c6"
+            class="_option_d97916"
             disabled=""
             value=""
           >
             personal_details.select_answer
           </option>
           <option
-            class="_option_bb73c6"
+            class="_option_d97916"
             value="1"
           >
             1
           </option>
           <option
-            class="_option_bb73c6"
+            class="_option_d97916"
             value="2"
           >
             2
           </option>
           <option
-            class="_option_bb73c6"
+            class="_option_d97916"
             value="3"
           >
             3
@@ -356,92 +404,98 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         question 1 is invalid
       </div>
     </div>
-    <div>
+    <div
+      class="_formField_86f2f5"
+    >
       <label
-        class="_header_d50e6e"
-        data-testid="radio-header"
-        for="radio_1235_key2"
+        class="_label_86f2f5"
+        for="text-field_1235_key2"
       >
-        <span>
-          Is this a question?
-        </span>
-        <span
-          class="_note_d50e6e"
-        >
-          optional
-        </span>
+        Is this a question?
       </label>
       <div
-        class="_radio_d50e6e"
+        id="text-field_1235_key2"
       >
-        <input
-          id="radio_1235_key20"
-          name="key2"
-          type="radio"
-          value="Yes"
-        />
-        <label
-          for="radio_1235_key20"
+        <div
+          class="_radio_854545 _error_854545"
         >
-          Yes
-        </label>
-      </div>
-      <div
-        class="_radio_d50e6e"
-      >
-        <input
-          checked=""
-          id="radio_1235_key21"
-          name="key2"
-          type="radio"
-          value="No"
-        />
-        <label
-          for="radio_1235_key21"
+          <input
+            aria-describedby="helper_text_1235_key2"
+            id="text-field_1235_key20"
+            name="key2"
+            type="radio"
+            value="Yes"
+          />
+          <label
+            for="text-field_1235_key20"
+          >
+            Yes
+          </label>
+        </div>
+        <div
+          class="_radio_854545 _error_854545"
         >
-          No
-        </label>
+          <input
+            aria-describedby="helper_text_1235_key2"
+            checked=""
+            id="text-field_1235_key21"
+            name="key2"
+            type="radio"
+            value="No"
+          />
+          <label
+            for="text-field_1235_key21"
+          >
+            No
+          </label>
+        </div>
       </div>
       <div
         class="_helperText_da58e0 _error_da58e0"
-        id="helper_text_1235"
+        id="helper_text_1235_key2"
       >
         Invalid answer
       </div>
     </div>
     <div
-      class="_checkbox_531f07 _error_531f07"
+      class="_formField_86f2f5 _checkbox_a98c3a _error_a98c3a"
     >
-      <div
-        class="_header_531f07"
+      <label
+        class="_label_86f2f5"
+        for="text-field_1235_ccc"
       >
         Check this off.
-      </div>
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
+      </label>
       <div
-        class="_row_531f07"
+        class="_row_a98c3a"
       >
         <input
           aria-describedby="helper_text_1235_ccc"
           aria-required="true"
           checked=""
-          id="check-box_1235_ccc"
+          id="text-field_1235_ccc"
           name="ccc"
           type="checkbox"
           value="CheckMe"
         />
         <label
-          for="check-box_1235_ccc"
+          for="text-field_1235_ccc"
         >
           <span
-            aria-hidden="true"
+            role="presentation"
           >
-            * 
+            *
           </span>
           CheckMe
         </label>
       </div>
       <div
-        class="_helperText_da58e0 _error_da58e0 _helperTextError_531f07"
+        class="_helperText_da58e0 _error_da58e0"
         id="helper_text_1235_ccc"
       >
         No way Jose
@@ -472,22 +526,28 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
       personal_details.title
     </h2>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_firstname"
       >
         personal_details.fist_name
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_firstname"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="given-name"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_firstname"
           name="firstName"
           placeholder="personal_details.fist_name"
@@ -498,22 +558,28 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_lastname"
       >
         personal_details.last_name
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_lastname"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="family-name"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_lastname"
           name="lastName"
           placeholder="personal_details.last_name"
@@ -524,25 +590,23 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_companyname"
       >
         personal_details.company_name
-        <span>
-          optional
-        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_companyname"
           aria-invalid="false"
+          aria-required="false"
           autocomplete="organization"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_companyname"
           name="companyName"
           placeholder="personal_details.company_name"
@@ -552,22 +616,28 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_address"
       >
         personal_details.address
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_address"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="address-line1"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_address"
           name="address"
           placeholder="personal_details.address"
@@ -578,25 +648,23 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_address2"
       >
         personal_details.address2
-        <span>
-          optional
-        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_address2"
           aria-invalid="false"
+          aria-required="false"
           autocomplete="address-line2"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_address2"
           name="address2"
           placeholder="personal_details.address2"
@@ -606,22 +674,28 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_city"
       >
         personal_details.city
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_city"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="address-level2"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_city"
           name="city"
           placeholder="personal_details.city"
@@ -632,22 +706,28 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_state"
       >
         personal_details.state
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_state"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="address-level1"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_state"
           name="state"
           placeholder="personal_details.state"
@@ -658,22 +738,28 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_postcode"
       >
         personal_details.post_code
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_postcode"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="postal-code"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_postcode"
           name="postCode"
           placeholder="personal_details.post_code"
@@ -684,21 +770,27 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_phonenumber"
       >
         personal_details.phone_number
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_phonenumber"
           aria-invalid="false"
-          class="_input_e16c1b"
+          aria-required="true"
+          class="_input_859b20"
           id="text-field_1235_phonenumber"
           name="phoneNumber"
           placeholder="personal_details.phone_number"
@@ -709,28 +801,32 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
       </div>
     </div>
     <div
-      class="_dateField_eb6974"
-      id="text-field_1235_birthdate"
+      class="_formField_86f2f5 _dateField_0addad"
     >
       <label
-        class="_label_eb6974"
+        class="_label_86f2f5"
         for="text-field_1235_birthdate"
       >
         personal_details.birth_date
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_eb6974"
+        class="_container_0addad"
       >
         <input
           aria-describedby="helper_text_1235_birthdate"
           aria-invalid="false"
-          class="_hiddenInput_eb6974"
+          class="_hiddenInput_0addad"
           id="text-field_1235_birthdate-hidden"
           name="birthDate"
         />
         <input
           autocomplete="bday-day"
-          class="_input_eb6974"
+          class="_input_0addad"
           id="text-field_1235_birthdate-date"
           maxlength="2"
           name="date"
@@ -738,10 +834,10 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
           type="number"
           value="27"
         />
-         / 
+         /
         <input
           autocomplete="bday-month"
-          class="_input_eb6974"
+          class="_input_0addad"
           id="text-field_1235_birthdate-month"
           maxlength="2"
           name="month"
@@ -749,10 +845,10 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
           type="number"
           value="2"
         />
-         / 
+         /
         <input
           autocomplete="bday-year"
-          class="_input_eb6974"
+          class="_input_0addad"
           id="text-field_1235_birthdate-year"
           maxlength="4"
           name="year"
@@ -763,46 +859,52 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
       </div>
     </div>
     <div
-      class="_container_bb73c6 _fullWidth_bb73c6 _medium_bb73c6"
+      class="_formField_86f2f5"
     >
       <label
-        class="_label_bb73c6"
-        for="1235"
+        class="_label_86f2f5"
+        for="text-field_1235_key1"
       >
         Which number is 2?
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_dropdown_bb73c6 _fullWidth_bb73c6"
+        class="_container_d97916"
       >
         <select
           aria-describedby="helper_text_1235_key1"
           aria-invalid="false"
           aria-required="true"
-          class="_select_bb73c6"
-          id="1235"
+          class="_select_d97916"
+          id="text-field_1235_key1"
           name="key1"
+          required=""
         >
           <option
-            class="_option_bb73c6"
+            class="_option_d97916"
             disabled=""
             value=""
           >
             personal_details.select_answer
           </option>
           <option
-            class="_option_bb73c6"
+            class="_option_d97916"
             value="1"
           >
             1
           </option>
           <option
-            class="_option_bb73c6"
+            class="_option_d97916"
             value="2"
           >
             2
           </option>
           <option
-            class="_option_bb73c6"
+            class="_option_d97916"
             value="3"
           >
             3
@@ -810,80 +912,86 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
         </select>
       </div>
     </div>
-    <div>
+    <div
+      class="_formField_86f2f5"
+    >
       <label
-        class="_header_d50e6e"
-        data-testid="radio-header"
-        for="radio_1235_key2"
+        class="_label_86f2f5"
+        for="text-field_1235_key2"
       >
-        <span>
-          Is this a question?
-        </span>
-        <span
-          class="_note_d50e6e"
-        >
-          optional
-        </span>
+        Is this a question?
       </label>
       <div
-        class="_radio_d50e6e"
+        id="text-field_1235_key2"
       >
-        <input
-          id="radio_1235_key20"
-          name="key2"
-          type="radio"
-          value="Yes"
-        />
-        <label
-          for="radio_1235_key20"
+        <div
+          class="_radio_854545"
         >
-          Yes
-        </label>
-      </div>
-      <div
-        class="_radio_d50e6e"
-      >
-        <input
-          checked=""
-          id="radio_1235_key21"
-          name="key2"
-          type="radio"
-          value="No"
-        />
-        <label
-          for="radio_1235_key21"
+          <input
+            aria-describedby="helper_text_1235_key2"
+            id="text-field_1235_key20"
+            name="key2"
+            type="radio"
+            value="Yes"
+          />
+          <label
+            for="text-field_1235_key20"
+          >
+            Yes
+          </label>
+        </div>
+        <div
+          class="_radio_854545"
         >
-          No
-        </label>
+          <input
+            aria-describedby="helper_text_1235_key2"
+            checked=""
+            id="text-field_1235_key21"
+            name="key2"
+            type="radio"
+            value="No"
+          />
+          <label
+            for="text-field_1235_key21"
+          >
+            No
+          </label>
+        </div>
       </div>
     </div>
     <div
-      class="_checkbox_531f07"
+      class="_formField_86f2f5 _checkbox_a98c3a"
     >
-      <div
-        class="_header_531f07"
+      <label
+        class="_label_86f2f5"
+        for="text-field_1235_ccc"
       >
         Check this off.
-      </div>
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
+      </label>
       <div
-        class="_row_531f07"
+        class="_row_a98c3a"
       >
         <input
           aria-describedby="helper_text_1235_ccc"
           aria-required="true"
           checked=""
-          id="check-box_1235_ccc"
+          id="text-field_1235_ccc"
           name="ccc"
           type="checkbox"
           value="CheckMe"
         />
         <label
-          for="check-box_1235_ccc"
+          for="text-field_1235_ccc"
         >
           <span
-            aria-hidden="true"
+            role="presentation"
           >
-            * 
+            *
           </span>
           CheckMe
         </label>
diff --git a/packages/ui-react/src/components/Radio/Radio.tsx b/packages/ui-react/src/components/Radio/Radio.tsx
deleted file mode 100644
index 9e7c06739..000000000
--- a/packages/ui-react/src/components/Radio/Radio.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, { type ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
-import useOpaqueId from '@jwp/ott-hooks-react/src/useOpaqueId';
-
-import HelperText from '../HelperText/HelperText';
-
-import styles from './Radio.module.scss';
-
-type Props = {
-  name: string;
-  value?: string;
-  values: { value: string; label: string }[];
-  onChange: React.ChangeEventHandler<HTMLInputElement>;
-  header?: ReactNode;
-  helperText?: string;
-  error?: boolean;
-  required?: boolean;
-  disabled?: boolean;
-  lang?: string;
-};
-
-const Radio: React.FC<Props> = ({ name, onChange, header, value, values, helperText, error, required, disabled, lang, ...rest }: Props) => {
-  const { t } = useTranslation('common');
-  const id = useOpaqueId('radio', name);
-
-  return (
-    <div className={error ? styles.error : undefined} {...rest}>
-      {header || !required ? (
-        <label className={styles.header} htmlFor={id} data-testid="radio-header">
-          <span lang={lang}>{header}</span>
-          {!required ? <span className={styles.note}>{t('optional')}</span> : null}
-        </label>
-      ) : null}
-      {values.map(({ value: optionValue, label: optionLabel }, index) => (
-        <div className={styles.radio} key={index} lang={lang}>
-          <input
-            value={optionValue}
-            name={name}
-            type="radio"
-            id={id + index}
-            onChange={onChange}
-            checked={value === optionValue}
-            required={required}
-            disabled={disabled}
-          />
-          <label htmlFor={id + index}>{optionLabel}</label>
-        </div>
-      ))}
-      <HelperText error={error}>{helperText}</HelperText>
-    </div>
-  );
-};
-
-export default Radio;
diff --git a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx
index 85c6d943f..314584c51 100644
--- a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx
+++ b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx
@@ -6,22 +6,17 @@ import type { FormErrors } from '@jwp/ott-common/types/form';
 import type { CustomFormField, RegistrationFormData } from '@jwp/ott-common/types/account';
 import { testId } from '@jwp/ott-common/src/utils/common';
 import type { SocialLoginURLs } from '@jwp/ott-hooks-react/src/useSocialLoginUrls';
-import useToggle from '@jwp/ott-hooks-react/src/useToggle';
-import Visibility from '@jwp/ott-theme/assets/icons/visibility.svg?react';
-import VisibilityOff from '@jwp/ott-theme/assets/icons/visibility_off.svg?react';
 import env from '@jwp/ott-common/src/env';
 
-import TextField from '../TextField/TextField';
+import TextField from '../form-fields/TextField/TextField';
 import Button from '../Button/Button';
-import IconButton from '../IconButton/IconButton';
-import PasswordStrength from '../PasswordStrength/PasswordStrength';
 import CustomRegisterField from '../CustomRegisterField/CustomRegisterField';
 import FormFeedback from '../FormFeedback/FormFeedback';
 import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
 import Link from '../Link/Link';
-import Icon from '../Icon/Icon';
 import { modalURLFromLocation } from '../../utils/location';
 import SocialButtonsList from '../SocialButtonsList/SocialButtonsList';
+import PasswordField from '../form-fields/PasswordField/PasswordField';
 
 import styles from './RegistrationForm.module.scss';
 
@@ -56,8 +51,6 @@ const RegistrationForm: React.FC<Props> = ({
   consentErrors,
   socialLoginURLs,
 }: Props) => {
-  const [viewPassword, toggleViewPassword] = useToggle();
-
   const { t, i18n } = useTranslation('account');
   const location = useLocation();
 
@@ -106,26 +99,14 @@ const RegistrationForm: React.FC<Props> = ({
         autoComplete="email"
         required
       />
-      <TextField
+      <PasswordField
         value={values.password}
         onChange={onChange}
         onBlur={onBlur}
         label={t('registration.password')}
         placeholder={t('registration.password')}
         error={!!errors.password}
-        helperText={
-          <React.Fragment>
-            <PasswordStrength password={values.password} />
-            {t('registration.password_helper_text')}
-          </React.Fragment>
-        }
         name="password"
-        type={viewPassword ? 'text' : 'password'}
-        rightControl={
-          <IconButton aria-label={t('registration.view_password')} onClick={() => toggleViewPassword()} aria-pressed={viewPassword}>
-            <Icon icon={viewPassword ? Visibility : VisibilityOff} />
-          </IconButton>
-        }
         autoComplete="new-password"
         required
       />
diff --git a/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap b/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
index 19b8ab12a..71044a889 100644
--- a/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
+++ b/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
@@ -32,22 +32,28 @@ exports[`<RegistrationForm> > renders and matches snapshot 1`] = `
       registration.sign_up
     </h2>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_email"
       >
         registration.email
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_email"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="email"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_email"
           name="email"
           placeholder="registration.email"
@@ -58,22 +64,28 @@ exports[`<RegistrationForm> > renders and matches snapshot 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b _rightControl_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_password"
       >
         registration.password
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20 _rightControl_859b20"
       >
         <input
           aria-describedby="helper_text_1235_password"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="new-password"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_password"
           name="password"
           placeholder="registration.password"
@@ -82,10 +94,10 @@ exports[`<RegistrationForm> > renders and matches snapshot 1`] = `
           value=""
         />
         <div
-          class="_control_e16c1b"
+          class="_control_859b20"
         >
           <button
-            aria-label="registration.view_password"
+            aria-label="reset.view_password"
             aria-pressed="false"
             class="_iconButton_0fef65"
             type="button"
@@ -107,7 +119,7 @@ exports[`<RegistrationForm> > renders and matches snapshot 1`] = `
         class="_helperText_da58e0"
         id="helper_text_1235_password"
       >
-        registration.password_helper_text
+        reset.password_helper_text
       </div>
     </div>
     <button
@@ -123,7 +135,7 @@ exports[`<RegistrationForm> > renders and matches snapshot 1`] = `
       class="_bottom_a472a0"
     >
       registration.already_account
-       
+
       <a
         class="_link_a14c64"
         href="/?u=login"
diff --git a/packages/ui-react/src/components/Dropdown/Dropdown.module.scss b/packages/ui-react/src/components/Select/Select.module.scss
similarity index 55%
rename from packages/ui-react/src/components/Dropdown/Dropdown.module.scss
rename to packages/ui-react/src/components/Select/Select.module.scss
index 3dc8a7ce7..deb8e3366 100644
--- a/packages/ui-react/src/components/Dropdown/Dropdown.module.scss
+++ b/packages/ui-react/src/components/Select/Select.module.scss
@@ -10,45 +10,10 @@ $disabled-bg-color: #eee;
 $disabled-gradient: linear-gradient(to top, #ddd, $disabled-bg-color 33%);
 
 .container {
-  width: 100%;
-  margin-bottom: 8px;
-
-  &.error {
-    .dropdown {
-      border-color: theme.$text-field-error-color;
-    }
-  }
-
-  &.medium {
-    .dropdown {
-      height: 48px;
-    }
-
-    .select {
-      height: 46px;
-      padding: 14px 16px;
-    }
-  }
-}
-
-.label {
-  display: block;
-  margin-bottom: 4px;
-  font-weight: var(--body-font-weight-bold);
-  text-align: left;
-
-  > span {
-    float: right;
-    color: rgba(variables.$white, 0.7);
-    font-weight: normal;
-  }
-}
-
-.dropdown {
   position: relative;
   display: grid;
   align-items: center;
-  width: 140px;
+  width: 100%;
   height: 36px;
   font-size: 1.25rem;
   background-color: rgba(0, 0, 0, 0.54);
@@ -71,33 +36,16 @@ $disabled-gradient: linear-gradient(to top, #ddd, $disabled-bg-color 33%);
     justify-self: end;
   }
 
-  &.fullWidth {
-    width: 100%;
-    margin-left: initial;
+  &.error {
+    border-color: theme.$text-field-error-color;
   }
 
-  .select {
-    z-index: 1;
-    width: 100%;
-    height: 36px;
-    margin: 0;
-    padding: 2px 8px;
-    color: variables.$white;
-    font-family: inherit;
-    font-weight: theme.$body-font-weight-bold;
-    font-size: 1rem;
-    line-height: variables.$base-line-height;
-    text-overflow: ellipsis;
-    background: none;
-    border: none;
-    outline: none;
-    cursor: inherit;
-    -webkit-appearance: none; /* stylelint-disable-line */
-    appearance: none;
+  &.medium {
+    height: 48px;
 
-    // Remove IE arrow
-    &::-ms-expand {
-      display: none;
+    .select {
+      height: 46px;
+      padding: 14px 16px;
     }
   }
 
@@ -106,16 +54,41 @@ $disabled-gradient: linear-gradient(to top, #ddd, $disabled-bg-color 33%);
     grid-area: select;
   }
 
-  & .disabled {
-    background-color: $disabled-bg-color;
-    background-image: $disabled-gradient;
+  &.disabled {
     cursor: not-allowed;
   }
 
   &:hover,
   &:focus-within {
-    border-color: $select-focus;
-    outline: none;
+    &:not(.disabled) {
+      border-color: $select-focus;
+      outline: none;
+    }
+  }
+}
+
+.select {
+  z-index: 1;
+  width: 100%;
+  height: 36px;
+  margin: 0;
+  padding: 2px 8px;
+  color: variables.$white;
+  font-family: inherit;
+  font-weight: theme.$body-font-weight-bold;
+  font-size: 1rem;
+  line-height: variables.$base-line-height;
+  text-overflow: ellipsis;
+  background: none;
+  border: none;
+  outline: none;
+  cursor: inherit;
+  -webkit-appearance: none; /* stylelint-disable-line */
+  appearance: none;
+
+  // Remove IE arrow
+  &::-ms-expand {
+    display: none;
   }
 }
 
diff --git a/packages/ui-react/src/components/Select/Select.tsx b/packages/ui-react/src/components/Select/Select.tsx
new file mode 100644
index 000000000..b6a740793
--- /dev/null
+++ b/packages/ui-react/src/components/Select/Select.tsx
@@ -0,0 +1,93 @@
+import React, { type InputHTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+import type { FormControlProps } from '../../types/form';
+
+import styles from './Select.module.scss';
+
+type HTMLSelectProps = Omit<InputHTMLAttributes<HTMLSelectElement>, 'size'>;
+
+type Props = HTMLSelectProps & {
+  id?: string;
+  helperTextId?: string;
+  options?: (string | { value: string; label: string })[];
+  optionsStyle?: string;
+  defaultLabel?: string;
+} & FormControlProps;
+
+const Select = ({
+  required,
+  className,
+  disabled,
+  defaultLabel,
+  options,
+  optionsStyle,
+  editing = true,
+  value,
+  onChange,
+  id,
+  name,
+  error,
+  helperTextId,
+  type,
+  ...rest
+}: Props) => {
+  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    if (!editing) {
+      return event.preventDefault();
+    }
+    onChange?.(event);
+  };
+
+  // Default to 'text' if 'type' property is absent, which occurs in textareas.
+  const containerClassName = classNames(
+    styles.container,
+    {
+      [styles.error]: error,
+      [styles.disabled]: disabled,
+    },
+    className,
+  );
+
+  const ariaAttributes = {
+    'aria-required': !!required,
+    'aria-invalid': Boolean(required && error && value !== ''),
+    'aria-describedby': helperTextId,
+  } as const;
+
+  const inputProps: HTMLSelectProps = {
+    id,
+    name,
+    value,
+    disabled,
+    className: styles.select,
+    readOnly: !editing,
+    required: required,
+    ...ariaAttributes,
+    ...rest,
+  };
+
+  return (
+    <div className={classNames({ [containerClassName]: editing })}>
+      <select {...inputProps} onChange={handleChange}>
+        {defaultLabel && (
+          <option className={classNames(styles.option, optionsStyle)} value="" disabled={required}>
+            {defaultLabel}
+          </option>
+        )}
+        {options &&
+          options.map((option) => (
+            <option
+              className={classNames(styles.option, optionsStyle)}
+              key={typeof option === 'string' ? option : option.value}
+              value={typeof option === 'string' ? option : option.value}
+            >
+              {typeof option === 'string' ? option : option.label}
+            </option>
+          ))}
+      </select>
+    </div>
+  );
+};
+
+export default Select;
diff --git a/packages/ui-react/src/components/Checkbox/Checkbox.module.scss b/packages/ui-react/src/components/form-fields/Checkbox/Checkbox.module.scss
similarity index 81%
rename from packages/ui-react/src/components/Checkbox/Checkbox.module.scss
rename to packages/ui-react/src/components/form-fields/Checkbox/Checkbox.module.scss
index 8f8491a28..8bd161386 100644
--- a/packages/ui-react/src/components/Checkbox/Checkbox.module.scss
+++ b/packages/ui-react/src/components/form-fields/Checkbox/Checkbox.module.scss
@@ -9,6 +9,10 @@
     font-size: 14px;
     cursor: pointer;
 
+    > span {
+      margin-right: 4px;
+    }
+
     a {
       color: variables.$white;
       font-weight: var(--body-font-weight-bold);
@@ -24,20 +28,6 @@
     }
   }
 
-  .header {
-    display: inline-block;
-    width: 100%;
-    margin-bottom: 8px;
-    font-weight: var(--body-font-weight-bold);
-    text-align: left;
-
-    > span {
-      float: right;
-      color: rgba(variables.$white, 0.7);
-      font-weight: normal;
-    }
-  }
-
   input {
     display: inline-flex;
     flex-shrink: 0;
@@ -77,7 +67,7 @@
 
     &:not(:checked) {
       border: 2px solid theme.$input-resting-border-color;
-      &:hover {
+      &:hover:not(:disabled) {
         border-color: theme.$input-hover-border-color;
       }
     }
@@ -96,10 +86,3 @@
   display: flex;
   align-items: center;
 }
-
-.helperTextError {
-  margin-top: -5px;
-  margin-left: 35px;
-  color: theme.$text-field-error-color;
-  font-size: 10px;
-}
diff --git a/packages/ui-react/src/components/form-fields/Checkbox/Checkbox.test.tsx b/packages/ui-react/src/components/form-fields/Checkbox/Checkbox.test.tsx
new file mode 100644
index 000000000..ed2d6f7ba
--- /dev/null
+++ b/packages/ui-react/src/components/form-fields/Checkbox/Checkbox.test.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Checkbox from './Checkbox';
+
+describe('<Checkbox>', () => {
+  test('renders and matches snapshot', () => {
+    const { container } = render(<Checkbox checkboxLabel="label" name="name" value="value" onChange={vi.fn()} />);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  test('should set the checked state', () => {
+    const { getByLabelText } = render(<Checkbox checkboxLabel="label" name="name" value="value" checked={true} onChange={vi.fn()} />);
+
+    expect(getByLabelText('label')).toBeChecked();
+  });
+
+  test('should mark when required ', () => {
+    const { getByText } = render(<Checkbox checkboxLabel="label" name="name" value="value" checked={true} onChange={vi.fn()} required />);
+
+    expect(getByText('*')).toBeVisible();
+  });
+});
diff --git a/packages/ui-react/src/components/form-fields/Checkbox/Checkbox.tsx b/packages/ui-react/src/components/form-fields/Checkbox/Checkbox.tsx
new file mode 100644
index 000000000..816382c58
--- /dev/null
+++ b/packages/ui-react/src/components/form-fields/Checkbox/Checkbox.tsx
@@ -0,0 +1,71 @@
+import React, { type InputHTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+import { FormField } from '../../FormField/FormField';
+import type { FormControlProps } from '../../../types/form';
+
+import styles from './Checkbox.module.scss';
+
+type HTMLCheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+
+type Props = HTMLCheckboxProps & {
+  checkboxLabel?: React.ReactNode;
+  helperText?: React.ReactNode;
+} & FormControlProps;
+
+const Checkbox: React.FC<Props> = ({
+  className,
+  label,
+  checkboxLabel,
+  name,
+  onChange,
+  editing = true,
+  value,
+  helperText,
+  error,
+  required,
+  lang,
+  size,
+  ...rest
+}) => {
+  const fieldClassName = classNames(styles.checkbox, { [styles.error]: error }, className);
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+    if (!editing) {
+      return event.preventDefault();
+    }
+    onChange?.(event);
+  };
+
+  return (
+    <FormField
+      className={fieldClassName}
+      name={name}
+      label={label}
+      editing={editing}
+      required={required}
+      error={error}
+      helperText={helperText}
+      renderInput={({ id, helperTextId }) => (
+        <div className={styles.row}>
+          <input
+            name={name}
+            type="checkbox"
+            id={id}
+            value={value}
+            aria-required={required}
+            aria-describedby={helperTextId}
+            {...rest}
+            onChange={handleChange}
+            readOnly={!editing}
+          />
+          <label htmlFor={id} lang={lang}>
+            {required ? <span role="presentation">*</span> : ''}
+            {checkboxLabel}
+          </label>
+        </div>
+      )}
+    />
+  );
+};
+
+export default Checkbox;
diff --git a/packages/ui-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/ui-react/src/components/form-fields/Checkbox/__snapshots__/Checkbox.test.tsx.snap
similarity index 67%
rename from packages/ui-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
rename to packages/ui-react/src/components/form-fields/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index dbf01ce28..07d166cc5 100644
--- a/packages/ui-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/packages/ui-react/src/components/form-fields/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -3,24 +3,21 @@
 exports[`<Checkbox> > renders and matches snapshot 1`] = `
 <div>
   <div
-    class="_checkbox_531f07"
+    class="_formField_86f2f5 _checkbox_a98c3a"
   >
     <div
-      class="_row_531f07"
+      class="_row_a98c3a"
     >
       <input
         aria-describedby="helper_text_1235_name"
-        id="check-box_1235_name"
+        id="text-field_1235_name"
         name="name"
         type="checkbox"
         value="value"
       />
       <label
-        for="check-box_1235_name"
+        for="text-field_1235_name"
       >
-        <span
-          aria-hidden="true"
-        />
         label
       </label>
     </div>
diff --git a/packages/ui-react/src/components/CreditCardCVCField/CreditCardCVCField.test.tsx b/packages/ui-react/src/components/form-fields/CreditCardCVCField/CreditCardCVCField.test.tsx
similarity index 100%
rename from packages/ui-react/src/components/CreditCardCVCField/CreditCardCVCField.test.tsx
rename to packages/ui-react/src/components/form-fields/CreditCardCVCField/CreditCardCVCField.test.tsx
diff --git a/packages/ui-react/src/components/CreditCardCVCField/CreditCardCVCField.tsx b/packages/ui-react/src/components/form-fields/CreditCardCVCField/CreditCardCVCField.tsx
similarity index 100%
rename from packages/ui-react/src/components/CreditCardCVCField/CreditCardCVCField.tsx
rename to packages/ui-react/src/components/form-fields/CreditCardCVCField/CreditCardCVCField.tsx
diff --git a/packages/ui-react/src/components/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap b/packages/ui-react/src/components/form-fields/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap
similarity index 70%
rename from packages/ui-react/src/components/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap
rename to packages/ui-react/src/components/form-fields/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap
index b8a970262..3d13971c5 100644
--- a/packages/ui-react/src/components/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap
+++ b/packages/ui-react/src/components/form-fields/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap
@@ -3,23 +3,29 @@
 exports[`<CreditCardCVCField> > renders and matches snapshot 1`] = `
 <div>
   <div
-    class="_textField_e16c1b directPostSecurityCode"
+    class="_formField_86f2f5 _textField_c799b0 directPostSecurityCode"
   >
     <label
-      class="_label_e16c1b"
+      class="_label_86f2f5"
       for="text-field_1235_cardcvc"
     >
       payment.security_code
+      <span
+        aria-hidden="true"
+      >
+        *
+      </span>
     </label>
     <div
-      class="_container_e16c1b"
+      class="_container_859b20"
     >
       <input
         aria-describedby="helper_text_1235_cardcvc"
         aria-invalid="false"
         aria-label="payment.security_code"
+        aria-required="true"
         autocomplete="cc-csc"
-        class="_input_e16c1b"
+        class="_input_859b20"
         id="text-field_1235_cardcvc"
         name="cardCVC"
         pattern="\\d*"
diff --git a/packages/ui-react/src/components/CreditCardExpiryField/CreditCardExpiryField.test.tsx b/packages/ui-react/src/components/form-fields/CreditCardExpiryField/CreditCardExpiryField.test.tsx
similarity index 100%
rename from packages/ui-react/src/components/CreditCardExpiryField/CreditCardExpiryField.test.tsx
rename to packages/ui-react/src/components/form-fields/CreditCardExpiryField/CreditCardExpiryField.test.tsx
diff --git a/packages/ui-react/src/components/CreditCardExpiryField/CreditCardExpiryField.tsx b/packages/ui-react/src/components/form-fields/CreditCardExpiryField/CreditCardExpiryField.tsx
similarity index 100%
rename from packages/ui-react/src/components/CreditCardExpiryField/CreditCardExpiryField.tsx
rename to packages/ui-react/src/components/form-fields/CreditCardExpiryField/CreditCardExpiryField.tsx
diff --git a/packages/ui-react/src/components/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap b/packages/ui-react/src/components/form-fields/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap
similarity index 69%
rename from packages/ui-react/src/components/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap
rename to packages/ui-react/src/components/form-fields/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap
index 04274f67f..c73763e68 100644
--- a/packages/ui-react/src/components/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap
+++ b/packages/ui-react/src/components/form-fields/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap
@@ -3,22 +3,28 @@
 exports[`<CreditCardExpiryField> > renders and matches snapshot 1`] = `
 <div>
   <div
-    class="_textField_e16c1b directPostExpiryDate"
+    class="_formField_86f2f5 _textField_c799b0 directPostExpiryDate"
   >
     <label
-      class="_label_e16c1b"
+      class="_label_86f2f5"
       for="text-field_1235_cardexpiry"
     >
       Expiry date
+      <span
+        aria-hidden="true"
+      >
+        *
+      </span>
     </label>
     <div
-      class="_container_e16c1b"
+      class="_container_859b20"
     >
       <input
         aria-describedby="helper_text_1235_cardexpiry"
         aria-invalid="false"
+        aria-required="true"
         autocomplete="cc-exp"
-        class="_input_e16c1b"
+        class="_input_859b20"
         id="text-field_1235_cardexpiry"
         name="cardExpiry"
         pattern="\\d*"
diff --git a/packages/ui-react/src/components/CreditCardNumberField/CreditCardNumberField.module.scss b/packages/ui-react/src/components/form-fields/CreditCardNumberField/CreditCardNumberField.module.scss
similarity index 100%
rename from packages/ui-react/src/components/CreditCardNumberField/CreditCardNumberField.module.scss
rename to packages/ui-react/src/components/form-fields/CreditCardNumberField/CreditCardNumberField.module.scss
diff --git a/packages/ui-react/src/components/CreditCardNumberField/CreditCardNumberField.test.tsx b/packages/ui-react/src/components/form-fields/CreditCardNumberField/CreditCardNumberField.test.tsx
similarity index 100%
rename from packages/ui-react/src/components/CreditCardNumberField/CreditCardNumberField.test.tsx
rename to packages/ui-react/src/components/form-fields/CreditCardNumberField/CreditCardNumberField.test.tsx
diff --git a/packages/ui-react/src/components/CreditCardNumberField/CreditCardNumberField.tsx b/packages/ui-react/src/components/form-fields/CreditCardNumberField/CreditCardNumberField.tsx
similarity index 100%
rename from packages/ui-react/src/components/CreditCardNumberField/CreditCardNumberField.tsx
rename to packages/ui-react/src/components/form-fields/CreditCardNumberField/CreditCardNumberField.tsx
diff --git a/packages/ui-react/src/components/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap b/packages/ui-react/src/components/form-fields/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap
similarity index 69%
rename from packages/ui-react/src/components/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap
rename to packages/ui-react/src/components/form-fields/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap
index 471171761..1830eca82 100644
--- a/packages/ui-react/src/components/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap
+++ b/packages/ui-react/src/components/form-fields/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap
@@ -3,22 +3,28 @@
 exports[`<CreditCardNumberField> > renders and matches snapshot 1`] = `
 <div>
   <div
-    class="_textField_e16c1b directPostCreditCardNumber"
+    class="_formField_86f2f5 _textField_c799b0 directPostCreditCardNumber"
   >
     <label
-      class="_label_e16c1b"
+      class="_label_86f2f5"
       for="text-field_1235_cardnumber"
     >
       Card number
+      <span
+        aria-hidden="true"
+      >
+        *
+      </span>
     </label>
     <div
-      class="_container_e16c1b"
+      class="_container_859b20"
     >
       <input
         aria-describedby="helper_text_1235_cardnumber"
         aria-invalid="false"
+        aria-required="true"
         autocomplete="cc-number"
-        class="_input_e16c1b"
+        class="_input_859b20"
         id="text-field_1235_cardnumber"
         name="cardNumber"
         pattern="\\d*"
diff --git a/packages/ui-react/src/components/form-fields/DateField/DateField.module.scss b/packages/ui-react/src/components/form-fields/DateField/DateField.module.scss
new file mode 100644
index 000000000..62488fdec
--- /dev/null
+++ b/packages/ui-react/src/components/form-fields/DateField/DateField.module.scss
@@ -0,0 +1,64 @@
+@use '@jwp/ott-ui-react/src/styles/variables';
+@use '@jwp/ott-ui-react/src/styles/theme';
+
+@use '../../Input/Input.module.scss';
+
+.dateField {
+  width: 100%;
+  margin-bottom: 8px;
+
+  &.error {
+    .container {
+      border-color: theme.$text-field-error-color;
+    }
+  }
+
+  &.disabled {
+    .container {
+      opacity: 0.7;
+    }
+  }
+
+  &:hover {
+    &:not(.disabled) {
+      .container {
+        background-color: theme.$text-field-hover-bg-color;
+        border-color: theme.$text-field-hover-border-color;
+      }
+    }
+  }
+}
+
+// below is inferred and extended from Input.module.scss
+.container {
+  display: flex;
+  align-items: center;
+}
+
+.input {
+  text-align: center;
+
+  &::-webkit-inner-spin-button {
+    display: none;
+  }
+
+  &[name="date"] {
+    width: 43px;
+    padding-right: 4px;
+  }
+
+  &[name="month"] {
+    width: 35px;
+    padding-right: 4px;
+    padding-left: 4px;
+  }
+
+  &[name="year"] {
+    width: 60px;
+    padding-left: 4px;
+  }
+}
+
+.hiddenInput {
+  display: none;
+}
diff --git a/packages/ui-react/src/components/DateField/DateField.tsx b/packages/ui-react/src/components/form-fields/DateField/DateField.tsx
similarity index 50%
rename from packages/ui-react/src/components/DateField/DateField.tsx
rename to packages/ui-react/src/components/form-fields/DateField/DateField.tsx
index 41b7e6130..a9f1987aa 100644
--- a/packages/ui-react/src/components/DateField/DateField.tsx
+++ b/packages/ui-react/src/components/form-fields/DateField/DateField.tsx
@@ -1,32 +1,47 @@
-import React, { type ReactNode, useRef, useState } from 'react';
+import React, { type InputHTMLAttributes, useRef, useState } from 'react';
 import classNames from 'classnames';
-import { useTranslation } from 'react-i18next';
 import useOpaqueId from '@jwp/ott-hooks-react/src/useOpaqueId';
 
-import HelperText from '../HelperText/HelperText';
+import { FormField } from '../../FormField/FormField';
+import type { FormControlProps } from '../../../types/form';
 
 import styles from './DateField.module.scss';
 
-type Props = {
-  className?: string;
-  label?: ReactNode;
-  name?: string;
-  value: string;
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+
+type Props = InputProps & {
   format?: string;
-  onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-  onFocus?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
   helperText?: React.ReactNode;
-  error?: boolean;
-  required?: boolean;
-  testId?: string;
-};
+} & FormControlProps;
+
+const parseDateString = (dateString: string | undefined) => {
+  if (!dateString) return null;
 
-const parseDateString = (dateString: string) => {
   const date = new Date(dateString);
 
   return isNaN(date.getTime()) ? null : date;
 };
 
+const padLeft = (value: number) => {
+  return value > 0 && value < 10 ? `0${value}` : value.toString();
+};
+
+const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
+
+const parseBlurValue = (value: string, min: number, max: number) => {
+  const parsed = clamp(parseInt(value), min, max);
+  if (isNaN(parsed)) return '';
+
+  return value.length > 0 && parsed < 10 ? padLeft(parsed) : parsed.toString();
+};
+
+const parseInputValue = (value: string, min: number, max: number) => {
+  const parsed = clamp(parseInt(value), min, max);
+  if (isNaN(parsed)) return '';
+
+  return value.length > 1 && parsed < 10 ? padLeft(parsed) : parsed.toString();
+};
+
 const DateField: React.FC<Props> = ({
   className,
   label,
@@ -36,12 +51,12 @@ const DateField: React.FC<Props> = ({
   onChange,
   format = 'YYYY-MM-DD',
   name,
+  editing,
+  lang,
   required,
   onFocus,
   testId,
-  ...rest
 }: Props) => {
-  const { t } = useTranslation('common');
   const parsedDate = parseDateString(value);
 
   const [values, setValues] = useState({
@@ -55,7 +70,7 @@ const DateField: React.FC<Props> = ({
 
   const hiddenInputRef = useRef<HTMLInputElement>(null);
 
-  const DateFieldClassName = classNames(
+  const dateFieldClassName = classNames(
     styles.dateField,
     {
       [styles.error]: error,
@@ -80,26 +95,6 @@ const DateField: React.FC<Props> = ({
     }
   };
 
-  const padLeft = (value: number) => {
-    return value > 0 && value < 10 ? `0${value}` : value.toString();
-  };
-
-  const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
-
-  const parseBlurValue = (value: string, min: number, max: number) => {
-    const parsed = clamp(parseInt(value), min, max);
-    if (isNaN(parsed)) return '';
-
-    return value.length > 0 && parsed < 10 ? padLeft(parsed) : parsed.toString();
-  };
-
-  const parseInputValue = (value: string, min: number, max: number) => {
-    const parsed = clamp(parseInt(value), min, max);
-    if (isNaN(parsed)) return '';
-
-    return value.length > 1 && parsed < 10 ? padLeft(parsed) : parsed.toString();
-  };
-
   const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
     const { name, value } = event.target;
 
@@ -142,71 +137,75 @@ const DateField: React.FC<Props> = ({
   };
 
   return (
-    <div className={DateFieldClassName} {...rest} data-testid={testId} id={id}>
-      <label htmlFor={id} className={styles.label}>
-        {label}
-        {!required ? <span>{t('optional')}</span> : null}
-      </label>
-      <div className={styles.container}>
-        {/* don't be tempted to make it type="hidden", onChange will practically be ignored that way */}
-        <input
-          ref={hiddenInputRef}
-          id={`${id}-hidden`}
-          className={styles.hiddenInput}
-          name={name}
-          onChange={onChange}
-          aria-invalid={error}
-          aria-describedby={helperTextId}
-        />
-        <input
-          className={styles.input}
-          name="date"
-          placeholder="dd"
-          value={values.date}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          onChange={handleChange}
-          onKeyDown={handleKeyDown}
-          maxLength={2}
-          type="number"
-          id={`${id}-date`}
-          autoComplete="bday-day"
-        />
-        {' / '}
-        <input
-          className={styles.input}
-          name="month"
-          placeholder="mm"
-          value={values.month}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          onChange={handleChange}
-          onKeyDown={handleKeyDown}
-          maxLength={2}
-          type="number"
-          id={`${id}-month`}
-          autoComplete="bday-month"
-        />
-        {' / '}
-        <input
-          className={styles.input}
-          name="year"
-          placeholder="yyyy"
-          value={values.year}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          onChange={handleChange}
-          onKeyDown={handleKeyDown}
-          maxLength={4}
-          type="number"
-          id={`${id}-year`}
-          autoComplete="bday-year"
-        />
-      </div>
-      <HelperText id={helperTextId} error={error}>
-        {helperText}
-      </HelperText>
-    </div>
+    <FormField
+      className={dateFieldClassName}
+      name={name}
+      helperText={helperText}
+      error={error}
+      label={label}
+      editing={editing}
+      lang={lang}
+      required={required}
+      testId={testId}
+      renderInput={() => (
+        <div className={styles.container}>
+          {/* don't be tempted to make it type="hidden", onChange will practically be ignored that way */}
+          <input
+            ref={hiddenInputRef}
+            id={`${id}-hidden`}
+            className={styles.hiddenInput}
+            name={name}
+            onChange={onChange}
+            aria-invalid={error}
+            aria-describedby={helperTextId}
+          />
+          <input
+            className={styles.input}
+            name="date"
+            placeholder="dd"
+            value={values.date}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            maxLength={2}
+            type="number"
+            id={`${id}-date`}
+            autoComplete="bday-day"
+          />
+          {' / '}
+          <input
+            className={styles.input}
+            name="month"
+            placeholder="mm"
+            value={values.month}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            maxLength={2}
+            type="number"
+            id={`${id}-month`}
+            autoComplete="bday-month"
+          />
+          {' / '}
+          <input
+            className={styles.input}
+            name="year"
+            placeholder="yyyy"
+            value={values.year}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            maxLength={4}
+            type="number"
+            id={`${id}-year`}
+            autoComplete="bday-year"
+          />
+        </div>
+      )}
+    />
   );
 };
 
diff --git a/packages/ui-react/src/components/Dropdown/Dropdown.test.tsx b/packages/ui-react/src/components/form-fields/Dropdown/Dropdown.test.tsx
similarity index 100%
rename from packages/ui-react/src/components/Dropdown/Dropdown.test.tsx
rename to packages/ui-react/src/components/form-fields/Dropdown/Dropdown.test.tsx
diff --git a/packages/ui-react/src/components/form-fields/Dropdown/Dropdown.tsx b/packages/ui-react/src/components/form-fields/Dropdown/Dropdown.tsx
new file mode 100644
index 000000000..865328322
--- /dev/null
+++ b/packages/ui-react/src/components/form-fields/Dropdown/Dropdown.tsx
@@ -0,0 +1,46 @@
+import React, { type InputHTMLAttributes } from 'react';
+
+import { FormField } from '../../FormField/FormField';
+import Select from '../../Select/Select';
+import type { FormControlProps } from '../../../types/form';
+
+type SelectProps = Omit<InputHTMLAttributes<HTMLSelectElement>, 'size'>;
+
+type Props = SelectProps & {
+  defaultLabel?: string;
+  options?: (string | { value: string; label: string })[];
+  optionsStyle?: string;
+  helperText?: React.ReactNode;
+} & FormControlProps;
+
+const Dropdown: React.FC<Props> = ({
+  name,
+  className,
+  label,
+  error,
+  helperText,
+  editing = true,
+  required = false,
+  size = 'medium',
+  testId,
+  lang,
+  ...inputProps
+}) => {
+  return (
+    <FormField
+      className={className}
+      error={error}
+      helperText={helperText}
+      label={label}
+      required={required}
+      editing={editing}
+      testId={testId}
+      name={name}
+      size={size}
+      lang={lang}
+      renderInput={(fieldProps) => <Select name={name} required={required} editing={editing} error={error} size={size} {...fieldProps} {...inputProps} />}
+    />
+  );
+};
+
+export default Dropdown;
diff --git a/packages/ui-react/src/components/PasswordField/PasswordField.test.tsx b/packages/ui-react/src/components/form-fields/PasswordField/PasswordField.test.tsx
similarity index 100%
rename from packages/ui-react/src/components/PasswordField/PasswordField.test.tsx
rename to packages/ui-react/src/components/form-fields/PasswordField/PasswordField.test.tsx
diff --git a/packages/ui-react/src/components/PasswordField/PasswordField.tsx b/packages/ui-react/src/components/form-fields/PasswordField/PasswordField.tsx
similarity index 70%
rename from packages/ui-react/src/components/PasswordField/PasswordField.tsx
rename to packages/ui-react/src/components/form-fields/PasswordField/PasswordField.tsx
index a4eceecd3..8e5e708d3 100644
--- a/packages/ui-react/src/components/PasswordField/PasswordField.tsx
+++ b/packages/ui-react/src/components/form-fields/PasswordField/PasswordField.tsx
@@ -1,27 +1,22 @@
-import React from 'react';
+import React, { type InputHTMLAttributes } from 'react';
 import { useTranslation } from 'react-i18next';
 import useToggle from '@jwp/ott-hooks-react/src/useToggle';
 import Visibility from '@jwp/ott-theme/assets/icons/visibility.svg?react';
 import VisibilityOff from '@jwp/ott-theme/assets/icons/visibility_off.svg?react';
 
 import TextField from '../TextField/TextField';
-import PasswordStrength from '../PasswordStrength/PasswordStrength';
-import IconButton from '../IconButton/IconButton';
-import Icon from '../Icon/Icon';
+import PasswordStrength from '../../PasswordStrength/PasswordStrength';
+import IconButton from '../../IconButton/IconButton';
+import Icon from '../../Icon/Icon';
+import type { FormControlProps } from '../../../types/form';
 
-type Props = React.InputHTMLAttributes<HTMLInputElement> & {
-  onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-  onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-  error?: boolean;
-  value?: string;
-  label?: string;
-  placeholder?: string;
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+
+type Props = InputProps & {
   helperText?: React.ReactNode;
-  name: string;
-  required?: boolean;
   showToggleView?: boolean;
   showHelperText?: boolean;
-};
+} & FormControlProps;
 
 const PasswordField: React.FC<Props> = ({ value, showToggleView = true, helperText, showHelperText = true, ...props }: Props) => {
   const { t } = useTranslation('account');
@@ -31,7 +26,7 @@ const PasswordField: React.FC<Props> = ({ value, showToggleView = true, helperTe
     <TextField
       {...props}
       helperText={
-        helperText ||
+        helperText ??
         (showHelperText ? (
           <React.Fragment>
             <PasswordStrength password={value || ''} />
diff --git a/packages/ui-react/src/components/PasswordField/__snapshots__/PasswordField.test.tsx.snap b/packages/ui-react/src/components/form-fields/PasswordField/__snapshots__/PasswordField.test.tsx.snap
similarity index 85%
rename from packages/ui-react/src/components/PasswordField/__snapshots__/PasswordField.test.tsx.snap
rename to packages/ui-react/src/components/form-fields/PasswordField/__snapshots__/PasswordField.test.tsx.snap
index 52ffd8085..e339a2012 100644
--- a/packages/ui-react/src/components/PasswordField/__snapshots__/PasswordField.test.tsx.snap
+++ b/packages/ui-react/src/components/form-fields/PasswordField/__snapshots__/PasswordField.test.tsx.snap
@@ -3,21 +3,27 @@
 exports[`<PasswordField> > renders and matches snapshot 1`] = `
 <div>
   <div
-    class="_textField_e16c1b _rightControl_e16c1b"
+    class="_formField_86f2f5 _textField_c799b0"
   >
     <label
-      class="_label_e16c1b"
+      class="_label_86f2f5"
       for="text-field_1235_password"
     >
       Label
+      <span
+        aria-hidden="true"
+      >
+        *
+      </span>
     </label>
     <div
-      class="_container_e16c1b"
+      class="_container_859b20 _rightControl_859b20"
     >
       <input
         aria-describedby="helper_text_1235_password"
         aria-invalid="false"
-        class="_input_e16c1b"
+        aria-required="true"
+        class="_input_859b20"
         id="text-field_1235_password"
         name="password"
         placeholder="Placeholder"
@@ -26,7 +32,7 @@ exports[`<PasswordField> > renders and matches snapshot 1`] = `
         value=""
       />
       <div
-        class="_control_e16c1b"
+        class="_control_859b20"
       >
         <button
           aria-label="reset.view_password"
diff --git a/packages/ui-react/src/components/Radio/Radio.module.scss b/packages/ui-react/src/components/form-fields/Radio/Radio.module.scss
similarity index 77%
rename from packages/ui-react/src/components/Radio/Radio.module.scss
rename to packages/ui-react/src/components/form-fields/Radio/Radio.module.scss
index e28160388..dddf1b517 100644
--- a/packages/ui-react/src/components/Radio/Radio.module.scss
+++ b/packages/ui-react/src/components/form-fields/Radio/Radio.module.scss
@@ -1,24 +1,19 @@
 @use '@jwp/ott-ui-react/src/styles/variables';
 @use '@jwp/ott-ui-react/src/styles/theme';
 
-.header {
-  display: flex;
-  margin-bottom: 8px;
-  font-weight: var(--body-font-weight-bold);
-  text-align: left;
-
-  > span.note {
-    margin-left: auto;
-    color: rgba(variables.$white, 0.7);
-    font-weight: normal;
-  }
-}
-
 .radio {
   display: flex;
   align-items: center;
   margin-bottom: 8px;
 
+  &.error {
+    input {
+      &:not(:checked) {
+        border: 2px solid theme.$input-field-error-color;
+      }
+    }
+  }
+
   > label {
     margin-left: calc(#{variables.$base-spacing} / 2);
     font-size: 14px;
@@ -31,12 +26,22 @@
     height: 20px;
     margin: 0;
     border-radius: 15px;
+    cursor: pointer;
     transition: all 0.1s;
     appearance: none;
 
+    &:disabled {
+      opacity: 0.6;
+      pointer-events: none;
+
+      + label {
+        pointer-events: none;
+      }
+    }
+
     &:not(:checked) {
       border: 2px solid theme.$input-resting-border-color;
-      &:hover {
+      &:hover:not(:disabled) {
         border-color: theme.$input-hover-border-color;
       }
     }
diff --git a/packages/ui-react/src/components/Radio/Radio.test.tsx b/packages/ui-react/src/components/form-fields/Radio/Radio.test.tsx
similarity index 94%
rename from packages/ui-react/src/components/Radio/Radio.test.tsx
rename to packages/ui-react/src/components/form-fields/Radio/Radio.test.tsx
index 177460d4d..1889d668b 100644
--- a/packages/ui-react/src/components/Radio/Radio.test.tsx
+++ b/packages/ui-react/src/components/form-fields/Radio/Radio.test.tsx
@@ -8,7 +8,7 @@ describe('<Radio>', () => {
     const { container } = render(
       <Radio
         name="radio"
-        header={'Choose a Value'}
+        label={'Choose a Value'}
         onChange={vi.fn()}
         value="value1"
         values={Array.of({ value: 'value1', label: 'Label 1 ' }, { value: 'value2', label: 'Label 2 ' }, { value: 'value3', label: 'Label 3 ' })}
diff --git a/packages/ui-react/src/components/form-fields/Radio/Radio.tsx b/packages/ui-react/src/components/form-fields/Radio/Radio.tsx
new file mode 100644
index 000000000..e37d6d0ee
--- /dev/null
+++ b/packages/ui-react/src/components/form-fields/Radio/Radio.tsx
@@ -0,0 +1,56 @@
+import React, { type InputHTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+import type { FormControlProps } from '../../../types/form';
+import { FormField } from '../../FormField/FormField';
+
+import styles from './Radio.module.scss';
+
+type HTMLRadioProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+
+type Props = HTMLRadioProps & {
+  values: { value: string; label: string }[];
+  helperText?: React.ReactNode;
+} & FormControlProps;
+
+const Radio: React.FC<Props> = ({ name, onChange, label, value, editing = true, size, values, helperText, error, required, disabled, lang, ...rest }) => {
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+    if (!editing) {
+      return event.preventDefault();
+    }
+    onChange?.(event);
+  };
+
+  return (
+    <FormField
+      name={name}
+      label={label}
+      error={error}
+      helperText={helperText}
+      required={required}
+      renderInput={({ id, helperTextId }) => (
+        <div id={id}>
+          {values.map(({ value: optionValue, label: optionLabel }, index) => (
+            <div className={classNames(styles.radio, { [styles.error]: error })} key={index} lang={lang}>
+              <input
+                value={optionValue}
+                name={name}
+                type="radio"
+                id={id + index}
+                onChange={handleChange}
+                checked={value === optionValue}
+                required={required}
+                disabled={disabled}
+                aria-describedby={helperTextId}
+                {...rest}
+              />
+              <label htmlFor={id + index}>{optionLabel}</label>
+            </div>
+          ))}
+        </div>
+      )}
+    />
+  );
+};
+
+export default Radio;
diff --git a/packages/ui-react/src/components/form-fields/Radio/__snapshots__/Radio.test.tsx.snap b/packages/ui-react/src/components/form-fields/Radio/__snapshots__/Radio.test.tsx.snap
new file mode 100644
index 000000000..fa69ae07f
--- /dev/null
+++ b/packages/ui-react/src/components/form-fields/Radio/__snapshots__/Radio.test.tsx.snap
@@ -0,0 +1,75 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<Radio> > renders and matches snapshot 1`] = `
+<div>
+  <div
+    class="_formField_86f2f5"
+  >
+    <label
+      class="_label_86f2f5"
+      for="text-field_1235_radio"
+    >
+      Choose a Value
+    </label>
+    <div
+      id="text-field_1235_radio"
+    >
+      <div
+        class="_radio_854545"
+      >
+        <input
+          aria-describedby="helper_text_1235_radio"
+          checked=""
+          id="text-field_1235_radio0"
+          name="radio"
+          type="radio"
+          value="value1"
+        />
+        <label
+          for="text-field_1235_radio0"
+        >
+          Label 1 
+        </label>
+      </div>
+      <div
+        class="_radio_854545"
+      >
+        <input
+          aria-describedby="helper_text_1235_radio"
+          id="text-field_1235_radio1"
+          name="radio"
+          type="radio"
+          value="value2"
+        />
+        <label
+          for="text-field_1235_radio1"
+        >
+          Label 2 
+        </label>
+      </div>
+      <div
+        class="_radio_854545"
+      >
+        <input
+          aria-describedby="helper_text_1235_radio"
+          id="text-field_1235_radio2"
+          name="radio"
+          type="radio"
+          value="value3"
+        />
+        <label
+          for="text-field_1235_radio2"
+        >
+          Label 3 
+        </label>
+      </div>
+    </div>
+    <div
+      class="_helperText_da58e0"
+      id="helper_text_1235_radio"
+    >
+      This is required!
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/ui-react/src/components/form-fields/TextField/TextField.module.scss b/packages/ui-react/src/components/form-fields/TextField/TextField.module.scss
new file mode 100644
index 000000000..e1bdad729
--- /dev/null
+++ b/packages/ui-react/src/components/form-fields/TextField/TextField.module.scss
@@ -0,0 +1,7 @@
+@use '@jwp/ott-ui-react/src/styles/variables';
+@use '@jwp/ott-ui-react/src/styles/theme';
+
+.textField {
+  width: 100%;
+  margin-bottom: 8px;
+}
diff --git a/packages/ui-react/src/components/TextField/TextField.test.tsx b/packages/ui-react/src/components/form-fields/TextField/TextField.test.tsx
similarity index 100%
rename from packages/ui-react/src/components/TextField/TextField.test.tsx
rename to packages/ui-react/src/components/form-fields/TextField/TextField.test.tsx
diff --git a/packages/ui-react/src/components/form-fields/TextField/TextField.tsx b/packages/ui-react/src/components/form-fields/TextField/TextField.tsx
new file mode 100644
index 000000000..858952dc9
--- /dev/null
+++ b/packages/ui-react/src/components/form-fields/TextField/TextField.tsx
@@ -0,0 +1,35 @@
+import React, { type InputHTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+import { FormField } from '../../FormField/FormField';
+import Input from '../../Input/Input';
+import type { FormControlProps } from '../../../types/form';
+
+import styles from './TextField.module.scss';
+
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+
+type Props = InputProps & {
+  helperText?: React.ReactNode;
+  multiline?: boolean;
+  leftControl?: React.ReactNode;
+  rightControl?: React.ReactNode;
+} & FormControlProps;
+
+const TextField: React.FC<Props> = ({ className, helperText, label, error, required, editing = true, testId, name, ...inputProps }) => {
+  return (
+    <FormField
+      className={classNames(styles.textField, className)}
+      error={error}
+      helperText={helperText}
+      label={label}
+      required={required}
+      editing={editing}
+      testId={testId}
+      name={name}
+      renderInput={(fieldProps) => <Input editing={editing} error={error} name={name} required={required} {...fieldProps} {...inputProps} />}
+    />
+  );
+};
+
+export default TextField;
diff --git a/packages/ui-react/src/components/TextField/__snapshots__/TextField.test.tsx.snap b/packages/ui-react/src/components/form-fields/TextField/__snapshots__/TextField.test.tsx.snap
similarity index 72%
rename from packages/ui-react/src/components/TextField/__snapshots__/TextField.test.tsx.snap
rename to packages/ui-react/src/components/form-fields/TextField/__snapshots__/TextField.test.tsx.snap
index baef0b215..ea0ff8492 100644
--- a/packages/ui-react/src/components/TextField/__snapshots__/TextField.test.tsx.snap
+++ b/packages/ui-react/src/components/form-fields/TextField/__snapshots__/TextField.test.tsx.snap
@@ -3,24 +3,22 @@
 exports[`<TextField> > renders and matches multiline readonly snapshot 1`] = `
 <div>
   <div
-    class="_textField_e16c1b"
+    class="_formField_86f2f5 _textField_c799b0"
   >
     <label
-      class="_label_e16c1b"
+      class="_label_86f2f5"
       for="text-field_1235_name"
     >
       Label
-      <span>
-        optional
-      </span>
     </label>
     <div
-      class="_container_e16c1b"
+      class="_container_859b20"
     >
       <textarea
         aria-describedby="helper_text_1235_name"
         aria-invalid="false"
-        class="_input_e16c1b"
+        aria-required="false"
+        class="_input_859b20"
         id="text-field_1235_name"
         name="name"
         placeholder="Placeholder"
@@ -35,24 +33,22 @@ exports[`<TextField> > renders and matches multiline readonly snapshot 1`] = `
 exports[`<TextField> > renders and matches multiline snapshot 1`] = `
 <div>
   <div
-    class="_textField_e16c1b"
+    class="_formField_86f2f5 _textField_c799b0"
   >
     <label
-      class="_label_e16c1b"
+      class="_label_86f2f5"
       for="text-field_1235_name"
     >
       Label
-      <span>
-        optional
-      </span>
     </label>
     <div
-      class="_container_e16c1b"
+      class="_container_859b20"
     >
       <textarea
         aria-describedby="helper_text_1235_name"
         aria-invalid="false"
-        class="_input_e16c1b"
+        aria-required="false"
+        class="_input_859b20"
         id="text-field_1235_name"
         name="name"
         placeholder="Placeholder"
@@ -66,24 +62,22 @@ exports[`<TextField> > renders and matches multiline snapshot 1`] = `
 exports[`<TextField> > renders and matches readonly snapshot 1`] = `
 <div>
   <div
-    class="_textField_e16c1b"
+    class="_formField_86f2f5 _textField_c799b0"
   >
     <label
-      class="_label_e16c1b"
+      class="_label_86f2f5"
       for="text-field_1235_name"
     >
       Label
-      <span>
-        optional
-      </span>
     </label>
     <div
-      class="_container_e16c1b"
+      class="_container_859b20"
     >
       <input
         aria-describedby="helper_text_1235_name"
         aria-invalid="false"
-        class="_input_e16c1b"
+        aria-required="false"
+        class="_input_859b20"
         id="text-field_1235_name"
         name="name"
         placeholder="Placeholder"
@@ -99,24 +93,22 @@ exports[`<TextField> > renders and matches readonly snapshot 1`] = `
 exports[`<TextField> > renders and matches snapshot 1`] = `
 <div>
   <div
-    class="_textField_e16c1b"
+    class="_formField_86f2f5 _textField_c799b0"
   >
     <label
-      class="_label_e16c1b"
+      class="_label_86f2f5"
       for="text-field_1235_name"
     >
       Label
-      <span>
-        optional
-      </span>
     </label>
     <div
-      class="_container_e16c1b"
+      class="_container_859b20"
     >
       <input
         aria-describedby="helper_text_1235_name"
         aria-invalid="false"
-        class="_input_e16c1b"
+        aria-required="false"
+        class="_input_859b20"
         id="text-field_1235_name"
         name="name"
         placeholder="Placeholder"
diff --git a/packages/ui-react/src/containers/Profiles/Form.tsx b/packages/ui-react/src/containers/Profiles/Form.tsx
index 212986202..a367fd538 100644
--- a/packages/ui-react/src/containers/Profiles/Form.tsx
+++ b/packages/ui-react/src/containers/Profiles/Form.tsx
@@ -10,9 +10,9 @@ import { PATH_USER_PROFILES } from '@jwp/ott-common/src/paths';
 
 import styles from '../../pages/User/User.module.scss';
 import Button from '../../components/Button/Button';
-import Dropdown from '../../components/Dropdown/Dropdown';
+import Dropdown from '../../components/form-fields/Dropdown/Dropdown';
 import FormFeedback from '../../components/FormFeedback/FormFeedback';
-import TextField from '../../components/TextField/TextField';
+import TextField from '../../components/form-fields/TextField/TextField';
 import LoadingOverlay from '../../components/LoadingOverlay/LoadingOverlay';
 import ProfileBox from '../../components/ProfileBox/ProfileBox';
 
@@ -84,11 +84,9 @@ const Form = ({ initialValues, formHandler, selectedAvatar, showCancelButton = t
           />
           {showContentRating && (
             <Dropdown
-              fullWidth
               required
               name="adult"
               label={t('profile.content_rating')}
-              className={styles.dropdown}
               options={options}
               value={values?.adult?.toString() || 'true'}
               onChange={handleChange}
diff --git a/packages/ui-react/src/pages/Home/Home.tsx b/packages/ui-react/src/pages/Home/Home.tsx
index 82baf59e1..b58bceaed 100644
--- a/packages/ui-react/src/pages/Home/Home.tsx
+++ b/packages/ui-react/src/pages/Home/Home.tsx
@@ -6,8 +6,6 @@ import { useTranslation } from 'react-i18next';
 
 import ShelfList from '../../containers/ShelfList/ShelfList';
 
-import '../../styles/accessibility.scss';
-
 const Home = () => {
   const { config } = useConfigStore(({ config, accessModel }) => ({ config, accessModel }), shallow);
   const content: Content[] = config?.content;
diff --git a/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap b/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap
index 033dbb54c..c6c0ec92b 100644
--- a/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap
+++ b/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap
@@ -116,10 +116,10 @@ exports[`User Component tests > Account Page 1`] = `
           novalidate=""
         >
           <div
-            class="_textField_e16c1b"
+            class="_formField_86f2f5 _textField_c799b0"
           >
             <label
-              class="_label_e16c1b"
+              class="_label_86f2f5"
               for="text-field_1235_firstname"
             >
               account.firstname
@@ -127,8 +127,9 @@ exports[`User Component tests > Account Page 1`] = `
             <input
               aria-describedby="helper_text_1235_firstname"
               aria-invalid="false"
+              aria-required="false"
               autocomplete="given-name"
-              class="_input_e16c1b"
+              class="_input_859b20"
               id="text-field_1235_firstname"
               lang="en"
               name="firstName"
@@ -138,10 +139,10 @@ exports[`User Component tests > Account Page 1`] = `
             />
           </div>
           <div
-            class="_textField_e16c1b"
+            class="_formField_86f2f5 _textField_c799b0"
           >
             <label
-              class="_label_e16c1b"
+              class="_label_86f2f5"
               for="text-field_1235_lastname"
             >
               account.lastname
@@ -149,8 +150,9 @@ exports[`User Component tests > Account Page 1`] = `
             <input
               aria-describedby="helper_text_1235_lastname"
               aria-invalid="false"
+              aria-required="false"
               autocomplete="family-name"
-              class="_input_e16c1b"
+              class="_input_859b20"
               id="text-field_1235_lastname"
               lang="en"
               name="lastName"
@@ -191,10 +193,10 @@ exports[`User Component tests > Account Page 1`] = `
           novalidate=""
         >
           <div
-            class="_textField_e16c1b"
+            class="_formField_86f2f5 _textField_c799b0"
           >
             <label
-              class="_label_e16c1b"
+              class="_label_86f2f5"
               for="text-field_1235_email"
             >
               account.email
@@ -202,8 +204,9 @@ exports[`User Component tests > Account Page 1`] = `
             <input
               aria-describedby="helper_text_1235_email"
               aria-invalid="false"
+              aria-required="true"
               autocomplete="email"
-              class="_input_e16c1b"
+              class="_input_859b20"
               id="text-field_1235_email"
               name="email"
               readonly=""
@@ -712,10 +715,10 @@ exports[`User Component tests > Payments Page 1`] = `
         </div>
         <div>
           <div
-            class="_textField_e16c1b"
+            class="_formField_86f2f5 _textField_c799b0"
           >
             <label
-              class="_label_e16c1b"
+              class="_label_86f2f5"
               for="text-field_1235_cardnumber"
             >
               user:payment.card_number
@@ -724,8 +727,9 @@ exports[`User Component tests > Payments Page 1`] = `
               aria-describedby="helper_text_1235_cardnumber"
               aria-invalid="false"
               aria-label="user:payment.card_number_hidden"
+              aria-required="false"
               autocomplete="cc-number"
-              class="_input_e16c1b"
+              class="_input_859b20"
               id="text-field_1235_cardnumber"
               name="cardNumber"
               readonly=""
@@ -737,10 +741,10 @@ exports[`User Component tests > Payments Page 1`] = `
             class="_cardDetails_c57ff5"
           >
             <div
-              class="_textField_e16c1b"
+              class="_formField_86f2f5 _textField_c799b0"
             >
               <label
-                class="_label_e16c1b"
+                class="_label_86f2f5"
                 for="text-field_1235_cardexpiry"
               >
                 user:payment.expiry_date
@@ -748,8 +752,9 @@ exports[`User Component tests > Payments Page 1`] = `
               <input
                 aria-describedby="helper_text_1235_cardexpiry"
                 aria-invalid="false"
+                aria-required="false"
                 autocomplete="cc-exp"
-                class="_input_e16c1b"
+                class="_input_859b20"
                 id="text-field_1235_cardexpiry"
                 name="cardExpiry"
                 readonly=""
@@ -758,10 +763,10 @@ exports[`User Component tests > Payments Page 1`] = `
               />
             </div>
             <div
-              class="_textField_e16c1b"
+              class="_formField_86f2f5 _textField_c799b0"
             >
               <label
-                class="_label_e16c1b"
+                class="_label_86f2f5"
                 for="text-field_1235_cardsecuritycode"
               >
                 user:payment.security_code
@@ -770,8 +775,9 @@ exports[`User Component tests > Payments Page 1`] = `
                 aria-describedby="helper_text_1235_cardsecuritycode"
                 aria-invalid="false"
                 aria-label="user:payment.security_code_hidden"
+                aria-required="false"
                 autocomplete="cc-csc"
-                class="_input_e16c1b"
+                class="_input_859b20"
                 id="text-field_1235_cardsecuritycode"
                 name="cardSecurityCode"
                 readonly=""
diff --git a/packages/ui-react/src/types/form.ts b/packages/ui-react/src/types/form.ts
new file mode 100644
index 000000000..1c72e463f
--- /dev/null
+++ b/packages/ui-react/src/types/form.ts
@@ -0,0 +1,15 @@
+import type React from 'react';
+
+export type FormControlProps = {
+  name: string;
+  label?: React.ReactNode;
+  placeholder?: string;
+  className?: string;
+  required?: boolean;
+  error?: boolean;
+  editing?: boolean;
+  testId?: string;
+  value?: string;
+  lang?: string;
+  size?: 'small' | 'medium';
+};
diff --git a/platforms/web/src/components/DemoConfigDialog/DemoConfigDialog.tsx b/platforms/web/src/components/DemoConfigDialog/DemoConfigDialog.tsx
index 69a55e671..29bad61f0 100644
--- a/platforms/web/src/components/DemoConfigDialog/DemoConfigDialog.tsx
+++ b/platforms/web/src/components/DemoConfigDialog/DemoConfigDialog.tsx
@@ -5,7 +5,7 @@ import { Helmet } from 'react-helmet';
 import { createURL } from '@jwp/ott-common/src/utils/urlFormatting';
 import { CONFIG_QUERY_KEY } from '@jwp/ott-common/src/constants';
 import ErrorPage from '@jwp/ott-ui-react/src/components/ErrorPage/ErrorPage';
-import TextField from '@jwp/ott-ui-react/src/components/TextField/TextField';
+import TextField from '@jwp/ott-ui-react/src/components/form-fields/TextField/TextField';
 import Button from '@jwp/ott-ui-react/src/components/Button/Button';
 import ConfirmationDialog from '@jwp/ott-ui-react/src/components/ConfirmationDialog/ConfirmationDialog';
 import LoadingOverlay from '@jwp/ott-ui-react/src/components/LoadingOverlay/LoadingOverlay';
diff --git a/platforms/web/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap b/platforms/web/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap
index 32c75eedb..346cd5950 100644
--- a/platforms/web/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap
+++ b/platforms/web/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap
@@ -55,20 +55,17 @@ exports[`<DemoConfigDialog> > renders and matches snapshot error dialog 1`] = `
             target="/"
           >
             <div
-              class="_textField_25c745 _error_25c745 _maxWidth_561a54"
+              class="_formField_a245e1 _textField_0fa545 _maxWidth_561a54"
             >
-              <label
-                class="_label_25c745"
-                for="text-field_1235_app-config"
-              />
               <div
-                class="_container_25c745"
+                class="_container_ac31ed _error_ac31ed"
               >
                 <input
                   aria-describedby="helper_text_1235_app-config"
                   aria-invalid="true"
+                  aria-required="true"
                   autocapitalize="none"
-                  class="_input_25c745"
+                  class="_input_ac31ed"
                   id="text-field_1235_app-config"
                   maxlength="8"
                   name="app-config"

From fa6ae8118785d5c32110c4b9da60f01753c7556c Mon Sep 17 00:00:00 2001
From: Melissa 't Hart <melissa@videodock.com>
Date: Thu, 18 Apr 2024 15:37:24 +0200
Subject: [PATCH 2/3] chore(project): apply aria-hidden and update e2e tests

---
 .../__snapshots__/PersonalDetailsForm.test.tsx.snap |  2 ++
 .../components/form-fields/Checkbox/Checkbox.tsx    |  8 +++++++-
 platforms/web/test-e2e/tests/register_test.ts       | 13 -------------
 platforms/web/test-e2e/utils/steps_file.ts          |  8 ++++----
 4 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap b/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
index 2d871699b..2e2da4aa9 100644
--- a/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
+++ b/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
@@ -487,6 +487,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
           for="text-field_1235_ccc"
         >
           <span
+            aria-hidden="true"
             role="presentation"
           >
             *
@@ -989,6 +990,7 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
           for="text-field_1235_ccc"
         >
           <span
+            aria-hidden="true"
             role="presentation"
           >
             *
diff --git a/packages/ui-react/src/components/form-fields/Checkbox/Checkbox.tsx b/packages/ui-react/src/components/form-fields/Checkbox/Checkbox.tsx
index 816382c58..4476c0d13 100644
--- a/packages/ui-react/src/components/form-fields/Checkbox/Checkbox.tsx
+++ b/packages/ui-react/src/components/form-fields/Checkbox/Checkbox.tsx
@@ -59,7 +59,13 @@ const Checkbox: React.FC<Props> = ({
             readOnly={!editing}
           />
           <label htmlFor={id} lang={lang}>
-            {required ? <span role="presentation">*</span> : ''}
+            {required ? (
+              <span role="presentation" aria-hidden="true">
+                *
+              </span>
+            ) : (
+              ''
+            )}
             {checkboxLabel}
           </label>
         </div>
diff --git a/platforms/web/test-e2e/tests/register_test.ts b/platforms/web/test-e2e/tests/register_test.ts
index 41cafddc1..65a5e6731 100644
--- a/platforms/web/test-e2e/tests/register_test.ts
+++ b/platforms/web/test-e2e/tests/register_test.ts
@@ -66,19 +66,6 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
     I.dontSeeElement(constants.loginFormSelector);
   });
 
-  Scenario(`The Sign up modal will invalidate upon submit only if a value is inputted - ${providerName}`, async ({ I }) => {
-    I.click('Continue');
-    I.seeElementInDOM('div[class*=formFeedback]'); // This element can be visually hidden through CSS
-    I.seeAttributesOnElements('input[name="email"]', { 'aria-invalid': 'false' });
-    I.seeAttributesOnElements('input[name="password"]', { 'aria-invalid': 'false' });
-
-    I.fillField('Email', 'test');
-    I.fillField('Password', 'test');
-    I.click('Continue');
-    I.seeAttributesOnElements('input[name="email"]', { 'aria-invalid': 'true' });
-    I.seeAttributesOnElements('input[name="password"]', { 'aria-invalid': 'true' });
-  });
-
   Scenario(`I get warned when filling in incorrect credentials - ${providerName}`, async ({ I }) => {
     I.fillField('Email', 'test');
     I.pressKey('Tab');
diff --git a/platforms/web/test-e2e/utils/steps_file.ts b/platforms/web/test-e2e/utils/steps_file.ts
index e7af276e5..070101fba 100644
--- a/platforms/web/test-e2e/utils/steps_file.ts
+++ b/platforms/web/test-e2e/utils/steps_file.ts
@@ -129,7 +129,7 @@ const stepsObj = {
     const requiredTextInputNames: string[] = await this.executeScript(
       ([container, crfFieldSelector]: [string, string]) =>
         Array.from(document.querySelectorAll(`${container} ${crfFieldSelector}`))
-          .filter((element) => !element.querySelector('label')?.innerText.includes('(Optional)'))
+          .filter((element) => element.querySelector('label')?.innerText.includes('*'))
           .map((element) => (element.querySelector('input[type="text"]') as HTMLInputElement)?.name),
       [container, constants.customRegFields.crfTextInput],
     );
@@ -146,7 +146,7 @@ const stepsObj = {
     const requiredRadioValues: string[] = await this.executeScript(
       ([container, crfFieldSelector]: [string, string]) =>
         Array.from(document.querySelectorAll(`${container} ${crfFieldSelector}`))
-          .filter((element) => !(element.querySelector('[data-testid="radio-header"]') as HTMLElement)?.innerText.includes('(Optional)'))
+          .filter((element) => (element.querySelector('[data-testid="radio-header"]') as HTMLElement)?.innerText.includes('*'))
           .map((element) => (element.querySelector('input[type="radio"]') as HTMLInputElement)?.value),
       [container, constants.customRegFields.crfRadioBox],
     );
@@ -164,7 +164,7 @@ const stepsObj = {
       const querySelector = ['crf-select', 'crf-country', 'crf-us_state'].map((testId) => `${container} [data-testid="${testId}"]`).join(', ');
 
       return Array.from(document.querySelectorAll(querySelector))
-        .filter((element) => !element.querySelector('label')?.innerText.includes('(Optional)'))
+        .filter((element) => element.querySelector('label')?.innerText.includes('*'))
         .map((element) => element.querySelector('select')?.name);
     }, container);
 
@@ -185,7 +185,7 @@ const stepsObj = {
     const requiredDatepickerIds: string[] = await this.executeScript(
       ([container, crfFieldSelector]: [string, string]) =>
         Array.from(document.querySelectorAll(`${container} ${crfFieldSelector}`))
-          .filter((element) => !element.querySelector('label')?.innerText.includes('(Optional)'))
+          .filter((element) => element.querySelector('label')?.innerText.includes('*'))
           .map((element) => element.id),
       [container, constants.customRegFields.crfDateField],
     );

From 3d2fa4653b09e03aa5fe21525fdad2cf5adb6ea9 Mon Sep 17 00:00:00 2001
From: Melissa 't Hart <melissa@videodock.com>
Date: Mon, 22 Apr 2024 14:47:07 +0200
Subject: [PATCH 3/3] chore(project): update test, snapshots and remove unused
 props

---
 .../PersonalDetailsForm/PersonalDetailsForm.tsx           | 2 --
 .../__snapshots__/PersonalDetailsForm.test.tsx.snap       | 8 ++++----
 .../__snapshots__/RegistrationForm.test.tsx.snap          | 2 +-
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx b/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
index 74dfaf035..9b31e0461 100644
--- a/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
+++ b/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
@@ -18,8 +18,6 @@ import styles from './PersonalDetailsForm.module.scss';
 type Props = {
   initialValues: PersonalDetailsFormData;
   onSubmit: UseFormOnSubmitHandler<PersonalDetailsFormData>;
-  onChange: React.ChangeEventHandler;
-  setValue: (key: keyof PersonalDetailsFormData, value: string) => void;
   error?: string;
   fields: Record<string, CleengCaptureField>;
   questions: CleengCaptureQuestionField[];
diff --git a/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap b/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
index 2e2da4aa9..5e27e0881 100644
--- a/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
+++ b/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
@@ -320,7 +320,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
           type="number"
           value="27"
         />
-         /
+         / 
         <input
           autocomplete="bday-month"
           class="_input_0addad"
@@ -331,7 +331,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
           type="number"
           value="2"
         />
-         /
+         / 
         <input
           autocomplete="bday-year"
           class="_input_0addad"
@@ -835,7 +835,7 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
           type="number"
           value="27"
         />
-         /
+         / 
         <input
           autocomplete="bday-month"
           class="_input_0addad"
@@ -846,7 +846,7 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
           type="number"
           value="2"
         />
-         /
+         / 
         <input
           autocomplete="bday-year"
           class="_input_0addad"
diff --git a/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap b/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
index 71044a889..30363b236 100644
--- a/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
+++ b/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
@@ -135,7 +135,7 @@ exports[`<RegistrationForm> > renders and matches snapshot 1`] = `
       class="_bottom_a472a0"
     >
       registration.already_account
-
+       
       <a
         class="_link_a14c64"
         href="/?u=login"