組織作成ブロック

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

---

🚀 インストール

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

---

📖 使用方法

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

基本的な使用方法

ライブエディター

function BasicCreateOrganization() {
  return (
    <CreateOrganization
      onCreateOrganization={(formData) => {
        console.log('組織が作成されました:', formData);
      }}>
      <CreateOrganization.Title>組織を作成</CreateOrganization.Title>
      <CreateOrganization.Description>
        以下のフォームにご記入いただき、貴社の組織を登録してください
      </CreateOrganization.Description>
      <CreateOrganization.Form>
        <CreateOrganization.Form.AccountHolder>
          <CreateOrganization.Form.AccountHolder.SectionTitle>
            アカウント責任者情報
          </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>
            会社情報
          </CreateOrganization.Form.CompanyInformation.SectionTitle>
          <CreateOrganization.Form.CompanyInformation.CompanyName />
          <CreateOrganization.Form.CompanyInformation.PostCode />
          <CreateOrganization.Form.CompanyInformation.Prefecture selectOptionValues={[
            {value: 'tokyo', label: '東京都'},
            {value: 'osaka', label: '大阪府'}
          ]} />
          <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: '100万円 - 1,000万円'},
            {value: '10m-100m', label: '1,000万円 - 1億円'}
          ]} />
          <CreateOrganization.Form.CompanyInformation.CompanySize selectOptionValues={[
            {value: '1-10', label: '1-10名'},
            {value: '11-50', label: '11-50名'}
          ]} />
          <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>
          組織を作成
        </CreateOrganization.Form.SubmitButton>
      </CreateOrganization.Form>
    </CreateOrganization>
  );
}

結果

Loading...

高度な使用方法

ライブエディター

function AdvancedCreateOrganization() {
  const handleCreateOrganization = (formData) => {
    console.log('🏢 新しい組織が作成されました:', formData);
    // バリデーション付きの強化されたフォーム送信
  };

  return (
    <CreateOrganization onCreateOrganization={console.log}>
      {({defaultBlocks, defaultBlockOrder}) => ({
        blocks: {
          // グラデーションスタイリングで強化されたタイトル
          title: {
            ...defaultBlocks.title,
            props: {
              ...defaultBlocks.title.props,
              children: '🏢 企業組織登録フォーム',
            },
          },

          // モダンスタイリングで強化された説明
          description: {
            ...defaultBlocks.description,
            props: {
              ...defaultBlocks.description.props,
              children: '以下のフォームにご記入いただき、貴社の組織プロフィールを作成してください',
            },
          },

          // プロフェッショナルスタイリングで強化されたフォーム
          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: (
                <>
                  {/* 強化されたアカウント責任者セクション */}
                  <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>

                  {/* 強化された会社情報セクション */}
                  <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>

                  {/* 強化されたコンプライアンスセクション */}
                  <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>

                  {/* 強化された送信ボタン */}
                  <CreateOrganization.Form.SubmitButton>🚀 組織を作成する</CreateOrganization.Form.SubmitButton>
                </>
              ),
            },
          },
        },
        blockOrder: defaultBlockOrder,
      })}
    </CreateOrganization>
  );
}

結果

Loading...

---

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

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

プロパティ	型	デフォルト	説明
onCreateOrganization	(data: T) => void	必須	組織データでフォームが送信されたときにトリガーされるコールバック関数
className	string	undefined	フォームコンテナスタイリング用の追加CSSクラス名
children	BlocksOverride	undefined	デフォルトブロックをオーバーライドまたはカスタムコンポーネントレンダリングするための関数
direction	enum	"column"	アクションボタンのフレックス方向
alignItems	enum	"stretch"	コンテナ内のアイテムの整列
gapSize	enum	"S"	コンテナ内のアイテム間のギャップ
children	BlocksOverride	undefined	デフォルトレンダリングをオーバーライドするカスタムブロックコンポーネント

サブコンポーネント

CreateOrganizationコンポーネントは複数のサブコンポーネントを提供します。すべてのサブコンポーネントは、メインコンポーネントのコンテキストからデフォルト値を受け取り、プロパティを通じてこれらの値をオーバーライドできます。

CreateOrganization.Title

プロパティ	型	デフォルト	説明
children	ReactNode	必須	メインタイトルとして表示するコンテンツ
size	enum	"2XL"	タイトルのタイポグラフィサイズ
type	enum	"heading"	タイポグラフィタイプ
color	enum	"low-emphasis"	タイトルのカラーテーマ
weight	enum	"bold"	タイポグラフィの太さ
className	string	undefined	スタイリング用の追加CSSクラス名

CreateOrganization.Description

プロパティ	型	デフォルト	説明
children	ReactNode	必須	説明テキストとして表示するコンテンツ
className	string	undefined	スタイリング用の追加CSSクラス名
size	enum	"L"	タイトルのタイポグラフィサイズ
type	enum	"heading"	タイポグラフィタイプ
color	enum	"low-emphasis"	タイトルのカラーテーマ
weight	enum	"regular"	タイポグラフィの太さ
className	string	undefined	スタイリング用の追加CSSクラス名

CreateOrganization.Form

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

注意: このコンポーネントはすべてのHTML form 要素プロパティを継承します。

CreateOrganization.Form.AccountHolder

プロパティ	型	デフォルト	説明
children	BlocksOverride	undefined	デフォルトアカウント責任者フィールドをオーバーライドするカスタムコンテンツ
className	string	undefined	スタイリング用の追加CSSクラス名
direction	enum	"column"	アクションボタンのフレックス方向
alignItems	enum	"stretch"	コンテナ内のアイテムの整列
gapSize	enum	"S"	コンテナ内のアイテム間のギャップ

CreateOrganization.Form.AccountHolder.SectionTitle

プロパティ	型	デフォルト	説明
children	ReactNode	"Account Holder Contact Information"	セクションタイトルテキスト
size	enum	"L"	タイトルのタイポグラフィサイズ
type	enum	"heading"	タイポグラフィタイプ
color	enum	"low-emphasis"	タイトルのカラーテーマ
weight	enum	"bold"	タイポグラフィの太さ
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	"Account Holder Name"	入力フィールドのラベル
labelWeight	enum	"bold"	ラベルの太さ
onOperationClick	() => void	undefined	操作onClickコールバック
postfixText	string	undefined	コンポーネントの後に配置するテキスト
showPassword	boolean	undefined	パスワードを表示するかどうか

注意: このコンポーネントは追加で一般的なHTML input 要素プロパティを継承します。

CreateOrganization.Form.AccountHolder.Email

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

注意: このコンポーネントは追加で一般的なHTML input 要素プロパティを継承します。

CreateOrganization.Form.AccountHolder.Contact

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

注意: このコンポーネントは追加で一般的なHTML input 要素プロパティを継承します。

CreateOrganization.Form.CompanyInformation

プロパティ	型	デフォルト	説明
children	ReactNode	undefined	デフォルト会社情報フィールドをオーバーライドするカスタムコンテンツ

CreateOrganization.Form.CompanyInformation.SectionTitle

プロパティ	型	デフォルト	説明
children	ReactNode	"Account Holder Contact Information"	セクションタイトルテキスト
size	enum	"L"	タイトルのタイポグラフィサイズ
type	enum	"heading"	タイポグラフィタイプ
color	enum	"low-emphasis"	タイトルのカラーテーマ
weight	enum	"bold"	タイポグラフィの太さ
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	"Company Name"	入力フィールドのラベル
labelWeight	enum	"bold"	ラベルの太さ
onOperationClick	() => void	undefined	操作onClickコールバック
postfixText	string	undefined	コンポーネントの後に配置するテキスト
showPassword	boolean	undefined	パスワードを表示するかどうか

注意: このコンポーネントは追加で一般的なHTML input 要素プロパティを継承します。

CreateOrganization.Form.CompanyInformation.PostCode

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

注意: このコンポーネントは追加で一般的なHTML input 要素プロパティを継承します。

CreateOrganization.Form.CompanyInformation.Prefecture

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

注意: このコンポーネントは追加で一般的なHTML select 要素プロパティを継承します。

CreateOrganization.Form.CompanyInformation.City

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

注意: このコンポーネントは追加で一般的なHTML input 要素プロパティを継承します。

CreateOrganization.Form.CompanyInformation.TownAddress

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

注意: このコンポーネントは追加で一般的なHTML input 要素プロパティを継承します。

CreateOrganization.Form.CompanyInformation.RepresentativePersonName

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

注意: このコンポーネントは追加で一般的なHTML input 要素プロパティを継承します。

CreateOrganization.Form.CompanyInformation.RepresentativeContact

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

注意: このコンポーネントは追加で一般的なHTML input 要素プロパティを継承します。

CreateOrganization.Form.CompanyInformation.CompanyCapital

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

注意: このコンポーネントは追加で一般的なHTML select 要素プロパティを継承します。

CreateOrganization.Form.CompanyInformation.CompanySize

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

注意: このコンポーネントは追加で一般的なHTML select 要素プロパティを継承します。

CreateOrganization.Form.CompanyInformation.HomePageUrl

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

注意: このコンポーネントは追加で一般的なHTML input 要素プロパティを継承します。

CreateOrganization.Form.CompanyInformation.AdditionalInformation

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

注意: このコンポーネントは追加で一般的なHTML textarea 要素プロパティを継承します。

CreateOrganization.Form.Compliance

プロパティ	型	デフォルト	説明
children	ReactNode	undefined	デフォルトコンプライアンスフィールドをオーバーライドするカスタムコンテンツ

注意: このコンポーネントはすべてのHTML div 要素プロパティを継承します。

CreateOrganization.Form.Compliance.CheckUserAgreement

プロパティ	型	デフォルト	説明
name	string	"userAgreement"	フォームデータのフィールド名
label	string	"User Agreement"	チェックボックスラベル
message	string	"Please check this box if you agree to the terms of service for this applications"	チェックボックス説明メッセージ
showMessage	boolean	true	メッセージを表示するかどうか
className	string	undefined	スタイリング用の追加CSSクラス名

注意: このコンポーネントはすべてのHTML checkbox 要素プロパティを継承します。

CreateOrganization.Form.Compliance.CheckPrivacyAgreement

プロパティ	型	デフォルト	説明
name	string	"privacyPolicy"	フォームデータのフィールド名
label	string	"Privacy Agreement"	チェックボックスラベル
message	string	"Please check this box if you agree to and understand the terms described in the privacy policy"	チェックボックス説明メッセージ
showMessage	boolean	true	メッセージを表示するかどうか
className	string	undefined	スタイリング用の追加CSSクラス名

注意: このコンポーネントはすべてのHTML checkbox 要素プロパティを継承します。

CreateOrganization.Form.SubmitButton

プロパティ	型	デフォルト	説明
children	ReactNode	"Submit"	ボタン内に配置するテキスト
className	string	undefined	スタイリング用の追加CSSクラス名
fill	enum	"fill"	ボタンフィルスタイル
icon	enum	undefined	ボタン左側のオプションアイコン
iconColor	enum	undefined	左側アイコンの色。提供されない場合、フィルタイプのデフォルト色が使用されます。
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タイプに影響）

注意: このコンポーネントは追加で一般的なHTML button 要素プロパティを継承します。

---

🔧 TypeScript サポート

包括的な型定義による完全なTypeScriptサポート:

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

// メインコンポーネントインターフェース
interface CreateOrganizationProps extends Omit<ComponentProps<'div'>, 'children'> {
  onCreateOrganization: (data: DefaultCreateOrganizationFormData) => void;
  className?: string;
}

// デフォルトフォームデータインターフェース
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;
};

// 完全な型付けを使用した使用例
interface CustomOrganizationData extends DefaultCreateOrganizationFormData {
  customField?: string;
}

const OrganizationRegistrationForm = () => {
  const handleCreateOrganization = (formData: CustomOrganizationData) => {
    console.log('組織データ:', formData);
    // 型安全な組織データ処理
  };

  return (
    <CreateOrganization onCreateOrganization={handleCreateOrganization}>
      <CreateOrganization.Title>組織を登録</CreateOrganization.Title>
      <CreateOrganization.Description>
        以下のフォームにご記入いただき、組織プロフィールを作成してください
      </CreateOrganization.Description>
      <CreateOrganization.Form>
        <CreateOrganization.Form.AccountHolder />
        <CreateOrganization.Form.CompanyInformation />
        <CreateOrganization.Form.Compliance.CheckPrivacyAgreement />
        <CreateOrganization.Form.SubmitButton>組織を作成</CreateOrganization.Form.SubmitButton>
      </CreateOrganization.Form>
    </CreateOrganization>
  );
};

---

React、TypeScript、モダンなウェブ標準を使用して❤️で構築されました。