SignUpForm
A complete sign up form with form validation.
SignUp form
Sign UpProps:
formTitle
Description: Text to display as form title. Type: String. Required.
submitButtonTitle
Description: SubmitButton title. Type: String. Required
submit
Description: Function to invoke at form submit, the form validation runs here. Type: Async function. Required.
formSubtitle
Description: Text to display as form subtitle. Type: String.
formAdditionalText
Description: Additional text to display on bottom form. Type: String.
emailPlaceholder
Description: Placeholder for email input. Type: String.
passwordPlaceholder
Description: Placeholder for password input. Type: String.
confirmPasswordPlaceholder
Description: Placeholder for confirm password input. Type: String.
buttonsDisabled
Disables all buttons if true. Type: Boolean.
buttonsLoading
Displays loading indicator into all buttons if true. Type: Boolean.
emailErrorMessage
Description: Displays the message error linked to email input. Type: FieldError.
passwordErrorMessage
Description: Displays the message error linked to password input. Type: FieldError.
confirmPasswordErrorMessage
Description: Displays the message error linked to confirm password input. Type: FieldError.
emailRegister
Description: Receives the function for email input validation. Type: UseFormRegisterReturn.
passwordRegister
Description: Receives the function for password confirmation input validation. Type: UseFormRegisterReturn.
confirmPasswordRegister
Description: Receives the function for password input validation. Type: UseFormRegisterReturn.
formTitleClassName
Description: FormTitle className. Type: String.
formTitleStyle
Description: FormTitle style. Type: CSS Properties.
formSubTitleClassName
Description: FormSubTitle className. Type: String.
formSubTitleStyle
Description: FormSubTitle style. Type: CSS Properties.
formAdditionalTextClassName
Description: FormAdditionalText className. Type: String.
formAdditionalTextStyle
Description: FormAdditionalText style. Type: CSS Properties.
formContainerClassName
Description: FormContainer className. Type: String.
formContainerStyle
Description: FormContainer style. Type: CSS Properties.
submitButtonClassName
Description: SubmitButton className. Type: String.
submitButtonStyle
Description: SubmitButton style. Type: CSS Properties.
emailInputStyle
Description: EmailInput style. Type: CSS Properties.
emailInputClassName
Description: EmailInput className. Type: String.
passwordInputStyle
Description: PasswordInput and ConfirmPasswordInput style. Type: CSS Properties.
passwordInputClassName
Description: PasswordInput and ConfirmPasswordInput className. Type: String.
interface SignUpFormDataProps { name: string; email: string password: string confirmPassword: string } const handleSignUp: SubmitHandler<SignUpFormDataProps> = async (values) => { await new Promise(resolve => setTimeout(resolve, 500)) toast.success(`Registered with success as ${values.email}.`) } const SignUpFormSchema = yup.object().shape({ name: yup.string().required('Name required.'), email: yup.string().required('Email required.').email('Email invalid'), password: yup.string().required('Password required'), confirmPassword: yup.string().required('Password confirmation required').oneOf([yup.ref('password')], 'Password must match'), }) const { register, handleSubmit, formState } = useForm<SignUpFormDataProps>({ resolver: yupResolver(SignUpFormSchema) }) <SignUpFormComponent formTitle='SignUp form' submitButtonTitle='Sign Up' formAdditionalText='Sign Up' emailPlaceholder='your email' nameErrorMessage={formState.errors.name} nameRegister={register('name')} namePlaceholder='your name' passwordPlaceholder='your password' confirmPasswordPlaceholder='password confirmation' emailErrorMessage={formState.errors.email} passwordErrorMessage={formState.errors.password} confirmPasswordErrorMessage={formState.errors.confirmPassword} confirmPasswordRegister={register('confirmPassword')} emailRegister={register('email')} passwordRegister={register('password')} submit={handleSubmit(handleSignUp)} />