Skip to main content

Basic Information Block

The BasicInformation Component is a fully customizable and accessible form for collecting user's basic information built with React, TypeScript, and MUI. It provides a complete address and contact information interface with modern design patterns, form validation using react-hook-form, and flexible customization options.

๐Ÿš€ Installationโ€‹

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

๐Ÿ“– Usageโ€‹

import {BasicInformation} from '@nodeblocks/frontend-basic-information-block';
Live Editor
function BasicInformationForm() {
  return (
    <BasicInformation
      onChange={(setError, getValues) => {
        console.log('Form values:', getValues());
        const values = getValues();
        if (!values.NameInput) {
          setError('NameInput', {message: 'Name is required', type: 'required'});
        }
      }}
      onSubmit={formData => {
        console.log('Form submitted:', formData);
      }}
      onInvalid={errors => {
        console.log('Form validation errors:', errors);
      }}>
      <BasicInformation.Title>Basic Information</BasicInformation.Title>
      <BasicInformation.Subtitle>Please fill in your basic information</BasicInformation.Subtitle>
      <BasicInformation.NameInput />
      <BasicInformation.FuriganaInput />
      <BasicInformation.PostalCodeInput />
      <BasicInformation.PrefectureSelect />
      <BasicInformation.CityInput />
      <BasicInformation.AddressInput />
      <BasicInformation.PhoneInput />
      <BasicInformation.SubmitButton>Submit</BasicInformation.SubmitButton>
    </BasicInformation>
  );
}
Result
Loading...

๐Ÿ”ง Props Referenceโ€‹

Main Component Propsโ€‹

PropTypeDefaultDescription
onSubmit(data: T) => voidRequiredCallback function triggered when form is submitted with valid data
onChange(setError, getValues) => voidRequiredCallback function triggered when form values change. Provides form control functions for validation
onInvalid(errors: FieldErrors<T>) => voidRequiredCallback function triggered when form submission fails validation
defaultValuesDefaultValues<T>undefinedDefault form values to populate fields on initial render
childrenBlocksOverrideundefinedCustom block components to override default rendering
classNamestringundefinedAdditional CSS class name for styling the form container
sxSxPropsundefinedMUI sx prop for custom styling
spacingnumber4Spacing between child elements

Note: This component extends MUI StackProps<'form'> with component="form", inheriting all Stack component props.

Sub-Componentsโ€‹

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

BasicInformation.Titleโ€‹

PropTypeDefaultDescription
childrenReactNode"ๅŸบๆœฌๆƒ…ๅ ฑ"Content to display as the title
classNamestringundefinedAdditional CSS class name for styling
sxSxPropsundefinedMUI sx prop for custom styling

Note: This component extends MUI TypographyProps with variant="h4" and component="h2".

BasicInformation.Subtitleโ€‹

PropTypeDefaultDescription
childrenReactNode"* ใฏๅฟ…้ ˆไบ‹้ …ใงใ™"Content to display as the subtitle
classNamestringundefinedAdditional CSS class name for styling

Note: This component extends MUI TypographyProps with variant="body2".

BasicInformation.NameInputโ€‹

PropTypeDefaultDescription
namestring"NameInput"Field name for form data
labelstring"ๆฐๅ"Label of the input field
placeholderstring"ๆฐๅใ‚’ๅ…ฅๅŠ›"Placeholder text
requiredbooleantrueWhether the field is required
disabledbooleanfalseWhether the input is disabled
errorbooleanfalseWhether to show error state
helperTextstringundefinedHelper text displayed below the input
fullWidthbooleantrueWhether the input takes full width
classNamestringundefinedAdditional CSS class name for styling

Note: This component extends MUI TextFieldProps.

BasicInformation.FuriganaInputโ€‹

PropTypeDefaultDescription
namestring"FuriganaInput"Field name for form data
labelstring"ใƒ•ใƒชใ‚ฌใƒŠ"Label of the input field
placeholderstring"ใƒ•ใƒชใ‚ฌใƒŠใ‚’ๅ…ฅๅŠ›"Placeholder text
requiredbooleantrueWhether the field is required

Note: This component extends MUI TextFieldProps.

BasicInformation.PostalCodeInputโ€‹

PropTypeDefaultDescription
namestring"PostalCodeInput"Field name for form data
labelstring"้ƒตไพฟ็•ชๅท"Label of the input field
placeholderstring"้ƒตไพฟ็•ชๅทใ‚’ๅ…ฅๅŠ›"Placeholder text
requiredbooleantrueWhether the field is required
inputModestring"numeric"Input mode for mobile keyboards

Note: This component extends MUI TextFieldProps.

BasicInformation.PrefectureSelectโ€‹

PropTypeDefaultDescription
namestring"PrefectureSelect"Field name for form data
labelstring"้ƒฝ้“ๅบœ็œŒ"Field label
placeholderstring"้ƒฝ้“ๅบœ็œŒใ‚’้ธๆŠž"Placeholder text
optionsArray<{value: string, label: string}>PREFECTURES (47 prefectures)Array of prefecture options
requiredbooleantrueWhether the field is required
classNamestringundefinedAdditional CSS class name for styling

Note: This component extends MUI SelectProps.

BasicInformation.CityInputโ€‹

PropTypeDefaultDescription
namestring"CityInput"Field name for form data
labelstring"ๅธ‚ๅŒบ็”บๆ‘"Label of the input field
placeholderstring"ๅธ‚ๅŒบ็”บๆ‘ใ‚’ๅ…ฅๅŠ›"Placeholder text
requiredbooleantrueWhether the field is required

Note: This component extends MUI TextFieldProps.

BasicInformation.AddressInputโ€‹

PropTypeDefaultDescription
namestring"AddressInput"Field name for form data
labelstring"็”บๅใƒป็•ชๅœฐใƒปๅปบ็‰ฉ"Label of the input field
placeholderstring"็”บๅใƒป็•ชๅœฐใƒปๅปบ็‰ฉใ‚’ๅ…ฅๅŠ›"Placeholder text
requiredbooleantrueWhether the field is required

Note: This component extends MUI TextFieldProps.

BasicInformation.PhoneInputโ€‹

PropTypeDefaultDescription
namestring"PhoneInput"Field name for form data
labelstring"้€ฃ็ตกๅ…ˆ้›ป่ฉฑ็•ชๅท"Label of the input field
placeholderstring"้›ป่ฉฑ็•ชๅทใ‚’ๅ…ฅๅŠ›๏ผˆใƒใ‚คใƒ•ใƒณใชใ—ใงๅ…ฅๅŠ›๏ผ‰"Placeholder text
requiredbooleantrueWhether the field is required
inputModestring"numeric"Input mode for mobile keyboards

Note: This component extends MUI TextFieldProps.

BasicInformation.SubmitButtonโ€‹

PropTypeDefaultDescription
childrenReactNode"ๆฌกใธ"Button text content
classNamestringundefinedAdditional CSS class name for styling
sxSxPropsundefinedMUI sx prop for custom styling
disabledboolean!formState.isValidWhether the button is disabled
variantstring"contained"MUI Button variant
sizestring"large"MUI Button size
typestring"submit"Button type

Note: This component extends MUI ButtonProps. The button is automatically disabled when form is invalid.

BasicInformation.Inputโ€‹

Generic input component for creating custom fields.

PropTypeDefaultDescription
namestringRequiredField name for form data (required for form binding)
labelstringundefinedLabel of the input field
placeholderstringundefinedPlaceholder text
requiredbooleanfalseWhether the field is required
disabledbooleanfalseWhether the input is disabled
errorbooleanfalseWhether to show error state
helperTextstringundefinedHelper text displayed below the input
fullWidthbooleantrueWhether the input takes full width
classNamestringundefinedAdditional CSS class name for styling

Note: This component extends MUI TextFieldProps.

๐ŸŽจ Configuration examplesโ€‹

Custom Field Labelsโ€‹

<BasicInformation.NameInput
  label="Full Name"
  placeholder="Enter your full name"
  required={true}
/>

Custom Prefecture Optionsโ€‹

const customPrefectures = [
  {value: 'tokyo', label: 'ๆฑไบฌ้ƒฝ'},
  {value: 'osaka', label: 'ๅคง้˜ชๅบœ'},
  {value: 'kyoto', label: 'ไบฌ้ƒฝๅบœ'},
];

<BasicInformation
  onSubmit={data => console.log(data)}
  onChange={() => {}}
  onInvalid={errors => console.log(errors)}
>
  <BasicInformation.Title>Custom Prefectures</BasicInformation.Title>
  <BasicInformation.NameInput label="Full Name" placeholder="Enter your full name" required={true} />
  <BasicInformation.PrefectureSelect options={customPrefectures} placeholder="Select your prefecture" />
  <BasicInformation.CityInput />
  <BasicInformation.AddressInput />
  <BasicInformation.SubmitButton
    sx={{
      background: 'linear-gradient(135deg, #3b82f6, #2563eb)',
      borderRadius: '12px',
      '&:hover': {
        background: 'linear-gradient(135deg, #2563eb, #1d4ed8)',
      },
    }}
  >
    ้€ไฟกใ™ใ‚‹
  </BasicInformation.SubmitButton>
</BasicInformation>

Styled Submit Buttonโ€‹

<BasicInformation.SubmitButton
  sx={{
    background: 'linear-gradient(135deg, #3b82f6, #2563eb)',
    borderRadius: '12px',
    '&:hover': {
      background: 'linear-gradient(135deg, #2563eb, #1d4ed8)',
    }
  }}
>
  ้€ไฟกใ™ใ‚‹
</BasicInformation.SubmitButton>

Block Override Patternโ€‹

<BasicInformation
  onSubmit={data => console.log(data)}
  onChange={() => {}}
  onInvalid={errors => console.log(errors)}
>
  {({defaultBlocks, defaultBlockOrder}) => ({
    blocks: {
      ...defaultBlocks,
      title: {
        ...defaultBlocks.title,
        props: {
          ...defaultBlocks.title.props,
          children: 'Custom Title',
          sx: {color: 'primary.main'},
        },
      },
      // Add custom block
      customInfo: (
        <div
          style={{
            padding: '12px 16px',
            backgroundColor: '#e3f2fd',
            borderRadius: '8px',
            color: '#1976d2',
          }}
        >
          All fields are required for registration
        </div>
      ),
    },
    blockOrder: [
      'title',
      'customInfo',
      'subtitle',
      ...defaultBlockOrder.filter((k) => k !== 'title' && k !== 'subtitle'),
    ],
  })}
</BasicInformation>

Adding a Custom Input Fieldโ€‹

<BasicInformation
  onSubmit={data => console.log(data)}
  onChange={() => {}}
  onInvalid={errors => console.log(errors)}
>
  <BasicInformation.Title>Extended Form</BasicInformation.Title>
  <BasicInformation.Subtitle />
  <BasicInformation.NameInput />
  <BasicInformation.Input name="CompanyName" label="ไผš็คพๅ" placeholder="ไผš็คพๅใ‚’ๅ…ฅๅŠ›" required={false} />
  <BasicInformation.PhoneInput />
  <BasicInformation.SubmitButton />
</BasicInformation>

๐Ÿ”ง TypeScript Supportโ€‹

Full TypeScript support with comprehensive type definitions:

import {BasicInformation} from '@nodeblocks/frontend-basic-information-block';
import {DefaultValues, FieldErrors, UseFormGetValues, UseFormSetError} from 'react-hook-form';

// Default form data structure
interface DefaultBasicInformationFormData {
  NameInput: string;
  FuriganaInput: string;
  PostalCodeInput: string;
  PrefectureSelect: string;
  CityInput: string;
  AddressInput: string;
  PhoneInput: string;
}

// Select option type for custom options
interface SelectOption {
  value: string;
  label: string;
}

const TypedBasicInformationExample = () => {
  const handleSubmit = (formData: DefaultBasicInformationFormData): void => {
    console.log('Form submitted:', formData);
  };

  const handleInvalid = (errors: FieldErrors<DefaultBasicInformationFormData>): void => {
    console.log('Validation errors:', errors);
  };

  const handleChange = (
    setError: UseFormSetError<DefaultBasicInformationFormData>,
    getValues: UseFormGetValues<DefaultBasicInformationFormData>,
  ): void => {
    const values = getValues();

    // Custom validation
    if (values.PhoneInput && values.PhoneInput.length < 10) {
      setError('PhoneInput', {message: 'Phone number too short'});
    }
  };

  const defaultValues: DefaultValues<DefaultBasicInformationFormData> = {
    NameInput: 'John Doe',
    PrefectureSelect: 'ๆฑไบฌ้ƒฝ',
  };

  return (
    <BasicInformation<DefaultBasicInformationFormData>
      onSubmit={handleSubmit}
      onInvalid={handleInvalid}
      onChange={handleChange}
      defaultValues={defaultValues}
      sx={{maxWidth: 600, mx: 'auto'}}
    >
      <BasicInformation.Title>Basic Information</BasicInformation.Title>
      <BasicInformation.Subtitle>Please provide your details</BasicInformation.Subtitle>
      <BasicInformation.NameInput />
      <BasicInformation.FuriganaInput />
      <BasicInformation.PostalCodeInput />
      <BasicInformation.PrefectureSelect />
      <BasicInformation.CityInput />
      <BasicInformation.AddressInput />
      <BasicInformation.PhoneInput />
      <BasicInformation.SubmitButton>Submit</BasicInformation.SubmitButton>
    </BasicInformation>
  );
};

๐Ÿ“ Notesโ€‹

  • The component uses MUI's Stack component with component="form" as its base
  • Form validation is powered by react-hook-form with mode: 'onBlur'
  • All input fields are automatically connected to the form context via Controller
  • The submit button is automatically disabled when formState.isValid is false
  • Default blocks are: title, subtitle, nameInput, furiganaInput, postalCodeInput, prefectureSelect, cityInput, addressInput, phoneInput, submitButton, input
  • The PrefectureSelect component includes all 47 Japanese prefectures by default
  • CSS classes follow BEM-style naming: nbb-basic-information, nbb-basic-information-title, etc.
  • Input fields use MUI TextField internally and support all TextField props
  • The onChange callback is triggered on every form value change for real-time validation
  • Default padding is p: 5 (40px) and spacing between elements is 4 (32px)

Built with โค๏ธ using React, TypeScript, and MUI.