Skip to main content

Sign Up Block

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

🚀 Installation​

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

📖 Usage​

import {SignUp} from '@nodeblocks/frontend-signup-block';
Live Editor
function BasicSignUp() {
  return (
    <SignUp
      onChange={(setError, getValues, clearErrors) => {
        const values = getValues();
        if (!values.email) {
          setError('email', {message: 'Email is required', type: 'required'});
        } else {
          clearErrors('email');
        }
      }}
      onSubmit={formData => {
        console.log('Form submitted:', formData);
      }}
    >
      <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>
  );
}
Result
Loading...

🔧 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
termsOfUseUrlstring"/terms-of-use"URL for the terms of use link
privacyPolicyUrlstring"/privacy-policy"URL for the privacy policy link
loginUrlstring"/auth/login"URL for the login link in GotoSignIn component
classNamestringundefinedAdditional CSS class name for styling the form container
sxSxPropsundefinedMUI sx prop for custom styling
childrenBlocksOverrideundefinedCustom block components to override default rendering

Note: This component extends MUI StackProps<'form'> (excluding children, onChange, and onSubmit). Uses component="form" with default spacing={4}, maxWidth: 496, px: 5, py: 6, and borderRadius: 3.

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
childrenReactNode"Create Your Account"Title content
classNamestringundefinedAdditional CSS class name for styling
variantstring"h4"MUI Typography variant
componentstring"h1"HTML element to render
sxSxPropsundefinedMUI sx prop with default textAlign: 'center'

Note: This component extends MUI TypographyProps.

SignUp.EmailField​

PropTypeDefaultDescription
namestring"email"Field name used for form data and validation
labelstring"Email Address"Field label displayed above the input
placeholderstring"Enter your email address"Placeholder text shown when field is empty
autoCompletestring"username"Browser autocomplete hint
requiredbooleantrueWhether the field is required
fullWidthbooleantrueWhether field takes full width
classNamestringundefinedAdditional CSS class name for styling

Note: This component extends MUI TextFieldProps. Error states and helper text are managed automatically by react-hook-form.

SignUp.PasswordField​

PropTypeDefaultDescription
namestring"password"Field name used for form data and validation
labelstring"Password"Field label displayed above the input
placeholderstring"Enter your password"Placeholder text shown when field is empty
autoCompletestring"new-password"Browser autocomplete hint
requiredbooleantrueWhether the field is required
fullWidthbooleantrueWhether field takes full width
classNamestringundefinedAdditional CSS class name for styling

Note: This component extends MUI TextFieldProps (excluding type). Includes built-in password visibility toggle with Visibility/VisibilityOff icons.

SignUp.TermsOfUse​

PropTypeDefaultDescription
termsOfUseUrlstringFrom contextURL for the terms of use link
namestring"agreesUserAgreement"Field name used for form data and validation
labelReactNodeLink to terms of useContent for the checkbox label
requiredbooleanundefinedWhether the checkbox is required
classNamestringundefinedAdditional CSS class name for styling
sxSxPropsundefinedMUI sx prop for custom styling

Note: This component extends MUI FormControlLabelProps (excluding control). Default link points to /terms-of-use and opens in new tab.

SignUp.PrivacyPolicy​

PropTypeDefaultDescription
privacyPolicyUrlstringFrom contextURL for the privacy policy link
namestring"agreesPrivacyPolicy"Field name used for form data and validation
labelReactNodeLink to privacy policyContent for the checkbox label
requiredbooleanundefinedWhether the checkbox is required
classNamestringundefinedAdditional CSS class name for styling
sxSxPropsundefinedMUI sx prop for custom styling

Note: This component extends MUI FormControlLabelProps (excluding control). Default link points to /privacy-policy and opens in new tab.

SignUp.SignUpButton​

PropTypeDefaultDescription
childrenReactNode"Sign Up"Button text content
variantstring"contained"MUI Button variant
sizestring"large"MUI Button size
typestring"submit"HTML button type
fullWidthbooleantrueWhether button takes full width
classNamestringundefinedAdditional CSS class name for styling

Note: This component extends MUI ButtonProps.

SignUp.GotoSignIn​

PropTypeDefaultDescription
loginUrlstringFrom contextURL for the sign in link
childrenReactNodeLink to /auth/loginContent for the sign in link section
classNamestringundefinedAdditional CSS class name for styling
sxSxPropsundefinedMUI sx prop with default textAlign: 'center'

Note: This component extends MUI BoxProps.

🎨 Configuration examples​

Custom Validation​

function ValidationSignUp() {
  const handleSubmit = (formData: SignUpFormData): void => {
    console.log('Validated form submitted:', formData);
  };

  return (
    <SignUp
      onChange={(setError, getValues, clearErrors) => {
        const {email, password} = getValues();

        if (email && !email.includes('@')) {
          setError('email', {message: 'Please enter a valid email'});
        } else {
          clearErrors('email');
        }

        if (password && password.length < 8) {
          setError('password', {message: 'Password must be at least 8 characters'});
        } else {
          clearErrors('password');
        }
      }}
      onSubmit={handleSubmit}
    >
      <SignUp.SignUpTitle
        variant="h3"
        sx={{
          color: 'primary.main',
          fontWeight: 'bold',
        }}
      >
        Join Our Platform
      </SignUp.SignUpTitle>
      <SignUp.EmailField label="Corporate Email" placeholder="name@company.com" />
      <SignUp.PasswordField label="Create Password" placeholder="Minimum 8 characters" />
      <SignUp.TermsOfUse name="agreesUserAgreement" />
      <SignUp.PrivacyPolicy name="agreesPrivacyPolicy" />
      <SignUp.SignUpButton>Sign Up</SignUp.SignUpButton>
      <SignUp.GotoSignIn />
    </SignUp>
  );
}
function CustomTermsSignUp() {
  return (
    <SignUp
      termsOfUseUrl="https://example.com#terms"
      privacyPolicyUrl="https://example.com#privacy"
      loginUrl="/login"
      onSubmit={data => console.log(data)}
      onChange={() => {}}
    >
      <SignUp.SignUpTitle>Create Account</SignUp.SignUpTitle>
      <SignUp.EmailField />
      <SignUp.PasswordField />
      <SignUp.TermsOfUse
        label={
          <span>
            I accept the <a href="#terms">Terms of Service</a> and <a href="#conditions">Conditions</a>
          </span>
        }
      />
      <SignUp.PrivacyPolicy
        label={
          <span>
            I have read the <a href="#privacy">Privacy Policy</a>
          </span>
        }
      />
      <SignUp.SignUpButton>Create Account</SignUp.SignUpButton>
      <SignUp.GotoSignIn />
    </SignUp>
  );
}

Block Override Pattern​

function BlockOverrideSignUp() {
  return (
    <SignUp onSubmit={data => console.log(data)} onChange={() => {}}>
      {({defaultBlocks}) => ({
        blocks: {
          ...defaultBlocks,
          // Add custom welcome message
          welcomeMessage: (
            <div
              style={{
                padding: '12px 16px',
                backgroundColor: '#e3f2fd',
                borderRadius: '8px',
                textAlign: 'center',
                color: '#1976d2',
              }}
            >
              Create your free account today!
            </div>
          ),
        },
        blockOrder: [
          'signUpTitle',
          'welcomeMessage',
          'emailField',
          'passwordField',
          'termsOfUse',
          'privacyPolicy',
          'signUpButton',
          'gotoSignIn',
        ],
      })}
    </SignUp>
  );
}

🔧 TypeScript Support​

Full TypeScript support with comprehensive type definitions:

import {SignUp} from '@nodeblocks/frontend-signup-block';
import {
  UseFormClearErrors,
  UseFormGetValues,
  UseFormSetError,
  SubmitHandler,
} from 'react-hook-form';

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

// Extended form data type
type SignUpFormData = DefaultSignUpFormData & Record<string, unknown>;

// Custom form data with additional fields
interface CustomSignUpFormData extends SignUpFormData {
  firstName?: string;
  lastName?: string;
  phone?: string;
}

function TypedSignUpExample() {
  const handleSubmit: SubmitHandler<CustomSignUpFormData> = formData => {
    console.log('Form submitted:', formData);
  };

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

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

  return (
    <SignUp<CustomSignUpFormData>
      onSubmit={handleSubmit}
      onChange={handleChange}
      defaultData={{email: ''}}
      termsOfUseUrl="#terms"
      privacyPolicyUrl="#privacy"
      loginUrl="/signin"
      sx={{maxWidth: 480, mx: 'auto'}}
    >
      <SignUp.SignUpTitle>Create Account</SignUp.SignUpTitle>
      <SignUp.TextField name="firstName" label="First Name" placeholder="Enter your first name" />
      <SignUp.TextField name="lastName" label="Last Name" placeholder="Enter your last name" />
      <SignUp.EmailField />
      <SignUp.PasswordField />
      <SignUp.TermsOfUse
        label={
          <span>
            I agree to the <a href="#terms">Terms of Service</a>
          </span>
        }
      />
      <SignUp.PrivacyPolicy
        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>
  );
}

📝 Notes​

  • The component uses MUI's Stack component as its base with component="form"
  • Default spacing is 4 with maxWidth: 496, px: 5, py: 6, and borderRadius: 3
  • Form state is managed by react-hook-form with mode: 'onBlur' for validation
  • The onChange callback is triggered when form values change (using useWatch)
  • Password field has built-in visibility toggle with MUI's Visibility/VisibilityOff icons
  • Error states and helper text are automatically displayed based on validation
  • Default blocks are: signUpTitle, emailField, passwordField, termsOfUse, privacyPolicy, signUpButton, gotoSignIn
  • Additional utility fields available: TextField, TimeField, CheckboxField, SelectField
  • CSS classes follow BEM-style naming: nbb-signup, nbb-signup-title, nbb-signup-email-field, etc.
  • Terms of use link defaults to /terms-of-use and opens in new tab
  • Privacy policy link defaults to /privacy-policy and opens in new tab
  • Sign in link defaults to /auth/login

Built with ❤️ using React, TypeScript, and MUI.