Create Organization Block

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

---

🚀 Installation

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

---

📖 Usage

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

Basic Usage

Live Editor

function BasicCreateOrganization() {
  return (
    <CreateOrganization
      onCreateOrganization={(formData) => {
        console.log('Organization created:', formData);
      }}>
      <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.PostCode />
          <CreateOrganization.Form.CompanyInformation.Prefecture selectOptionValues={[
            {value: 'tokyo', label: 'Tokyo'},
            {value: 'osaka', label: 'Osaka'}
          ]} />
          <CreateOrganization.Form.CompanyInformation.City />
          <CreateOrganization.Form.CompanyInformation.TownAddress />
          <CreateOrganization.Form.CompanyInformation.RepresentativePersonName />
          <CreateOrganization.Form.CompanyInformation.RepresentativeContact />
          <CreateOrganization.Form.CompanyInformation.CompanyCapital selectOptionValues={[
            {value: '1m-10m', label: '1M - 10M JPY'},
            {value: '10m-100m', label: '10M - 100M JPY'}
          ]} />
          <CreateOrganization.Form.CompanyInformation.CompanySize selectOptionValues={[
            {value: '1-10', label: '1-10 employees'},
            {value: '11-50', label: '11-50 employees'}
          ]} />
          <CreateOrganization.Form.CompanyInformation.HomePageUrl />
          <CreateOrganization.Form.CompanyInformation.AdditionalInformation />
        </CreateOrganization.Form.CompanyInformation>
        
        <CreateOrganization.Form.Compliance>
          <CreateOrganization.Form.Compliance.CheckUserAgreement />
          <CreateOrganization.Form.Compliance.CheckPrivacyAgreement />
        </CreateOrganization.Form.Compliance>
        
        <CreateOrganization.Form.SubmitButton>
          Create Organization
        </CreateOrganization.Form.SubmitButton>
      </CreateOrganization.Form>
    </CreateOrganization>
  );
}

Result

Loading...

Advanced Usage

Live Editor

function AdvancedCreateOrganization() {
  const handleCreateOrganization = (formData) => {
    console.log('🏢 新しい組織が作成されました:', formData);
    // Enhanced form submission with validation
  };

  return (
    <CreateOrganization onCreateOrganization={console.log}>
      {({defaultBlocks, defaultBlockOrder}) => ({
        blocks: {
          // Enhanced title with gradient styling
          title: {
            ...defaultBlocks.title,
            props: {
              ...defaultBlocks.title.props,
              children: '🏢 企業組織登録フォーム',
            },
          },

          // Enhanced description with modern styling
          description: {
            ...defaultBlocks.description,
            props: {
              ...defaultBlocks.description.props,
              children: '以下のフォームにご記入いただき、貴社の組織プロフィールを作成してください',
            },
          },

          // Enhanced form with professional styling
          form: {
            ...defaultBlocks.form,
            props: {
              ...defaultBlocks.form.props,
              style: {
                background: 'rgba(255, 255, 255, 0.9)',
                borderRadius: '20px',
                padding: '24px',
                backdropFilter: 'blur(10px)',
                border: '1px solid rgba(255,255,255,0.4)',
                boxShadow: '0 8px 32px rgba(0,0,0,0.08)',
              },
              children: (
                <>
                  {/* Enhanced Account Holder Section */}
                  <CreateOrganization.Form.AccountHolder>
                    <CreateOrganization.Form.AccountHolder.SectionTitle>
                      👤 アカウント責任者情報
                    </CreateOrganization.Form.AccountHolder.SectionTitle>
                    <CreateOrganization.Form.AccountHolder.Name label="責任者名" />
                    <CreateOrganization.Form.AccountHolder.Email label="メールアドレス" />
                    <CreateOrganization.Form.AccountHolder.Contact label="電話番号" />
                  </CreateOrganization.Form.AccountHolder>

                  {/* Enhanced Company Information Section */}
                  <CreateOrganization.Form.CompanyInformation>
                    {({defaultBlocks, defaultBlockOrder}) => ({
                      blocks: {
                        ...defaultBlocks,
                        sectionTitle: {
                          ...defaultBlocks.sectionTitle,
                          props: {
                            ...defaultBlocks.sectionTitle.props,
                            style: {
                              color: '#764ba2',
                              fontSize: '20px',
                              fontWeight: 'bold',
                              marginBottom: '20px',
                              display: 'flex',
                              alignItems: 'center',
                              gap: '8px',
                            },
                            children: '🏢 会社情報',
                          },
                        },
                        companyName: {
                          ...defaultBlocks.companyName,
                          props: {
                            ...defaultBlocks.companyName.props,
                            label: '会社名',
                            style: {marginBottom: '16px'},
                          },
                        },
                        postCode: {
                          ...defaultBlocks.postCode,
                          props: {
                            ...defaultBlocks.postCode.props,
                            label: '郵便番号',
                            style: {marginBottom: '16px'},
                          },
                        },
                        prefecture: {
                          ...defaultBlocks.prefecture,
                          props: {
                            ...defaultBlocks.prefecture.props,
                            label: '都道府県',
                            style: {marginBottom: '16px'},
                            selectOptionValues: [
                              {value: 'tokyo', label: '東京都'},
                              {value: 'osaka', label: '大阪府'},
                              {value: 'kyoto', label: '京都府'},
                              {value: 'kanagawa', label: '神奈川県'},
                            ],
                          },
                        },
                        city: {
                          ...defaultBlocks.city,
                          props: {
                            ...defaultBlocks.city.props,
                            label: '市区町村',
                            style: {marginBottom: '16px'},
                          },
                        },
                        townAddress: {
                          ...defaultBlocks.townAddress,
                          props: {
                            ...defaultBlocks.townAddress.props,
                            label: '町名・番地',
                            style: {marginBottom: '16px'},
                          },
                        },
                        representativePersonName: {
                          ...defaultBlocks.representativePersonName,
                          props: {
                            ...defaultBlocks.representativePersonName.props,
                            label: '代表者名',
                            style: {marginBottom: '16px'},
                          },
                        },
                        representativeContact: {
                          ...defaultBlocks.representativeContact,
                          props: {
                            ...defaultBlocks.representativeContact.props,
                            label: '代表者電話番号',
                            style: {marginBottom: '16px'},
                          },
                        },
                        companyCapital: {
                          ...defaultBlocks.companyCapital,
                          props: {
                            ...defaultBlocks.companyCapital.props,
                            label: '資本金範囲',
                            style: {marginBottom: '16px'},
                            selectOptionValues: [
                              {value: '1m-10m', label: '100万円 - 1,000万円'},
                              {value: '10m-100m', label: '1,000万円 - 1億円'},
                              {value: '100m-1b', label: '1億円 - 10億円'},
                            ],
                          },
                        },
                        companySize: {
                          ...defaultBlocks.companySize,
                          props: {
                            ...defaultBlocks.companySize.props,
                            label: '従業員数',
                            style: {marginBottom: '16px'},
                            selectOptionValues: [
                              {value: '1-10', label: '1-10名'},
                              {value: '11-50', label: '11-50名'},
                              {value: '51-200', label: '51-200名'},
                              {value: '201+', label: '201名以上'},
                            ],
                          },
                        },
                        homePageUrl: {
                          ...defaultBlocks.homePageUrl,
                          props: {
                            ...defaultBlocks.homePageUrl.props,
                            label: 'ホームページURL',
                            style: {marginBottom: '16px'},
                          },
                        },
                        additionalInformation: {
                          ...defaultBlocks.additionalInformation,
                          props: {
                            ...defaultBlocks.additionalInformation.props,
                            label: '追加情報',
                            style: {marginBottom: '16px'},
                          },
                        },
                      },
                      blockOrder: defaultBlockOrder,
                    })}
                  </CreateOrganization.Form.CompanyInformation>

                  {/* Enhanced Compliance Section */}
                  <CreateOrganization.Form.Compliance>
                    <div
                      style={{
                        background:
                          'linear-gradient(135deg, rgba(52, 152, 219, 0.05) 0%, rgba(155, 89, 182, 0.05) 100%)',
                        padding: '24px',
                        borderRadius: '16px',
                        border: '1px solid rgba(52, 152, 219, 0.1)',
                        marginBottom: '24px',
                      }}
                    >
                      <CreateOrganization.Form.Compliance.CheckUserAgreement
                        label="📋 利用規約への同意"
                        message="本アプリケーションの利用規約に同意する場合は、このボックスにチェックを入れてください"
                      />
                      <CreateOrganization.Form.Compliance.CheckPrivacyAgreement
                        label="🔒 プライバシーポリシーへの同意"
                        message="プライバシーポリシーの内容を理解し、同意する場合は、このボックスにチェックを入れてください"
                      />
                    </div>
                  </CreateOrganization.Form.Compliance>

                  {/* Enhanced Submit Button */}
                  <CreateOrganization.Form.SubmitButton>🚀 組織を作成する</CreateOrganization.Form.SubmitButton>
                </>
              ),
            },
          },
        },
        blockOrder: defaultBlockOrder,
      })}
    </CreateOrganization>
  );
}

Result

Loading...

---

🔧 Props Reference

Main Component Props

Prop	Type	Default	Description
onCreateOrganization	(data: T) => void	Required	Callback function triggered when form is submitted with organization data
className	string	undefined	Additional CSS class name for styling the form container
children	BlocksOverride	undefined	Function to override default blocks or custom component rendering
direction	enum	"column"	Flex direction for action buttons
alignItems	enum	"stretch"	Alignment of items in the container
gapSize	enum	"S"	Gap between items in the container
children	BlocksOverride	undefined	Custom block components to override default rendering

Sub-Components

The CreateOrganization 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.

CreateOrganization.Title

Prop	Type	Default	Description
children	ReactNode	Required	Content to display as the main title
size	enum	"2XL"	Typography size for the title
type	enum	"heading"	Typography type
color	enum	"low-emphasis"	Color theme for the title
weight	enum	"bold"	Typography weight
className	string	undefined	Additional CSS class name for styling

CreateOrganization.Description

Prop	Type	Default	Description
children	ReactNode	Required	Content to display as the description text
className	string	undefined	Additional CSS class name for styling
size	enum	"L"	Typography size for the title
type	enum	"heading"	Typography type
color	enum	"low-emphasis"	Color theme for the title
weight	enum	"regular"	Typography weight
className	string	undefined	Additional CSS class name for styling

CreateOrganization.Form

Prop	Type	Default	Description
children	BlocksOverride	undefined	Form content with account holder, company information, and compliance sections
className	string	undefined	Additional CSS class name for styling

Note: This component inherits all HTML form element props.

CreateOrganization.Form.AccountHolder

Prop	Type	Default	Description
children	BlocksOverride	undefined	Custom content to override default account holder fields
className	string	undefined	Additional CSS class name for styling
direction	enum	"column"	Flex direction for action buttons
alignItems	enum	"stretch"	Alignment of items in the container
gapSize	enum	"S"	Gap between items in the container

CreateOrganization.Form.AccountHolder.SectionTitle

Prop	Type	Default	Description
children	ReactNode	"Account Holder Contact Information"	Section title text
size	enum	"L"	Typography size for the title
type	enum	"heading"	Typography type
color	enum	"low-emphasis"	Color theme for the title
weight	enum	"bold"	Typography weight
className	string	undefined	Additional CSS class name for styling

CreateOrganization.Form.AccountHolder.Name

Prop	Type	Default	Description
name	string	"applicationUserEmail"	Field name for form data
className	string	undefined	Additional CSS class name for styling
errorText	string	undefined	Error text for the input
isDisabled	boolean	undefined	Whether the input is disabled
isRequired	boolean	undefined	Whether the input is required
label	string	"Account Holder Name"	Label of the input field
labelWeight	enum	"bold"	Label weight
onOperationClick	() => void	undefined	Operation onClick callback
postfixText	string	undefined	Text to place after the component
showPassword	boolean	undefined	Whether to show password

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

CreateOrganization.Form.AccountHolder.Email

Prop	Type	Default	Description
name	string	"applicationUserEmail"	Field name for form data
className	string	undefined	Additional CSS class name for styling
errorText	string	undefined	Error text for the input
isDisabled	boolean	undefined	Whether the input is disabled
isRequired	boolean	undefined	Whether the input is required
label	string	"Account Holder Email"	Label of the input field
labelWeight	enum	"bold"	Label weight
onOperationClick	() => void	undefined	Operation onClick callback
postfixText	string	undefined	Text to place after the component
showPassword	boolean	undefined	Whether to show password

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

CreateOrganization.Form.AccountHolder.Contact

Prop	Type	Default	Description
name	string	"applicationUserPhoneNumber"	Field name for form data
className	string	undefined	Additional CSS class name for styling
errorText	string	undefined	Error text for the input
isDisabled	boolean	undefined	Whether the input is disabled
isRequired	boolean	undefined	Whether the input is required
label	string	"Account Holder Phone Number"	Label of the input field
labelWeight	enum	"bold"	Label weight
onOperationClick	() => void	undefined	Operation onClick callback
postfixText	string	undefined	Text to place after the component
showPassword	boolean	undefined	Whether to show password

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

CreateOrganization.Form.CompanyInformation

Prop	Type	Default	Description
children	ReactNode	undefined	Custom content to override default company information fields

CreateOrganization.Form.CompanyInformation.SectionTitle

Prop	Type	Default	Description
children	ReactNode	"Account Holder Contact Information"	Section title text
size	enum	"L"	Typography size for the title
type	enum	"heading"	Typography type
color	enum	"low-emphasis"	Color theme for the title
weight	enum	"bold"	Typography weight
className	string	undefined	Additional CSS class name for styling

CreateOrganization.Form.CompanyInformation.CompanyName

Prop	Type	Default	Description
name	string	"companyName"	Field name for form data
className	string	undefined	Additional CSS class name for styling
errorText	string	undefined	Error text for the input
isDisabled	boolean	undefined	Whether the input is disabled
isRequired	boolean	undefined	Whether the input is required
label	string	"Company Name"	Label of the input field
labelWeight	enum	"bold"	Label weight
onOperationClick	() => void	undefined	Operation onClick callback
postfixText	string	undefined	Text to place after the component
showPassword	boolean	undefined	Whether to show password

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

CreateOrganization.Form.CompanyInformation.PostCode

Prop	Type	Default	Description
name	string	"postcode"	Field name for form data
className	string	undefined	Additional CSS class name for styling
errorText	string	undefined	Error text for the input
isDisabled	boolean	undefined	Whether the input is disabled
isRequired	boolean	undefined	Whether the input is required
label	string	"Post Code"	Label of the input field
labelWeight	enum	"bold"	Label weight
onOperationClick	() => void	undefined	Operation onClick callback
postfixText	string	undefined	Text to place after the component
showPassword	boolean	undefined	Whether to show password

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

CreateOrganization.Form.CompanyInformation.Prefecture

Prop	Type	Default	Description
name	string	"prefecture"	Field name for form data
label	string	"Prefecture"	Field label
labelWeight	enum	"bold"	Label weight
selectOptionValues	Array<{value: string, label: string}>	[]	Array of prefecture options
isRequired	boolean	undefined	Whether the field is required
isDisabled	boolean	undefined	Whether the input is disabled
errorText	string	undefined	Error text for the input
className	string	undefined	Additional CSS class name for styling

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

CreateOrganization.Form.CompanyInformation.City

Prop	Type	Default	Description
name	string	"cityTownVillage"	Field name for form data
className	string	undefined	Additional CSS class name for styling
errorText	string	undefined	Error text for the input
isDisabled	boolean	undefined	Whether the input is disabled
isRequired	boolean	undefined	Whether the input is required
label	string	"City"	Label of the input field
labelWeight	enum	"bold"	Label weight
onOperationClick	() => void	undefined	Operation onClick callback
postfixText	string	undefined	Text to place after the component
showPassword	boolean	undefined	Whether to show password

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

CreateOrganization.Form.CompanyInformation.TownAddress

Prop	Type	Default	Description
name	string	"townStreetBuilding"	Field name for form data
className	string	undefined	Additional CSS class name for styling
errorText	string	undefined	Error text for the input
isDisabled	boolean	undefined	Whether the input is disabled
isRequired	boolean	undefined	Whether the input is required
label	string	"Town"	Label of the input field
labelWeight	enum	"bold"	Label weight
onOperationClick	() => void	undefined	Operation onClick callback
postfixText	string	undefined	Text to place after the component
showPassword	boolean	undefined	Whether to show password

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

CreateOrganization.Form.CompanyInformation.RepresentativePersonName

Prop	Type	Default	Description
name	string	"representivePersonName"	Field name for form data
className	string	undefined	Additional CSS class name for styling
errorText	string	undefined	Error text for the input
isDisabled	boolean	undefined	Whether the input is disabled
isRequired	boolean	undefined	Whether the input is required
label	string	"Representative Person Name"	Label of the input field
labelWeight	enum	"bold"	Label weight
onOperationClick	() => void	undefined	Operation onClick callback
postfixText	string	undefined	Text to place after the component
showPassword	boolean	undefined	Whether to show password

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

CreateOrganization.Form.CompanyInformation.RepresentativeContact

Prop	Type	Default	Description
name	string	"representativePhoneNumber"	Field name for form data
className	string	undefined	Additional CSS class name for styling
errorText	string	undefined	Error text for the input
isDisabled	boolean	undefined	Whether the input is disabled
isRequired	boolean	undefined	Whether the input is required
label	string	"Representative Phone Number"	Label of the input field
labelWeight	enum	"bold"	Label weight
onOperationClick	() => void	undefined	Operation onClick callback
postfixText	string	undefined	Text to place after the component
showPassword	boolean	undefined	Whether to show password

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

CreateOrganization.Form.CompanyInformation.CompanyCapital

Prop	Type	Default	Description
name	string	"capitalRange"	Field name for form data
label	string	"Capital Range"	Field label
labelWeight	enum	"bold"	Label weight
selectOptionValues	Array<{value: string, label: string}>	[]	Array of capital range options
isRequired	boolean	true	Whether the field is required
isDisabled	boolean	undefined	Whether the input is disabled
errorText	string	undefined	Error text for the input
className	string	undefined	Additional CSS class name for styling

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

CreateOrganization.Form.CompanyInformation.CompanySize

Prop	Type	Default	Description
name	string	"numberOfEmployees"	Field name for form data
label	string	"Company Size"	Field label
labelWeight	enum	"bold"	Label weight
selectOptionValues	Array<{value: string, label: string}>	[]	Array of capital range options
isRequired	boolean	true	Whether the field is required
isDisabled	boolean	undefined	Whether the input is disabled
errorText	string	undefined	Error text for the input
className	string	undefined	Additional CSS class name for styling

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

CreateOrganization.Form.CompanyInformation.HomePageUrl

Prop	Type	Default	Description
name	string	"companyUrl"	Field name for form data
errorText	string	undefined	Error text for the input
isDisabled	boolean	undefined	Whether the input is disabled
isRequired	boolean	undefined	Whether the input is required
label	string	"Home Page URL"	Label of the input field
labelWeight	enum	"bold"	Label weight
onOperationClick	() => void	undefined	Operation onClick callback
postfixText	string	undefined	Text to place after the component
showPassword	boolean	undefined	Whether to show password

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

CreateOrganization.Form.CompanyInformation.AdditionalInformation

Prop	Type	Default	Description
name	string	"additionalInformation"	Field name for form data
errorText	string	undefined	Error text for the input
isDisabled	boolean	undefined	Whether the input is disabled
isRequired	boolean	undefined	Whether the input is required
label	string	"Additional Information"	Label of the input field
labelWeight	`enum
className	string	undefined	Additional CSS class name for styling

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

CreateOrganization.Form.Compliance

Prop	Type	Default	Description
children	ReactNode	undefined	Custom content to override default compliance fields

Note: This component inherits all HTML div element props.

CreateOrganization.Form.Compliance.CheckUserAgreement

Prop	Type	Default	Description
name	string	"userAgreement"	Field name for form data
label	string	"User Agreement"	Checkbox label
message	string	"Please check this box if you agree to the terms of service for this applications"	Checkbox description message
showMessage	boolean	true	Whether to show the message
className	string	undefined	Additional CSS class name for styling

Note: This component inherits all HTML checkbox element props.

CreateOrganization.Form.Compliance.CheckPrivacyAgreement

Prop	Type	Default	Description
name	string	"privacyPolicy"	Field name for form data
label	string	"Privacy Agreement"	Checkbox label
message	string	"Please check this box if you agree to and understand the terms described in the privacy policy"	Checkbox description message
showMessage	boolean	true	Whether to show the message
className	string	undefined	Additional CSS class name for styling

Note: This component inherits all HTML checkbox element props.

CreateOrganization.Form.SubmitButton

Prop	Type	Default	Description
children	ReactNode	"Submit"	Text to place inside the button
className	string	undefined	Additional CSS class name for styling
fill	enum	"fill"	Button fill style
icon	enum	undefined	Optional icon for the left-hand side of the button
iconColor	enum	undefined	Color for the left-hand side icon. When not provided, a default color for the fill type will be used.
isDisabled	boolean	false	Whether the button is disabled and cannot be used
onClick	function	undefined	Function to handle button click
size	enum	"M"	Button vertical size
textAlign	enum	"center"	Button icon and text positioning within the button
textColor	enum	"default"	Button text color
textEmphasis	boolean	false	Button text weight
textSize	enum	"M"	Button text size
type	enum	"submit"	Button purpose (affects html type)

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

---

🔧 TypeScript Support

Full TypeScript support with comprehensive type definitions:

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

// Main component interface
interface CreateOrganizationProps extends Omit<ComponentProps<'div'>, 'children'> {
  onCreateOrganization: (data: DefaultCreateOrganizationFormData) => void;
  className?: string;
}

// Default form data interface
export 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;
};

// Usage example with full typing
interface CustomOrganizationData extends DefaultCreateOrganizationFormData {
  customField?: string;
}

const OrganizationRegistrationForm = () => {
  const handleCreateOrganization = (formData: CustomOrganizationData) => {
    console.log('Organization data:', formData);
    // Type-safe organization data handling
  };

  return (
    <CreateOrganization onCreateOrganization={handleCreateOrganization}>
      <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.CheckPrivacyAgreement />
        <CreateOrganization.Form.SubmitButton>Create Organization</CreateOrganization.Form.SubmitButton>
      </CreateOrganization.Form>
    </CreateOrganization>
  );
};

---

Built with ❤️ using React, TypeScript, and modern web standards.