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 and TypeScript. It provides a complete address and contact information interface with modern design patterns, form validation, and flexible customization options.

๐Ÿš€ Installationโ€‹

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

๐Ÿ“– 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โ€‹

The main BasicInformation component inherits all props from the HTML form element (except onSubmit, onChange, and children which are overridden) and adds:

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

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โ€‹

Inherits all props from the HTML h2 element and adds:

PropTypeDefaultDescription
childrenReactNode"ๅŸบๆœฌๆƒ…ๅ ฑ"Content to display as the title

BasicInformation.Subtitleโ€‹

Inherits all props from the HTML div element and adds:

PropTypeDefaultDescription
childrenReactNodeDefault required fields messageContent to display as the subtitle - typically shows required field information

BasicInformation.NameInputโ€‹

Uses deepMerge to combine default field options with passed props. Inherits all props from the internal Input component and adds:

| Prop | Type | Default | Description | |------|------|---------|-------------|s | name | string | "NameInput" | Field name for form data | | className | string | undefined | Additional CSS class name for styling | | errorText | string | undefined | Error text for the input | | isDisabled | boolean | undefined | Whether the input is disabled | | isRequired | boolean | undefined | Whether the input is required | | label | string | "ๆฐๅ" | Label of the input field | | labelWeight | enum | "bold" | Label weight | | onOperationClick | () => void | undefined | Operation onClick callback | | postfixText | string | undefined | Text to place after the component | | showPassword | boolean | undefined | Whether to show password |

Note: This component additional inherits some common HTML input element props.

BasicInformation.FuriganaInputโ€‹

PropTypeDefaultDescription
namestring"FuriganaInput"Field name for form data
classNamestringundefinedAdditional CSS class name for styling
errorTextstringundefinedError text for the input
isDisabledbooleanundefinedWhether the input is disabled
isRequiredbooleanundefinedWhether the input is required
labelstring"ใƒ•ใƒชใ‚ฌใƒŠ"Label of the input field
labelWeightenum"bold"Label weight
onOperationClick() => voidundefinedOperation onClick callback
postfixTextstringundefinedText to place after the component
showPasswordbooleanundefinedWhether to show password

Note: This component additional inherits some common HTML input element props.

BasicInformation.PostalCodeInputโ€‹

PropTypeDefaultDescription
namestring"PostalCodeInput"Field name for form data
classNamestringundefinedAdditional CSS class name for styling
errorTextstringundefinedError text for the input
isDisabledbooleanundefinedWhether the input is disabled
isRequiredbooleanundefinedWhether the input is required
labelstring"้ƒตไพฟ็•ชๅท"Label of the input field
labelWeightenum"bold"Label weight
onOperationClick() => voidundefinedOperation onClick callback
postfixTextstringundefinedText to place after the component
showPasswordbooleanundefinedWhether to show password

Note: This component additional inherits some common HTML input element props.

BasicInformation.PrefectureSelectโ€‹

PropTypeDefaultDescription
namestring"PrefectureSelect"Field name for form data
labelstring"้ƒฝ้“ๅบœ็œŒ"Field label
labelWeightenum"bold"Label weight
selectOptionValuesArray<{value: string, label: string}>[]Array of prefecture options
isRequiredbooleanundefinedWhether the field is required
isDisabledbooleanundefinedWhether the input is disabled
errorTextstringundefinedError text for the input
classNamestringundefinedAdditional CSS class name for styling

Note: This component additional inherits some common HTML select element props.

BasicInformation.CityInputโ€‹

PropTypeDefaultDescription
namestring"CityInput"Field name for form data
classNamestringundefinedAdditional CSS class name for styling
errorTextstringundefinedError text for the input
isDisabledbooleanundefinedWhether the input is disabled
isRequiredbooleanundefinedWhether the input is required
labelstring"ๅธ‚ๅŒบ็”บๆ‘"Label of the input field
labelWeightenum"bold"Label weight
onOperationClick() => voidundefinedOperation onClick callback
postfixTextstringundefinedText to place after the component
showPasswordbooleanundefinedWhether to show password

Note: This component additional inherits some common HTML input element props.

BasicInformation.AddressInputโ€‹

PropTypeDefaultDescription
namestring"AddressInput"Field name for form data
classNamestringundefinedAdditional CSS class name for styling
errorTextstringundefinedError text for the input
isDisabledbooleanundefinedWhether the input is disabled
isRequiredbooleanundefinedWhether the input is required
labelstring"็”บๅใƒป็•ชๅœฐใƒปๅปบ็‰ฉ"Label of the input field
labelWeightenum"bold"Label weight
onOperationClick() => voidundefinedOperation onClick callback
postfixTextstringundefinedText to place after the component
showPasswordbooleanundefinedWhether to show password

Note: This component additional inherits some common HTML input element props.

BasicInformation.PhoneInputโ€‹

PropTypeDefaultDescription
namestring"PhoneInput"Field name for form data
classNamestringundefinedAdditional CSS class name for styling
errorTextstringundefinedError text for the input
isDisabledbooleanundefinedWhether the input is disabled
isRequiredbooleanundefinedWhether the input is required
labelstring"้€ฃ็ตกๅ…ˆ้›ป่ฉฑ็•ชๅท"Label of the input field
labelWeightenum"bold"Label weight
onOperationClick() => voidundefinedOperation onClick callback
postfixTextstringundefinedText to place after the component
showPasswordbooleanundefinedWhether to show password
inputModestring"numeric"Input mode for mobile keyboards

Note: This component additional inherits some common HTML input element props.

BasicInformation.SubmitButtonโ€‹

Inherits all props from the Button component from @basaldev/blocks-frontend-framework and adds:

PropTypeDefaultDescription
childrenReactNode"ๆฌกใธ"Text to place inside the button
classNamestringundefinedAdditional CSS class name for styling
fillenum"fill"Button fill style
iconenumundefinedOptional icon for the left-hand side of the button
iconColorenumundefinedColor for the left-hand side icon. When not provided, a default color for the fill type will be used.
isDisabledbooleanfalseWhether the button is disabled and cannot be used
onClickfunctionundefinedFunction to handle button click
sizeenum"M"Button vertical size
textAlignenum"center"Button icon and text positioning within the button
textColorenum"default"Button text color
textEmphasisbooleanfalseButton text weight
textSizeenum"M"Button text size
typeenum"submit"Button purpose (affects html type)

Note: This component additional inherits some common HTML button element props.

Additional Field Componentsโ€‹

The component also provides additional field types that can be used in custom forms:

BasicInformation.Inputโ€‹

PropTypeDefaultDescription
namestringRequiredField name for form data
errorTextstringundefinedError text for the input
isDisabledbooleanundefinedWhether the input is disabled
isRequiredbooleanundefinedWhether the input is required
labelstringRequiredLabel of the input field
labelWeightenum"regular"Label weight
onOperationClick() => voidundefinedOperation onClick callback
postfixTextstringundefinedText to place after the component
showPasswordbooleanundefinedWhether to show password

๐Ÿ”ง TypeScript Supportโ€‹

Full TypeScript support with comprehensive type definitions:

import {BasicInformation} from '@nodeblocks/frontend-basic-information-block';
//in future we will not use react-hook-form, we will use our own form handling
import {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;
}

// Extend with custom fields (component uses union type)

const MyBasicInformationForm = () => {
  const handleSubmit = (formData: DefaultBasicInformationFormData) => {
    console.log('Form submitted:', formData);
    // Handle form submission
  };

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

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

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

  return (
    <BasicInformation<DefaultBasicInformationFormData>
      onSubmit={handleSubmit}
      onInvalid={handleInvalid}
      onChange={handleChange}
      defaultValues={{NameInput: 'John Doe'}}>
      <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>
  );
};

Built with โค๏ธ using React, TypeScript, and modern web standards.