組織作成ブロック

CreateOrganization コンポーネント は、React と TypeScript で構築された、完全にカスタマイズ可能でアクセシブルな組織登録フォームです。フォーム検証、複数セクションの組織情報入力、柔軟なカスタマイズオプションを備えた、完全なビジネス登録インターフェースを提供します。

---

🚀 インストール

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

---

📖 使用方法

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

基本使用

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>
  );
}

詳細使用

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>
  );
}

---

🔧 プロパティリファレンス

メインコンポーネントのプロパティ

プロパティ	型	デフォルト	説明
onCreateOrganization	(data: T) => void	必須	組織データでフォームが送信されたときに呼び出されるコールバック関数
className	string	undefined	フォームコンテナのスタイル用の追加 CSS クラス名
children	BlocksOverride	undefined	デフォルトブロックやカスタムコンポーネント描画を上書きする関数
direction	enum	"column"	アクションボタンの flex 方向
alignItems	enum	"stretch"	コンテナ内アイテムの配置
gapSize	enum	"S"	コンテナ内アイテム間の間隔
children	BlocksOverride	undefined	デフォルト描画を上書きするカスタムブロックコンポーネント

サブコンポーネント

CreateOrganization コンポーネントは複数のサブコンポーネントを提供します。すべてのサブコンポーネントはメインコンポーネントのコンテキストからデフォルト値を受け取り、props でそれらを上書きできます。

CreateOrganization.Title

プロパティ	型	デフォルト	説明
children	ReactNode	必須	メインタイトルとして表示する内容
size	enum	"2XL"	タイトルの Typography サイズ
type	enum	"heading"	Typography の種類
color	enum	"low-emphasis"	タイトルの配色テーマ
weight	enum	"bold"	Typography のウェイト
className	string	undefined	スタイル用の追加 CSS クラス名

CreateOrganization.Description

プロパティ	型	デフォルト	説明
children	ReactNode	必須	説明文として表示する内容
className	string	undefined	スタイル用の追加 CSS クラス名
size	enum	"L"	タイトルの Typography サイズ
type	enum	"heading"	Typography の種類
color	enum	"low-emphasis"	タイトルの配色テーマ
weight	enum	"regular"	Typography のウェイト
className	string	undefined	スタイル用の追加 CSS クラス名

CreateOrganization.Form

プロパティ	型	デフォルト	説明
children	BlocksOverride	undefined	アカウント保持者、会社情報、コンプライアンス各セクションを含むフォーム内容
className	string	undefined	スタイル用の追加 CSS クラス名

注: このコンポーネントは HTML form 要素のすべての props を継承します。

CreateOrganization.Form.AccountHolder

プロパティ	型	デフォルト	説明
children	BlocksOverride	undefined	デフォルトのアカウント保持者フィールドを上書きするカスタム内容
className	string	undefined	スタイル用の追加 CSS クラス名
direction	enum	"column"	アクションボタンの flex 方向
alignItems	enum	"stretch"	コンテナ内アイテムの配置
gapSize	enum	"S"	コンテナ内アイテム間の間隔

CreateOrganization.Form.AccountHolder.SectionTitle

プロパティ	型	デフォルト	説明
children	ReactNode	"アカウント保持者連絡先情報"	セクションタイトルのテキスト
size	enum	"L"	タイトルの Typography サイズ
type	enum	"heading"	Typography の種類
color	enum	"low-emphasis"	タイトルの配色テーマ
weight	enum	"bold"	Typography のウェイト
className	string	undefined	スタイル用の追加 CSS クラス名

CreateOrganization.Form.AccountHolder.Name

プロパティ	型	デフォルト	説明
name	string	"applicationUserEmail"	フォームデータのフィールド名
className	string	undefined	スタイル用の追加 CSS クラス名
errorText	string	undefined	入力のエラーテキスト
isDisabled	boolean	undefined	入力が無効かどうか
isRequired	boolean	undefined	入力が必須かどうか
label	string	"契約者名"	入力フィールドのラベル
labelWeight	enum	"bold"	ラベルの太さ
onOperationClick	() => void	undefined	操作用 onClick コールバック
postfixText	string	undefined	コンポーネントの後ろに配置するテキスト
showPassword	boolean	undefined	パスワードを表示するかどうか

注: このコンポーネントは、共通の HTML input 要素 props も追加で継承します。

CreateOrganization.Form.AccountHolder.Email

プロパティ	型	デフォルト	説明
name	string	"applicationUserEmail"	フォームデータのフィールド名
className	string	undefined	スタイル用の追加 CSS クラス名
errorText	string	undefined	入力のエラーテキスト
isDisabled	boolean	undefined	入力が無効かどうか
isRequired	boolean	undefined	入力が必須かどうか
label	string	"契約者メールアドレス"	入力フィールドのラベル
labelWeight	enum	"bold"	ラベルの太さ
onOperationClick	() => void	undefined	操作用 onClick コールバック
postfixText	string	undefined	コンポーネントの後ろに配置するテキスト
showPassword	boolean	undefined	パスワードを表示するかどうか

注: このコンポーネントは、共通の HTML input 要素 props も追加で継承します。

CreateOrganization.Form.AccountHolder.Contact

プロパティ	型	デフォルト	説明
name	string	"applicationUserPhoneNumber"	フォームデータのフィールド名
className	string	undefined	スタイル用の追加 CSS クラス名
errorText	string	undefined	入力のエラーテキスト
isDisabled	boolean	undefined	入力が無効かどうか
isRequired	boolean	undefined	入力が必須かどうか
label	string	"契約者電話番号"	入力フィールドのラベル
labelWeight	enum	"bold"	ラベルの太さ
onOperationClick	() => void	undefined	操作用 onClick コールバック
postfixText	string	undefined	コンポーネントの後ろに配置するテキスト
showPassword	boolean	undefined	パスワードを表示するかどうか

注: このコンポーネントは、共通の HTML input 要素 props も追加で継承します。

CreateOrganization.Form.CompanyInformation

プロパティ	型	デフォルト	説明
children	ReactNode	undefined	デフォルトの会社情報フィールドを上書きするカスタム内容

CreateOrganization.Form.CompanyInformation.SectionTitle

プロパティ	型	デフォルト	説明
children	ReactNode	"会社情報"	セクションタイトルのテキスト
size	enum	"L"	タイトルの Typography サイズ
type	enum	"heading"	Typography の種類
color	enum	"low-emphasis"	タイトルの配色テーマ
weight	enum	"bold"	Typography のウェイト
className	string	undefined	スタイル用の追加 CSS クラス名

CreateOrganization.Form.CompanyInformation.CompanyName

プロパティ	型	デフォルト	説明
name	string	"companyName"	フォームデータのフィールド名
className	string	undefined	スタイル用の追加 CSS クラス名
errorText	string	undefined	入力のエラーテキスト
isDisabled	boolean	undefined	入力が無効かどうか
isRequired	boolean	undefined	入力が必須かどうか
label	string	"会社名"	入力フィールドのラベル
labelWeight	enum	"bold"	ラベルの太さ
onOperationClick	() => void	undefined	操作用 onClick コールバック
postfixText	string	undefined	コンポーネントの後ろに配置するテキスト
showPassword	boolean	undefined	パスワードを表示するかどうか

注: このコンポーネントは、共通の HTML input 要素 props も追加で継承します。

CreateOrganization.Form.CompanyInformation.PostCode

プロパティ	型	デフォルト	説明
name	string	"postcode"	フォームデータのフィールド名
className	string	undefined	スタイル用の追加 CSS クラス名
errorText	string	undefined	入力のエラーテキスト
isDisabled	boolean	undefined	入力が無効かどうか
isRequired	boolean	undefined	入力が必須かどうか
label	string	"郵便番号"	入力フィールドのラベル
labelWeight	enum	"bold"	ラベルの太さ
onOperationClick	() => void	undefined	操作用 onClick コールバック
postfixText	string	undefined	コンポーネントの後ろに配置するテキスト
showPassword	boolean	undefined	パスワードを表示するかどうか

注: このコンポーネントは、共通の HTML input 要素 props も追加で継承します。

CreateOrganization.Form.CompanyInformation.Prefecture

プロパティ	型	デフォルト	説明
name	string	"prefecture"	フォームデータのフィールド名
label	string	"都道府県"	フィールドラベル
labelWeight	enum	"bold"	ラベルの太さ
selectOptionValues	Array<{value: string, label: string}>	[]	都道府県オプションの配列
isRequired	boolean	undefined	フィールドが必須かどうか
isDisabled	boolean	undefined	入力が無効かどうか
errorText	string	undefined	入力のエラーテキスト
className	string	undefined	スタイル用の追加 CSS クラス名

注: このコンポーネントは、共通の HTML select 要素 props も追加で継承します。

CreateOrganization.Form.CompanyInformation.City

プロパティ	型	デフォルト	説明
name	string	"cityTownVillage"	フォームデータのフィールド名
className	string	undefined	スタイル用の追加 CSS クラス名
errorText	string	undefined	入力のエラーテキスト
isDisabled	boolean	undefined	入力が無効かどうか
isRequired	boolean	undefined	入力が必須かどうか
label	string	"市区町村"	入力フィールドのラベル
labelWeight	enum	"bold"	ラベルの太さ
onOperationClick	() => void	undefined	操作用 onClick コールバック
postfixText	string	undefined	コンポーネントの後ろに配置するテキスト
showPassword	boolean	undefined	パスワードを表示するかどうか

注: このコンポーネントは、共通の HTML input 要素 props も追加で継承します。

CreateOrganization.Form.CompanyInformation.TownAddress

プロパティ	型	デフォルト	説明
name	string	"townStreetBuilding"	フォームデータのフィールド名
className	string	undefined	スタイル用の追加 CSS クラス名
errorText	string	undefined	入力のエラーテキスト
isDisabled	boolean	undefined	入力が無効かどうか
isRequired	boolean	undefined	入力が必須かどうか
label	string	"町名・番地・建物"	入力フィールドのラベル
labelWeight	enum	"bold"	ラベルの太さ
onOperationClick	() => void	undefined	操作用 onClick コールバック
postfixText	string	undefined	コンポーネントの後ろに配置するテキスト
showPassword	boolean	undefined	パスワードを表示するかどうか

注: このコンポーネントは、共通の HTML input 要素 props も追加で継承します。

CreateOrganization.Form.CompanyInformation.RepresentativePersonName

プロパティ	型	デフォルト	説明
name	string	"representivePersonName"	フォームデータのフィールド名
className	string	undefined	スタイル用の追加 CSS クラス名
errorText	string	undefined	入力のエラーテキスト
isDisabled	boolean	undefined	入力が無効かどうか
isRequired	boolean	undefined	入力が必須かどうか
label	string	"代表者名"	入力フィールドのラベル
labelWeight	enum	"bold"	ラベルの太さ
onOperationClick	() => void	undefined	操作用 onClick コールバック
postfixText	string	undefined	コンポーネントの後ろに配置するテキスト
showPassword	boolean	undefined	パスワードを表示するかどうか

注: このコンポーネントは、共通の HTML input 要素 props も追加で継承します。

CreateOrganization.Form.CompanyInformation.RepresentativeContact

プロパティ	型	デフォルト	説明
name	string	"representativePhoneNumber"	フォームデータのフィールド名
className	string	undefined	スタイル用の追加 CSS クラス名
errorText	string	undefined	入力のエラーテキスト
isDisabled	boolean	undefined	入力が無効かどうか
isRequired	boolean	undefined	入力が必須かどうか
label	string	"代表者電話番号"	入力フィールドのラベル
labelWeight	enum	"bold"	ラベルの太さ
onOperationClick	() => void	undefined	操作用 onClick コールバック
postfixText	string	undefined	コンポーネントの後ろに配置するテキスト
showPassword	boolean	undefined	パスワードを表示するかどうか

注: このコンポーネントは、共通の HTML input 要素 props も追加で継承します。

CreateOrganization.Form.CompanyInformation.CompanyCapital

プロパティ	型	デフォルト	説明
name	string	"capitalRange"	フォームデータのフィールド名
label	string	"資本金額"	フィールドラベル
labelWeight	enum	"bold"	ラベルの太さ
selectOptionValues	Array<{value: string, label: string}>	[]	資本金額の選択肢配列
isRequired	boolean	true	フィールドが必須かどうか
isDisabled	boolean	undefined	入力が無効かどうか
errorText	string	undefined	入力のエラーテキスト
className	string	undefined	スタイル用の追加 CSS クラス名

注: このコンポーネントは、共通の HTML select 要素 props も追加で継承します。

CreateOrganization.Form.CompanyInformation.CompanySize

プロパティ	型	デフォルト	説明
name	string	"numberOfEmployees"	フォームデータのフィールド名
label	string	"企業規模"	フィールドラベル
labelWeight	enum	"bold"	ラベルの太さ
selectOptionValues	Array<{value: string, label: string}>	[]	資本金額の選択肢配列
isRequired	boolean	true	フィールドが必須かどうか
isDisabled	boolean	undefined	入力が無効かどうか
errorText	string	undefined	入力のエラーテキスト
className	string	undefined	スタイル用の追加 CSS クラス名

注: このコンポーネントは、共通の HTML select 要素 props も追加で継承します。

CreateOrganization.Form.CompanyInformation.HomePageUrl

プロパティ	型	デフォルト	説明
name	string	"companyUrl"	フォームデータのフィールド名
errorText	string	undefined	入力のエラーテキスト
isDisabled	boolean	undefined	入力が無効かどうか
isRequired	boolean	undefined	入力が必須かどうか
label	string	"ホームページ URL"	入力フィールドのラベル
labelWeight	enum	"bold"	ラベルの太さ
onOperationClick	() => void	undefined	操作用 onClick コールバック
postfixText	string	undefined	コンポーネントの後ろに配置するテキスト
showPassword	boolean	undefined	パスワードを表示するかどうか

注: このコンポーネントは、共通の HTML input 要素 props も追加で継承します。

CreateOrganization.Form.CompanyInformation.AdditionalInformation

プロパティ	型	デフォルト	説明
name	string	"additionalInformation"	フォームデータのフィールド名
errorText	string	undefined	入力のエラーテキスト
isDisabled	boolean	undefined	入力が無効かどうか
isRequired	boolean	undefined	入力が必須かどうか
label	string	"追加情報"	入力フィールドのラベル
labelWeight	`enum
className	string	undefined	スタイル用の追加 CSS クラス名

注: このコンポーネントは、共通の HTML textarea 要素 props も追加で継承します。

CreateOrganization.Form.Compliance

プロパティ	型	デフォルト	説明
children	ReactNode	undefined	デフォルトのコンプライアンス項目を上書きするカスタム内容

注: このコンポーネントは HTML div 要素のすべての props を継承します。

CreateOrganization.Form.Compliance.CheckUserAgreement

プロパティ	型	デフォルト	説明
name	string	"userAgreement"	フォームデータのフィールド名
label	string	"利用規約への同意"	チェックボックスのラベル
message	string	"このアプリケーションの利用規約に同意する場合は、このボックスにチェックしてください"	チェックボックスの説明メッセージ
showMessage	boolean	true	メッセージを表示するかどうか
className	string	undefined	スタイル用の追加 CSS クラス名

注: このコンポーネントは HTML checkbox 要素のすべての props を継承します。

CreateOrganization.Form.Compliance.CheckPrivacyAgreement

プロパティ	型	デフォルト	説明
name	string	"privacyPolicy"	フォームデータのフィールド名
label	string	"プライバシーポリシーへの同意"	チェックボックスのラベル
message	string	"プライバシーポリシーに記載された条件に同意し、理解する場合はこのボックスにチェックしてください"	チェックボックスの説明メッセージ
showMessage	boolean	true	メッセージを表示するかどうか
className	string	undefined	スタイル用の追加 CSS クラス名

注: このコンポーネントは HTML checkbox 要素のすべての props を継承します。

CreateOrganization.Form.SubmitButton

プロパティ	型	デフォルト	説明
children	ReactNode	"送信"	ボタン内に配置するテキスト
className	string	undefined	スタイル用の追加 CSS クラス名
fill	enum	"fill"	ボタンの塗りつぶしスタイル
icon	enum	undefined	ボタン左側に表示する任意のアイコン
iconColor	enum	undefined	左側アイコンの色。指定されない場合は、fill タイプのデフォルト色が使用されます。
isDisabled	boolean	false	ボタンが無効で使用できないかどうか
onClick	function	undefined	ボタンクリックを処理する関数
size	enum	"M"	ボタンの縦サイズ
textAlign	enum	"center"	ボタン内のアイコンとテキストの配置
textColor	enum	"default"	ボタンのテキスト色
textEmphasis	boolean	false	ボタンのテキストの太さ
textSize	enum	"M"	ボタンのテキストサイズ
type	enum	"submit"	ボタンの用途（HTML の type に影響します）

注: このコンポーネントは、共通の HTML button 要素 props も追加で継承します。

---

🔧 TypeScript サポート

包括的な型定義を備えた完全な TypeScript サポート:

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>
  );
};

---

React、TypeScript、そして最新の Web 標準で構築されています。