function Form()

in support-frontend/assets/components/directDebit/directDebitProgressiveDisclosure/components/form.tsx [60:161]
98 lines of code
3 McCabe index (conditional complexity)

function Form(props: PropTypes): JSX.Element {
	return (
		<div css={directDebitForm}>
			<div css={spaceBetween}>
				<TextInput
					id="account-holder-name-input"
					data-qm-masking="blocklist"
					value={props.accountHolderName}
					autoComplete="off"
					onChange={(e) =>
						props.onChange('accountHolderName', () =>
							props.updateAccountHolderName(e.target.value),
						)
					}
					maxLength={40}
					label="Bank account holder name"
					error={props.accountHolderNameError}
				/>
			</div>

			<div css={spaceBetween}>
				<TextInput
					id="sort-code-input"
					data-qm-masking="blocklist"
					label="Sort code"
					autoComplete="off"
					type="text"
					inputMode="numeric"
					pattern="[0-9]*"
					value={props.sortCode}
					onChange={(e) =>
						props.onChange('sortCode', () =>
							props.updateSortCode(e.target.value),
						)
					}
					error={props.sortCodeError}
					minLength={6}
					maxLength={6}
					width={10}
				/>
			</div>

			<div css={spaceBetween}>
				<TextInput
					id="account-number-input"
					data-qm-masking="blocklist"
					value={props.accountNumber}
					autoComplete="off"
					onChange={(e) =>
						props.onChange('accountNumber', () =>
							props.updateAccountNumber(e.target.value),
						)
					}
					minLength={6}
					maxLength={8}
					type="text"
					inputMode="numeric"
					pattern="[0-9]*"
					label="Account number"
					error={props.accountNumberError}
				/>
			</div>

			<div css={[spaceBetween, passThroughClicksToInput]}>
				<Checkbox
					value="account-holder-confirmation"
					id="account-holder-confirmation"
					onChange={(e) =>
						props.onChange('accountHolderConfirmation', () =>
							props.updateAccountHolderConfirmation(e.target.checked),
						)
					}
					checked={props.accountHolderConfirmation}
					supporting="I confirm that I am the account holder and I am solely able to authorise debit from
          the account"
					error={!!props.accountHolderConfirmationError}
				/>
			</div>

			<ThemeProvider theme={buttonThemeReaderRevenueBrand}>
				<Button
					id="qa-direct-debit-submit"
					onClick={props.onSubmit}
					priority="primary"
					icon={<SvgArrowRightStraight />}
					iconSide="right"
				>
					Confirm
				</Button>
			</ThemeProvider>
			{props.accountErrorsLength > 0 && (
				<ErrorSummary errors={[...props.accountErrors]} />
			)}
			{props.showGeneralError && (
				<GeneralErrorMessage
					errorReason={props.submissionError ?? props.formError}
					errorHeading={props.submissionErrorHeading}
				/>
			)}
		</div>
	);
}