Skip to main content

Create Organization Block

CreateOrganization is a controlled organization application form built on MUI.

Installationโ€‹

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

What You Needโ€‹

ItemWhy it matters
dataSingle source of truth for form state; the shape can be extended with custom fields such as establishmentDate
onDataChangeReceives updated state plus metadata for validation, analytics, or side effects
errors (optional)Field errors keyed by data path
termsOfUseUrl (optional)Target URL for the terms-of-use link in the compliance section
privacyAgreementUrl (optional)Target URL for the privacy-policy link in the compliance section
onSearchAddressClick (optional)Handles the postal-code search button in CompanyAddress.PostCode
Controlled component

CreateOrganization does not own form state. Keep state in your app and pass it through data. The default form data covers account-holder fields, company details, compliance checkboxes, and can be extended for custom fields such as establishmentDate.

Code Examplesโ€‹

Live Editor
function Example() {
  const defaultData = {
    applicationUserName: '',
    applicationUserEmail: '',
    applicationUserPhoneNumber: '',
    companyName: '',
    postcode: '',
    cityTownVillage: '',
    townStreetBuilding: '',
    representivePersonName: '',
    representativePhoneNumber: '',
    companyUrl: '',
    additionalInformation: '',
    establishmentDate: '',
    prefecture: '',
    capital: '',
    numberOfEmployees: '',
    userAgreement: '',
    privacyPolicy: '',
  };

  const [data, setData] = React.useState(defaultData);

  return (
    <CreateOrganization
      data={data}
      onDataChange={setData}
      termsOfUseUrl="/terms-of-use"
      privacyAgreementUrl="/privacy-policy"
      onSearchAddressClick={() => {
        setData((current) => ({ ...current }));
      }}
      onSubmit={(event) => {
        event.preventDefault();
        setData((current) => ({ ...current }));
      }}
    />
  );
}
Result
Loading...

Important Propsโ€‹

Core Propsโ€‹

PropTypeRequiredDefaultDescription
dataCreateOrganizationFormData ({ applicationUserName?, applicationUserEmail?, applicationUserPhoneNumber?, companyName?, postcode?, cityTownVillage?, townStreetBuilding?, representivePersonName?, representativePhoneNumber?, companyUrl?, additionalInformation?, prefecture?, capital?, numberOfEmployees?, userAgreement?, privacyPolicy? } or extended Record<string, unknown>)Yes-Controlled form data object
onDataChange(data, meta) => voidYes-Called on updates; meta includes name, value, cause (input, change, blur, clear, reset, programmatic), and optional event
errors{ [fieldName: string]: string | string[] }NoundefinedField errors keyed by data path; common keys include the account-holder fields, company fields, userAgreement, privacyPolicy, and custom extension fields such as establishmentDate
termsOfUseUrlstringNo'/terms-of-use'Target URL for the terms-of-use link in the compliance checkbox
privacyAgreementUrlstringNo'/privacy-policy'Target URL for the privacy-policy link in the compliance checkbox
onSearchAddressClickMouseEventHandler<HTMLButtonElement>NoundefinedEnables the postal-code search button in CompanyAddress.PostCode

Content Propsโ€‹

No root labels prop is exposed. Override copy in the nested compound components instead.

Layout and Composition Propsโ€‹

PropTypeRequiredDefaultDescription
componentStackProps<'form'>['component']No'form'Root container element
childrenReactNode or block override functionNoundefinedPass JSX children for compound components, or a function to override blocks
classNamestringNoundefinedAdditional class name on the root container
sxStackProps<'form'>['sx']NoundefinedMUI sx styling for the root container

Inherits StackProps<'form'> props except children. The root renders title, description, and form by default. Form then composes AccountHolder, CompanyInformation, Compliance, and SubmitButton.

Default UI Blocksโ€‹

BlockMUI base component(s)Notes
CreateOrganizationStackRoot provider and layout container; defaults to component="form" with responsive padding
TitleTypographyDefault copy is Create your Organization
DescriptionTypographyDefault copy explains the application flow and marks required fields
FormStackDefault layout groups account-holder, company information, compliance, and submit sections
Form.AccountHolderStackDefault section title is Contact Information
Form.AccountHolder.SectionTitleTypographyDefault copy is Contact Information
Form.AccountHolder.NameTextFieldname="applicationUserName", default label Name, default placeholder Enter your name
Form.AccountHolder.EmailTextFieldname="applicationUserEmail", default label Email, default placeholder Enter your email address
Form.AccountHolder.ContactTextFieldname="applicationUserPhoneNumber", default label Phone Number, default placeholder Enter your phone number
Form.CompanyInformationStackDefault section title is Company Information
Form.CompanyInformation.SectionTitleTypographyDefault copy is Company Information
Form.CompanyInformation.CompanyNameTextFieldname="companyName", default label Company Name, default placeholder Enter the company's name
Form.CompanyInformation.CompanyAddressStackNested address section that groups post code, prefecture, city, street address, and representative contact fields
Form.CompanyInformation.CompanyAddress.LocationTitleTypographyDefault copy is Head Office Location
Form.CompanyInformation.CompanyAddress.PostCodeStack + TextField + Buttonname="postcode", default label Post Code, default placeholder Enter the post code, search button text defaults to Search Address
Form.CompanyInformation.CompanyAddress.PrefectureTextFieldname="prefecture", default label Prefecture, default placeholder Select the prefecture, options default to the English-prefecture list
Form.CompanyInformation.CompanyAddress.CityTextFieldname="cityTownVillage", default label City, default placeholder Enter the city
Form.CompanyInformation.CompanyAddress.TownAddressTextFieldname="townStreetBuilding", default label Address, default placeholder Enter the town, street, and building number
Form.CompanyInformation.CompanyAddress.RepresentativePersonNameTextFieldname="representivePersonName", default label Representive Name, default placeholder Enter the name of a representative
Form.CompanyInformation.CompanyAddress.RepresentativeContactTextFieldname="representativePhoneNumber", default label Representative Phone Number, default placeholder Enter the phone number of a representative
Form.CompanyInformation.CompanyCapitalStack + TextField + Typographyname="capital", default label Capital, default placeholder Enter the company's capital, suffix ๅ††
Form.CompanyInformation.CompanySizeStack + TextField + Typographyname="numberOfEmployees", default label Number of Employees, default placeholder Enter the company's number of employees, suffix ไบบ
Form.CompanyInformation.HomePageUrlTextFieldname="companyUrl", default label Home Page URL, default placeholder Enter the company's home page URL
Form.CompanyInformation.AdditionalInformationTextFieldname="additionalInformation", default label Additonal Information, default placeholder Enter a description of the company, multiline enabled
Form.ComplianceStackDefault horizontal compliance row on larger screens, stacked vertically on small screens
Form.Compliance.CheckUserAgreementFormControl + FormControlLabel + Checkbox + Linkname="userAgreement", default text is I agree to the terms of use. with link target termsOfUseUrl or /terms-of-use (opens in a new tab)
Form.Compliance.CheckPrivacyAgreementFormControl + FormControlLabel + Checkbox + Linkname="privacyPolicy", default text is I agree to the privacy policy. with link target privacyAgreementUrl or /privacy-policy (opens in a new tab)
Form.SubmitButtonButtonDefault copy is Submit

Extra field primitivesโ€‹

PrimitiveMUI base component(s)Notes
DateFieldLocalizationProvider + DatePickerExported as CreateOrganization.DateField for custom flows; default display format is yyyy/MM/dd, stored value format is yyyy-MM-dd, and the default locale is en-US

TypeScriptโ€‹

export type CreateOrganizationFormData =
  | {
      applicationUserName?: string;
      applicationUserEmail?: string;
      applicationUserPhoneNumber?: string;
      companyName?: string;
      postcode?: string;
      cityTownVillage?: string;
      townStreetBuilding?: string;
      representivePersonName?: string;
      representativePhoneNumber?: string;
      companyUrl?: string;
      additionalInformation?: string;
      prefecture?: string;
      capital?: string;
      numberOfEmployees?: string;
      userAgreement?: string;
      privacyPolicy?: string;
    }
  | Record<string, unknown>;