Create Organization Block

The CreateOrganization Component is a fully customizable and accessible organization registration form built with React, TypeScript, and MUI. It provides a complete business registration interface with form validation using react-hook-form, multi-section organization, and flexible customization options.

🚀 Installation

npm install @nodeblocks/frontend-create-organization-block@0.2.0

📖 Usage

import {CreateOrganization} from '@nodeblocks/frontend-create-organization-block';

Basic Usage
Advanced Usage

Live Editor

function SimpleCreateOrganization() {
  const handleCreateOrganization = (data) => {
    console.log('Organization created:', data);
  };

  return (
    <CreateOrganization
      onCreateOrganization={handleCreateOrganization}
      termsOfUseUrl="#terms"
      privacyAgreementUrl="#privacy"
      sx={{maxWidth: 600, mx: 'auto', p: 3}}
    >
      <CreateOrganization.Title>Create Your Organization</CreateOrganization.Title>
      <CreateOrganization.Description>
        Please fill out the form below to register your organization
      </CreateOrganization.Description>
      <CreateOrganization.Form>
        <CreateOrganization.Form.AccountHolder>
          <CreateOrganization.Form.AccountHolder.SectionTitle>
            Account Holder Information
          </CreateOrganization.Form.AccountHolder.SectionTitle>
          <CreateOrganization.Form.AccountHolder.Name />
          <CreateOrganization.Form.AccountHolder.Email />
          <CreateOrganization.Form.AccountHolder.Contact />
        </CreateOrganization.Form.AccountHolder>
        <CreateOrganization.Form.CompanyInformation>
          <CreateOrganization.Form.CompanyInformation.SectionTitle>
            Company Information
          </CreateOrganization.Form.CompanyInformation.SectionTitle>
          <CreateOrganization.Form.CompanyInformation.CompanyName />
        </CreateOrganization.Form.CompanyInformation>
        <CreateOrganization.Form.Compliance>
          <CreateOrganization.Form.Compliance.CheckUserAgreement />
          <CreateOrganization.Form.Compliance.CheckPrivacyAgreement />
        </CreateOrganization.Form.Compliance>
        <CreateOrganization.Form.SubmitButton>Submit</CreateOrganization.Form.SubmitButton>
      </CreateOrganization.Form>
    </CreateOrganization>
  );
}

Result

Live Editor

function AdvancedCreateOrganization() {
  const handleCreateOrganization = (data) => {
    console.log('Organization created:', data);
  };

  const handleChange = (setError, getValues) => {
    const values = getValues();
    if (values.companyName && values.companyName.length < 3) {
      setError('companyName', {
        type: 'minLength',
        message: 'Company name must be at least 3 characters',
      });
    }
  };

  return (
    <CreateOrganization
      onCreateOrganization={handleCreateOrganization}
      onChange={handleChange}
      termsOfUseUrl="#terms-of-service"
      privacyAgreementUrl="#privacy-policy"
      sx={{
        maxWidth: 700,
        mx: 'auto',
        p: 0,
      }}
    >
      {({defaultBlocks, defaultBlockOrder}) => ({
        blocks: {
          title: {
            ...defaultBlocks.title,
            props: {
              ...defaultBlocks.title.props,
              children: 'Organization Registration',
              sx: {
                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                WebkitBackgroundClip: 'text',
                WebkitTextFillColor: 'transparent',
                fontSize: '2rem',
                fontWeight: 700,
              },
            },
          },
          description: {
            ...defaultBlocks.description,
            props: {
              ...defaultBlocks.description.props,
              children: 'Complete the form below to create your organization profile',
              sx: {
                color: '#64748b',
                textAlign: 'center',
              },
            },
          },
          form: {
            ...defaultBlocks.form,
            props: {
              ...defaultBlocks.form.props,
              sx: {
                background: 'rgba(255, 255, 255, 0.9)',
                borderRadius: '20px',
                padding: '24px',
                boxShadow: '0 8px 32px rgba(0,0,0,0.08)',
              },
            },
          },
        },
        blockOrder: defaultBlockOrder,
      })}
    </CreateOrganization>
  );
}

Result

🔧 Props Reference

Main Component Props

Prop	Type	Default	Description
`onCreateOrganization`	`(data: T) => void`	Required	Callback function triggered when form is submitted
`defaultValues`	`DefaultValues<T>`	`undefined`	Default form values for react-hook-form
`onChange`	`(setError, getValues) => void`	`undefined`	Callback when form values change
`termsOfUseUrl`	`string`	`"/terms-of-use"`	URL for terms of use link
`privacyAgreementUrl`	`string`	`"/privacy-policy"`	URL for privacy policy link
`className`	`string`	`undefined`	Additional CSS class name for styling
`children`	`BlocksOverride`	`undefined`	Function to override default blocks

Note: The main component inherits MUI Stack props. Root container uses spacing={4} and sx={{ p: 3 }} by default.

Sub-Components

CreateOrganization.Title

Prop	Type	Default	Description
`children`	`ReactNode`	`"Create your Organization"`	Title content
`className`	`string`	`undefined`	Additional CSS class name

Note: Inherits MUI Typography props. Uses variant="h4", component="h2", centered text with bold font weight.

CreateOrganization.Description

Prop	Type	Default	Description
`children`	`ReactNode`	Default description text	Description content
`className`	`string`	`undefined`	Additional CSS class name

Note: Inherits MUI Typography props. Uses variant="body2" with secondary text color and centered alignment.

CreateOrganization.Form

Prop	Type	Default	Description
`children`	`BlocksOverride`	`undefined`	Form content sections
`className`	`string`	`undefined`	Additional CSS class name

Note: Inherits MUI Stack props with component="form". Uses spacing={6} by default.

CreateOrganization.Form.AccountHolder

Prop	Type	Default	Description
`children`	`BlocksOverride`	`undefined`	Account holder fields
`className`	`string`	`undefined`	Additional CSS class name

Note: Inherits MUI Stack props. Uses spacing={4} by default.

Account Holder Sub-Components:

Component	Default Name	Default Label	Required
`AccountHolder.SectionTitle`	-	"Account Holder Contact Information"	-
`AccountHolder.Name`	`applicationUserName`	"Name"	Yes
`AccountHolder.Email`	`applicationUserEmail`	"Email"	Yes
`AccountHolder.Contact`	`applicationUserPhoneNumber`	"Phone Number"	Yes

CreateOrganization.Form.CompanyInformation

Prop	Type	Default	Description
`children`	`BlocksOverride`	`undefined`	Company information fields
`className`	`string`	`undefined`	Additional CSS class name

Note: Inherits MUI Stack props. Uses spacing={4} by default.

Company Information Sub-Components:

Component	Default Name	Default Label	Required
`CompanyInformation.SectionTitle`	-	"Company Information"	-
`CompanyInformation.CompanyName`	`companyName`	"Company Name"	Yes
`CompanyInformation.CompanyCapital`	`capitalRange`	"Capital Range"	Yes
`CompanyInformation.CompanySize`	`numberOfEmployees`	"Number of Employees"	Yes
`CompanyInformation.HomePageUrl`	`companyUrl`	"Home Page URL"	Yes
`CompanyInformation.AdditionalInformation`	`additionalInformation`	"Additional Information"	No

CreateOrganization.Form.CompanyInformation.CompanyAddress

Prop	Type	Default	Description
`children`	`BlocksOverride`	`undefined`	Address fields
`className`	`string`	`undefined`	Additional CSS class name

Note: Inherits MUI Stack props. Uses spacing={2.5} by default.

Company Address Sub-Components:

Component	Default Name	Default Label	Required
`CompanyAddress.LocationTitle`	-	"Head Office Location"	-
`CompanyAddress.PostCode`	`postcode`	"Post Code"	Yes
`CompanyAddress.Prefecture`	`prefecture`	"Prefecture"	Yes
`CompanyAddress.City`	`cityTownVillage`	"City"	Yes
`CompanyAddress.TownAddress`	`townStreetBuilding`	"Address"	Yes
`CompanyAddress.RepresentativePersonName`	`representivePersonName`	"Representative Name"	Yes
`CompanyAddress.RepresentativeContact`	`representativePhoneNumber`	"Representative Phone Number"	Yes

Note: Prefecture field has 47 Japanese prefectures pre-configured as options.

CreateOrganization.Form.Compliance

Prop	Type	Default	Description
`children`	`BlocksOverride`	`undefined`	Compliance checkboxes
`className`	`string`	`undefined`	Additional CSS class name

Note: Inherits MUI Stack props. Uses spacing={3}, direction="row", justifyContent="center" by default.

Compliance Sub-Components:

Component	Default Name	Description
`Compliance.CheckUserAgreement`	`userAgreement`	Terms of use agreement checkbox
`Compliance.CheckPrivacyAgreement`	`privacyPolicy`	Privacy policy agreement checkbox

CreateOrganization.Form.SubmitButton

Prop	Type	Default	Description
`children`	`ReactNode`	`"Submit"`	Button text
`className`	`string`	`undefined`	Additional CSS class name

Note: Inherits MUI Button props. Uses variant="contained", size="large", type="submit". Button is disabled when form is invalid.

🎨 Configuration examples

Custom Title Styling

<CreateOrganization.Title
  sx={{
    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    fontSize: '2rem',
    fontWeight: 700,
  }}
>
  Register Your Company
</CreateOrganization.Title>

Custom Field Labels

<CreateOrganization.Form.AccountHolder.Name 
  label="Full Name" 
  placeholder="Enter your full name"
/>

Custom Select Options

<CreateOrganization.Form.CompanyInformation.CompanyCapital 
  options={[
    { value: 'small', label: 'Under $1M' },
    { value: 'medium', label: '$1M - $10M' },
    { value: 'large', label: 'Over $10M' },
  ]}
/>

Using Block Override Pattern

<CreateOrganization onCreateOrganization={handleSubmit} termsOfUseUrl="#terms" privacyAgreementUrl="#privacy">
  {({defaultBlocks, defaultBlockOrder}) => ({
    blocks: {
      form: {
        ...defaultBlocks.form,
        props: {
          ...defaultBlocks.form.props,
          sx: {
            bgcolor: 'background.paper',
            borderRadius: 4,
            p: 4,
          },
        },
      },
    },
    blockOrder: defaultBlockOrder,
  })}
</CreateOrganization>

🔧 TypeScript Support

Full TypeScript support with comprehensive type definitions:

import {CreateOrganization} from '@nodeblocks/frontend-create-organization-block';
import { StackProps } from '@mui/material';
import { DefaultValues, UseFormGetValues, UseFormSetError } from 'react-hook-form';

// Default form data interface
type DefaultCreateOrganizationFormData = {
  applicationUserName?: string;
  applicationUserEmail?: string;
  applicationUserPhoneNumber?: string;
  companyName?: string;
  postcode?: string;
  cityTownVillage?: string;
  townStreetBuilding?: string;
  representivePersonName?: string;
  representativePhoneNumber?: string;
  companyUrl?: string;
  additionalInformation?: string;
  prefecture?: string;
  capitalRange?: string;
  numberOfEmployees?: string;
  userAgreement?: string;
  privacyPolicy?: string;
};

// Main component props interface
interface CreateOrganizationProps<T extends DefaultCreateOrganizationFormData> 
  extends Omit<StackProps, 'children' | 'onSubmit' | 'onChange'> {
  onCreateOrganization: (data: T) => void;
  defaultValues?: DefaultValues<T>;
  onChange?: (setError: UseFormSetError<T>, getValues: UseFormGetValues<T>) => void;
  termsOfUseUrl?: string;
  privacyAgreementUrl?: string;
  children?: BlocksOverride;
}

// Custom form data with additional fields
interface CustomOrganizationFormData extends DefaultCreateOrganizationFormData {
  customField?: string;
}

// Complete typed example with validation
function TypedCreateOrganization() {
  const handleCreateOrganization = (data: CustomOrganizationFormData): void => {
    console.log('Company name:', data.companyName);
    console.log('Account holder:', data.applicationUserName);
    // API call to create organization
  };

  const handleChange = (
    setError: UseFormSetError<CustomOrganizationFormData>,
    getValues: UseFormGetValues<CustomOrganizationFormData>,
  ): void => {
    const values = getValues();
    // Real-time validation
    if (values.companyName && values.companyName.length > 50) {
      setError('companyName', {
        type: 'maxLength',
        message: 'Company name cannot exceed 50 characters',
      });
    }
  };

  return (
    <CreateOrganization<CustomOrganizationFormData>
      onCreateOrganization={handleCreateOrganization}
      onChange={handleChange}
      termsOfUseUrl="/terms"
      privacyAgreementUrl="/privacy"
      defaultValues={{
        applicationUserName: 'Jane Doe',
        applicationUserEmail: 'jane@company.com',
      }}
      sx={{
        maxWidth: 600,
        mx: 'auto',
        p: 3,
        border: '1px solid #e5e7eb',
        borderRadius: 2,
      }}
    >
      <CreateOrganization.Title>Register Your Organization</CreateOrganization.Title>
      <CreateOrganization.Description>
        Complete the form below to create your organization profile
      </CreateOrganization.Description>
      <CreateOrganization.Form>
        <CreateOrganization.Form.AccountHolder />
        <CreateOrganization.Form.CompanyInformation />
        <CreateOrganization.Form.Compliance />
        <CreateOrganization.Form.SubmitButton>Create Organization</CreateOrganization.Form.SubmitButton>
      </CreateOrganization.Form>
    </CreateOrganization>
  );
}

📝 Notes

The root component uses MUI's Stack with default spacing={4} and sx={{ p: 3 }} padding
Form validation is handled by react-hook-form with mode: 'onBlur'
The submit button is automatically disabled when the form is invalid (!formState.isValid)
Default title is "Create your Organization" if no children provided
Default description includes instructions about required fields marked with asterisk
AccountHolder section displays Name and Email fields in a row layout
CompanyAddress is nested inside CompanyInformation with its own sub-components
Prefecture field comes with all 47 Japanese prefectures pre-configured
Compliance checkboxes link to termsOfUseUrl and privacyAgreementUrl props
All text fields use MUI TextField with fullWidth by default
Select fields use MUI TextField with select prop and displayEmpty
Checkbox fields use MUI FormControlLabel with Checkbox
All sub-components support the sx prop for MUI system styling
Block override pattern allows customizing, replacing, or reordering default blocks

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

🚀 Installation​

📖 Usage​

🔧 Props Reference​

Main Component Props​

Sub-Components​

CreateOrganization.Title​

CreateOrganization.Description​

CreateOrganization.Form​

CreateOrganization.Form.AccountHolder​

CreateOrganization.Form.CompanyInformation​

CreateOrganization.Form.CompanyInformation.CompanyAddress​

CreateOrganization.Form.Compliance​

CreateOrganization.Form.SubmitButton​

🎨 Configuration examples​

Custom Title Styling​

Custom Field Labels​

Custom Select Options​

Using Block Override Pattern​

🔧 TypeScript Support​

📝 Notes​