Edit Basic Information Block

EditBasicInformation is a controlled address-and-profile form block built on MUI.

Installation

npm

npm install @nodeblocks/frontend-edit-basic-information-block

yarn

yarn add @nodeblocks/frontend-edit-basic-information-block

pnpm

pnpm add @nodeblocks/frontend-edit-basic-information-block

bun

bun add @nodeblocks/frontend-edit-basic-information-block

What You Need

Item	Why it matters
data	Controlled form state. The default shape uses NameInput, FuriganaInput, PostalCodeInput, PrefectureSelect, CityInput, AddressInput, and PhoneInput.
onDataChange	Receives the next data snapshot plus metadata about the edited field path.
errors (optional)	Field-level validation feedback keyed by field path.
labels (optional)	Copy for the title, subtitle, input labels, search button, and submit button.
placeholders (optional)	Placeholder text for text inputs and the prefecture select.
selectOptions (optional)	Custom option list for the prefecture select.
onSearchAddressClick (optional)	Handles the postal-code address lookup button.
blockSpacingBefore (optional)	Adjusts spacing before specific default blocks or override blocks.
children (optional)	Use compound components or block override rendering.

Controlled component

EditBasicInformation does not own form state. Keep data in your app and pass updates back through onDataChange. The stock shape is the named-field object used in Storybook, and FieldErrorMap uses bracket-notation paths if you need nested validation later.

Code Examples

Quick Start

Live Editor

function Example() {
  const defaultData = {
    NameInput: '山田太郎',
    FuriganaInput: 'ヤマダタロウ',
    PostalCodeInput: '1234567',
    PrefectureSelect: '東京都',
    CityInput: '市区町村を入力',
    AddressInput: '町名・番地・建物を入力',
    PhoneInput: '電話番号を入力（ハイフンなしで入力）',
  };

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

  return (
    <EditBasicInformation
      data={data}
      onDataChange={(nextData) => {
        setData(nextData);
      }}
      onSearchAddressClick={() => {
        setData((current) => ({ ...current }));
      }}
    />
  );
}

Result

Loading...

Labels and Copy

Live Editor

function Example() {
  const defaultData = {
    NameInput: '山田太郎',
    FuriganaInput: 'ヤマダタロウ',
    PostalCodeInput: '1234567',
    PrefectureSelect: '東京都',
    CityInput: '市区町村を入力',
    AddressInput: '町名・番地・建物を入力',
    PhoneInput: '電話番号を入力（ハイフンなしで入力）',
  };

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

  const labels = {
    title: 'Basic information',
    subtitle: 'Fields marked * are required.',
    nameInput: 'Full name',
    furiganaInput: 'Full name in kana',
    postalCodeInput: 'Postal code',
    searchAddressButton: 'Look up address',
    prefectureSelect: 'Prefecture',
    cityInput: 'City',
    addressInput: 'Street address',
    phoneInput: 'Phone number',
    submitButton: 'Save',
  };

  const placeholders = {
    nameInput: 'Enter your full name',
    furiganaInput: 'Enter furigana',
    postalCodeInput: '1234567',
    prefectureSelect: 'Select a prefecture',
    cityInput: 'Enter city',
    addressInput: 'Enter street address',
    phoneInput: 'Enter phone number',
  };

  const selectOptions = {
    prefectureSelect: [
      { value: '東京都', label: '東京都' },
      { value: '大阪府', label: '大阪府' },
      { value: '福岡県', label: '福岡県' },
    ],
  };

  return (
    <EditBasicInformation
      data={data}
      onDataChange={(nextData) => {
        setData(nextData);
      }}
      labels={labels}
      placeholders={placeholders}
      selectOptions={selectOptions}
      onSearchAddressClick={() => {
        setData((current) => ({ ...current }));
      }}
    />
  );
}

Result

Loading...

Labels and copy

This block does not have URL props. Put text overrides on the root labels and placeholders, or override individual subcomponents if you need custom layout or copy.

Form Errors

Live Editor

function Example() {
  const defaultData = {
    NameInput: '',
    FuriganaInput: '',
    PostalCodeInput: '',
    PrefectureSelect: '',
    CityInput: '',
    AddressInput: '',
    PhoneInput: '',
  };

  const [data, setData] = React.useState(defaultData);
  const [errors, setErrors] = React.useState({});

  const handleDataChange = (nextData, meta) => {
    const { [meta.name]: _removed, ...restErrors } = errors;
    let nextErrors = restErrors;

    // Validate required fields on blur (same pattern as storybook)
    if (meta.cause === 'blur') {
      nextErrors = { ...restErrors };
      const value = nextData[meta.name];
      if (value === '' || (typeof value === 'string' && !value.trim())) {
        nextErrors[meta.name] = 'This field is required.';
      }
    }

    setErrors(nextErrors);
    setData(nextData);
  };

  return (
    <EditBasicInformation
      data={data}
      errors={Object.keys(errors).length ? errors : undefined}
      onDataChange={handleDataChange}
      onSearchAddressClick={() => {
        setData((current) => ({ ...current }));
      }}
    />
  );
}

Result

Loading...

Compound Components

Live Editor

function Example() {
  const defaultData = {
    NameInput: '山田太郎',
    FuriganaInput: 'ヤマダタロウ',
    PostalCodeInput: '1234567',
    PrefectureSelect: '東京都',
    CityInput: '市区町村を入力',
    AddressInput: '町名・番地・建物を入力',
    PhoneInput: '電話番号を入力（ハイフンなしで入力）',
  };

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

  return (
    <EditBasicInformation
      data={data}
      onDataChange={(nextData) => {
        setData(nextData);
      }}
      labels={{ searchAddressButton: '住所を検索' }}
      onSearchAddressClick={() => {
        setData((current) => ({ ...current }));
      }}
    >
      <EditBasicInformation.Title>Basic information</EditBasicInformation.Title>
      <Stack spacing={3}>
        <EditBasicInformation.Subtitle>Fields marked * are required.</EditBasicInformation.Subtitle>
        <EditBasicInformation.NameInput required={false} />
        <EditBasicInformation.FuriganaInput required={false} />
        <EditBasicInformation.PostalCodeInput required={false} />
        <EditBasicInformation.PrefectureSelect required={false} />
        <EditBasicInformation.CityInput required={false} />
        <EditBasicInformation.AddressInput required={false} />
        <EditBasicInformation.PhoneInput required={false} />
      </Stack>
      <EditBasicInformation.SubmitButton>Save</EditBasicInformation.SubmitButton>
    </EditBasicInformation>
  );
}

Result

Loading...

Block Override

Live Editor

function Example() {
  const defaultData = {
    NameInput: '山田太郎',
    FuriganaInput: 'ヤマダタロウ',
    PostalCodeInput: '1234567',
    PrefectureSelect: '東京都',
    CityInput: '市区町村を入力',
    AddressInput: '町名・番地・建物を入力',
    PhoneInput: '電話番号を入力（ハイフンなしで入力）',
  };

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

  return (
    <EditBasicInformation
      data={data}
      onDataChange={(nextData) => {
        setData(nextData);
      }}
      onSearchAddressClick={() => {
        setData((current) => ({ ...current }));
      }}
    >
      {({ defaultBlocks, defaultBlockOrder }) => ({
        blocks: {
          ...defaultBlocks,
          customBlock: <Alert severity="info">Custom notification</Alert>,
        },
        blockOrder: ['customBlock', ...defaultBlockOrder],
      })}
    </EditBasicInformation>
  );
}

Result

Loading...

Block override notes

defaultBlockOrder includes the stock layout order for title, subtitle, inputs, and submit button. The root renderer also includes an internal input primitive in defaultBlocks, but it is filtered out of the visible default order. blockSpacingBefore applies to default blocks and function-based overrides, but not to raw JSX compound children.

Important Props

Core Props

Prop	Type	Required	Default	Description
data	EditBasicInformationFormData	Yes	-	Controlled form state. The default story shape uses the named fields listed above.
onDataChange	(data: EditBasicInformationFormData, meta: { name: string; value: unknown; cause: one of input, change, blur, clear, reset, programmatic; event?: React.SyntheticEvent }) => void	Yes	-	Called whenever a field updates. meta.name uses bracket-notation paths.
errors	{ [fieldPath: string]: string | string[] }	No	undefined	Validation feedback keyed by field path.
onSearchAddressClick	MouseEventHandler<HTMLButtonElement>	No	undefined	Shown as the postal-code search action when provided.

Content Props

Prop	Type	Required	Default	Description
labels	{ title?: string; subtitle?: string; nameInput?: string; furiganaInput?: string; postalCodeInput?: string; searchAddressButton?: string; prefectureSelect?: string; cityInput?: string; addressInput?: string; phoneInput?: string; submitButton?: string }	No	undefined	Copy for the title, helper text, input labels, search button, and submit button.
placeholders	{ nameInput?: string; furiganaInput?: string; postalCodeInput?: string; prefectureSelect?: string; cityInput?: string; addressInput?: string; phoneInput?: string }	No	undefined	Placeholder copy for the text fields and prefecture select.
selectOptions	{ prefectureSelect?: { value: string; label: string }[] }	No	undefined	Custom options for the prefecture select.

Layout and Composition Props

Prop	Type	Required	Default	Description
component	StackProps<'form'>['component']	No	'form'	Root element rendered by the outer stack.
blockSpacingBefore	Partial<Record<string, number | Partial<Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', number>>>>	No	{ subtitle: 4, nameInput: { xs: 4, sm: 3 }, submitButton: 4 }	Extra spacing before named default blocks or function-based override blocks.
children	BlocksOverride<typeof defaultBlocks, CustomBlocks>	No	undefined	Use JSX compound components or a function that returns blocks and blockOrder.

Inherited props come from StackProps<'form'> with children replaced by the block override API, so standard form/container props such as className, sx, and id are available.

Default UI Blocks

Block	Built on	Notes
EditBasicInformation	Stack	Root form shell with padding and responsive layout.
Title	Typography	variant="h4", component="h2", bold and centered. Defaults to 基本情報を編集.
Subtitle	Typography	variant="body2". Defaults to * は必須事項です.
NameInput	TextField	Defaults to label 氏名 and placeholder 氏名を入力.
FuriganaInput	TextField	Defaults to label フリガナ and placeholder フリガナを入力.
PostalCodeInput	TextField + Button	Defaults to label 郵便番号, placeholder 郵便番号を入力, and search button 住所を検索.
PrefectureSelect	FormControl + InputLabel + Select	Defaults to label 都道府県, placeholder 都道府県を選択, and built-in prefecture options.
CityInput	TextField	Defaults to label 市区町村 and placeholder 市区町村を入力.
AddressInput	TextField	Defaults to label 町名・番地・建物 and placeholder 町名・番地・建物を入力.
PhoneInput	TextField	Defaults to label 連絡先電話番号 and placeholder 電話番号を入力（ハイフンなしで入力）.
SubmitButton	Button	variant="contained", size="large", type="submit", centered with a wide desktop width. Defaults to 保存.

Extra field primitives

Primitive	Main Props	Inherits	Built on	Notes
Input	name, label, placeholder, required	TextFieldProps plus getValue, setValue, and errors from context	TextField	A controlled text field primitive used by the stock layout. Available for custom flows, but not rendered directly in the default block order.

TypeScript

type EditBasicInformationFormData =
  | {
      NameInput: string;
      FuriganaInput: string;
      PostalCodeInput: string;
      PrefectureSelect: string;
      CityInput: string;
      AddressInput: string;
      PhoneInput: string;
    }
  | Record<string, unknown>;