Skip to main content

Sign Up Block

The SignUp Component is a fully customizable and accessible sign-up form built with React and TypeScript. It provides a complete user registration interface with modern design patterns, form validation, terms acceptance, and flexible customization options.

๐Ÿš€ Installationโ€‹

npm install @nodeblocks/frontend-signup-block@0.3.2

๐Ÿ“– Usageโ€‹

import {SignUp} from '@nodeblocks/frontend-signup-block';
function BasicSignUp() {
  return (
    <SignUp
      onChange={(setError, getValues, clearErrors) => {
        console.log('Form values:', getValues());
        const values = getValues();
        if (!values.email) {
          setError('email', {message: 'Email is required', type: 'required'});
        } else {
          clearErrors('email');
        }
      }}
      onSubmit={formData => {
        console.log('Form submitted:', formData);
      }}
      style={{display: 'flex', flexDirection: 'column', gap: '16px'}}>
      <SignUp.SignUpTitle>Create Your Account</SignUp.SignUpTitle>
      <SignUp.EmailField label="Email Address" placeholder="Enter your email" />
      <SignUp.PasswordField label="Password" placeholder="Enter your password" />
      <SignUp.TermsOfUse name="agreesUserAgreement" label="I agree to the terms of use" />
      <SignUp.PrivacyPolicy name="agreesPrivacyPolicy" label="I agree to the privacy policy" />
      <SignUp.SignUpButton>Sign Up</SignUp.SignUpButton>
      <SignUp.GotoSignIn>
        <span>Already have an account? <a href="#signin">Sign In</a></span>
      </SignUp.GotoSignIn>
    </SignUp>
  );
}

๐Ÿ”ง Props Referenceโ€‹

Main Component Propsโ€‹

PropTypeDefaultDescription
onSubmitSubmitHandler<T>RequiredCallback function triggered when form is submitted with valid data
onChange(setError, getValues, clearErrors) => voidRequiredCallback function triggered when form values change. Provides form control functions for validation
defaultDataDefaultValues<T>undefinedDefault form values to populate fields on initial render
dataTundefinedControlled form values - use this for external form state management
childrenBlocksOverrideundefinedCustom block components to override default rendering
classNamestringundefinedAdditional CSS class name for styling the form container

Note: This component additional inherits some common HTML form element props.

Sub-Componentsโ€‹

The SignUp component provides several sub-components. All sub-components receive their default values from the main component's context and can override these values through props.

SignUp.SignUpTitleโ€‹

PropTypeDefaultDescription
childrenReactNodeFrom contextTitle content
sizeenum"2XL"Typography size for the title
typeenum"heading"Typography type
colorenum"low-emphasis"Color theme for the title
weightenum"bold"Weight of the title
classNamestringundefinedAdditional CSS class name for styling

SignUp.EmailFieldโ€‹

PropTypeDefaultDescription
namestring"email"Field name used for form data and validation
labelstring"Email"Field label displayed above the input
placeholderstring"Please enter your email"Placeholder text shown when field is empty
isRequiredbooleantrueWhether the field is required (shows red asterisk)
isDisabledbooleanundefinedWhether the input is disabled
errorTextstringundefinedError text for the input
classNamestringundefinedAdditional CSS class name for styling

Note: This component additional inherits some common HTML input element props.

SignUp.PasswordFieldโ€‹

PropTypeDefaultDescription
namestring"password"Field name used for form data and validation
labelstring"Password"Field label displayed above the input
placeholderstring"Please enter your password"Placeholder text shown when field is empty
inputTypestring"password"Input type - typically "password" or "text"
isRequiredbooleantrueWhether the field is required (shows red asterisk)
isDisabledbooleanundefinedWhether the input is disabled
errorTextstringundefinedError text for the input
classNamestringundefinedAdditional CSS class name for styling

Note: This component additional inherits some common HTML input element props.

SignUp.TermsOfUseโ€‹

Inherits all props from the HTML input element and adds:

PropTypeDefaultDescription
namestring"agreesUserAgreement"Field name used for form data and validation
labelReactNodeDefault terms linkContent for the terms of use checkbox label - typically contains a link
isRequiredbooleantrueWhether the field is required (shows red asterisk)
isDisabledbooleanundefinedWhether the input is disabled
errorTextstringundefinedError text for the input
classNamestringundefinedAdditional CSS class name for styling

SignUp.PrivacyPolicyโ€‹

Inherits all props from the HTML input element and adds:

PropTypeDefaultDescription
namestring"agreesPrivacyPolicy"Field name used for form data and validation
labelReactNodeDefault privacy policy linkContent for the privacy policy checkbox label - typically contains a link
isRequiredbooleantrueWhether the field is required (shows red asterisk)
isDisabledbooleanundefinedWhether the input is disabled
errorTextstringundefinedError text for the input
classNamestringundefinedAdditional CSS class name for styling

SignUp.SignUpButtonโ€‹

PropTypeDefaultDescription
childrenReactNode"Sign Up"Button text content
classNamestringundefinedAdditional CSS class name for styling
fillenum"fill"Button fill style
iconenumundefinedOptional icon for the left-hand side of the button
iconColorenumundefinedColor for the left-hand side icon. When not provided, a default color for the fill type will be used.
isDisabledbooleanfalseWhether the button is disabled and cannot be used
onClickfunctionundefinedFunction to handle button click
sizeenum"M"Button vertical size
textAlignenum"center"Button icon and text positioning within the button
textColorenum"default"Button text color
textEmphasisbooleanfalseButton text weight
textSizeenum"M"Button text size
typeenum"submit"Button purpose (affects html type)

SignUp.GotoSignInโ€‹

Inherits all props from the HTML div element (except children) and adds:

PropTypeDefaultDescription
childrenReactNodeDefault signin linkContent for the signin link section - typically contains an anchor tag
classNamestringundefinedAdditional CSS class name for styling

๐Ÿ”ง TypeScript Supportโ€‹

Full TypeScript support with comprehensive type definitions:

import {SignUp} from '@nodeblocks/frontend-signup-block';
//in future we will not use react-hook-form, we will use our own form handling
import {UseFormClearErrors, UseFormGetValues, UseFormSetError} from 'react-hook-form';

// Default form data structure
interface DefaultSignUpFormData {
  email?: string;
  password?: string;
  agreesPrivacyPolicy?: boolean;
  agreesUserAgreement?: boolean;
}

// Extend with custom fields
interface CustomSignUpFormData extends DefaultSignUpFormData {
  firstName?: string;
  lastName?: string;
  phone?: string;
}

const MySignUpForm = () => {
  const handleSubmit = (formData: CustomSignUpFormData) => {
    console.log('Form submitted:', formData);
    // Handle form submission
  };

  const handleChange = (
    setError: UseFormSetError<CustomSignUpFormData>,
    getValues: UseFormGetValues<CustomSignUpFormData>,
    clearErrors: UseFormClearErrors<CustomSignUpFormData>,
  ) => {
    const values = getValues();

    // Custom validation
    if (values.email && !values.email.includes('@')) {
      setError('email', {message: 'Invalid email format'});
    } else {
      clearErrors('email');
    }
  };

  return (
    <SignUp<DefaultSignUpFormData>
      onSubmit={handleSubmit}
      onChange={handleChange}
      defaultData={{email: 'user@example.com'}}>
      <SignUp.SignUpTitle>Create Account</SignUp.SignUpTitle>
      <SignUp.EmailField />
      <SignUp.PasswordField />
      <SignUp.TermsOfUse
        name="agreesUserAgreement"
        label={
          <span>
            I agree to the <a href="#terms">Terms of Service</a>
          </span>
        }
      />
      <SignUp.PrivacyPolicy
        name="agreesPrivacyPolicy"
        label={
          <span>
            I agree to the <a href="#privacy">Privacy Policy</a>
          </span>
        }
      />
      <SignUp.SignUpButton>Register</SignUp.SignUpButton>
      <SignUp.GotoSignIn>
        <span>
          Already have an account? <a href="#signin">Sign In</a>
        </span>
      </SignUp.GotoSignIn>
    </SignUp>
  );
};

Built with โค๏ธ using React, TypeScript, and modern web standards.