Attribute Selection Block

The AttributeSelection Component is a fully customizable and accessible attribute selection form built with React and TypeScript. It provides a complete interface for attribute selection with form validation, error handling, and modern design patterns.

🚀 Installation

npm install @nodeblocks/frontend-attribute-selection-block

📖 Usage

import {AttributeSelection} from '@nodeblocks/frontend-attribute-selection-block';

Basic Usage
Advanced Usage

Live Editor

function BasicAttributeSelection() {
  return (
    <AttributeSelection
      onSubmit={formData => {
        console.log('Attributes selected:', formData);
      }}
      onChange={(setError, getValues) => {
        const values = getValues();
        console.log('Form values:', values);
      }}
      onCancel={reset => {
        reset();
        console.log('Form cancelled');
      }}
      defaultValues={{example: true}}
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '16px',
      }}>
      <AttributeSelection.Title style={{color: 'black'}}>Title</AttributeSelection.Title>
      <AttributeSelection.Subtitle style={{color: 'black'}}>Subtitle</AttributeSelection.Subtitle>
      <AttributeSelection.FieldName style={{color: 'black'}}>FieldName</AttributeSelection.FieldName>
      <input type="checkbox" name="example" />
      <AttributeSelection.SubmitButton>Submit</AttributeSelection.SubmitButton>
      <AttributeSelection.CancelButton>Cancel</AttributeSelection.CancelButton>
    </AttributeSelection>
  );
}

Result

🔧 Props Reference

Main Component Props

Prop	Type	Default	Description
`onSubmit`	`(data: T) => void`	Required	Callback function triggered when form is submitted with valid data
`onChange`	`(setError: UseFormSetError<T>, getValues: UseFormGetValues<T>) => void`	Required	Callback function triggered when form values change
`onCancel`	`(reset: UseFormReset<T>) => void`	Required	Callback function triggered when cancel button is clicked
`defaultValues`	`DefaultValues<T>`	`undefined`	Default form values to populate fields on initial render
`className`	`string`	`undefined`	Additional CSS class name for styling the form container
`children`	`BlocksOverride`	`undefined`	Custom blocks override for form components

Note: This component inherits all HTML form element props.

Sub-Components

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

AttributeSelection.Title

Prop	Type	Default	Description
`children`	`ReactNode`	`"職種"`	Title text content for the form header
`className`	`string`	`undefined`	Additional CSS class name for styling

Note: This component inherits all HTML h2 element props.

AttributeSelection.Subtitle

Prop	Type	Default	Description
`children`	`ReactNode`	`"ご自身の職種を選択してください"`	Subtitle text content providing form instructions
`className`	`string`	`undefined`	Additional CSS class name for styling

Note: This component inherits all HTML div element props.

AttributeSelection.FieldName

Prop	Type	Default	Description
`children`	`ReactNode`	`"役割"`	Field name text content displayed above form inputs
`className`	`string`	`undefined`	Additional CSS class name for styling

Note: This component inherits all HTML div element props.

AttributeSelection.Checkbox

Prop	Type	Default	Description
`name`	`string`	`"example"`	Field name used for form data and validation
`value`	`boolean`	`false`	Default checked state of the checkbox
`label`	`string`	`undefined`	Label text displayed next to the checkbox
`isRequired`	`boolean`	`false`	Whether the checkbox is required for form validation
`isDisabled`	`boolean`	`false`	Whether the checkbox is disabled
`className`	`string`	`undefined`	Additional CSS class name for styling

Note: This component inherits all HTML checkbox element props.

AttributeSelection.SubmitButton

Prop	Type	Default	Description
`children`	`ReactNode`	`"次へ"`	Button text content
`className`	`string`	`undefined`	Additional CSS class name for styling
`fill`	`enum`	`"fill"`	Button fill style
`icon`	`enum`	`undefined`	Optional icon for the left-hand side of the button
`iconColor`	`enum`	`undefined`	Color for the left-hand side icon. When not provided, a default color for the fill type will be used.
`isDisabled`	`boolean`	`false`	Whether the button is disabled and cannot be used
`onClick`	`function`	`undefined`	Function to handle button click
`size`	`enum`	`"M"`	Button vertical size
`textAlign`	`enum`	`"center"`	Button icon and text positioning within the button
`textColor`	`enum`	`"default"`	Button text color
`textEmphasis`	`boolean`	`false`	Button text weight
`textSize`	`enum`	`"M"`	Button text size
`type`	`enum`	`"submit"`	Button purpose (affects html type)

AttributeSelection.CancelButton

Prop	Type	Default	Description
`children`	`ReactNode`	`"戻る"`	Button text content
`className`	`string`	`undefined`	Additional CSS class name for styling
`fill`	`enum`	`"fill"`	Button fill style
`icon`	`enum`	`undefined`	Optional icon for the left-hand side of the button
`iconColor`	`enum`	`undefined`	Color for the left-hand side icon. When not provided, a default color for the fill type will be used.
`isDisabled`	`boolean`	`false`	Whether the button is disabled and cannot be used
`onClick`	`function`	`undefined`	Function to handle button click
`size`	`enum`	`"M"`	Button vertical size
`textAlign`	`enum`	`"center"`	Button icon and text positioning within the button
`textColor`	`enum`	`"default"`	Button text color
`textEmphasis`	`boolean`	`false`	Button text weight
`textSize`	`enum`	`"M"`	Button text size
`type`	`enum`	`"button"`	Button purpose (affects html type)

🔧 TypeScript Support

Full TypeScript support with comprehensive type definitions:

import {AttributeSelection} from '@nodeblocks/frontend-attribute-selection-block';
import {UseFormGetValues, UseFormSetError} from 'react-hook-form';

// Define your own form data interface
interface CustomAttributeFormData {
  role: boolean;
  department: boolean;
  experience: boolean;
  skills: boolean;
}

const handleSubmit = (formData: CustomAttributeFormData) => {
  // Type-safe form handling
  console.log(formData.role, formData.department, formData.experience);
};

const handleChange = (
  setError: UseFormSetError<CustomAttributeFormData>,
  getValues: UseFormGetValues<CustomAttributeFormData>,
) => {
  const values = getValues();
  // Validate form values and set errors if needed
  if (!values.role && !values.department) {
    setError('role', {message: 'Please select at least one option'});
  }
};

const AttributeSelectionForm = () => {
  return (
    <AttributeSelection<CustomAttributeFormData>
      onSubmit={handleSubmit}
      onChange={handleChange}
      onCancel={reset => reset()}
      defaultValues={{role: false, department: false, experience: false, skills: false}}>
      <AttributeSelection.Title>Select Your Attributes</AttributeSelection.Title>
      <AttributeSelection.Subtitle>Choose the options that apply to you</AttributeSelection.Subtitle>
      <AttributeSelection.FieldName>Professional Information</AttributeSelection.FieldName>
      <AttributeSelection.Checkbox name="role" label="Management Role" />
      <AttributeSelection.Checkbox name="department" label="Technical Department" />
      <AttributeSelection.Checkbox name="experience" label="5+ Years Experience" />
      <AttributeSelection.Checkbox name="skills" label="Leadership Skills" />
      <AttributeSelection.SubmitButton>Continue</AttributeSelection.SubmitButton>
      <AttributeSelection.CancelButton>Go Back</AttributeSelection.CancelButton>
    </AttributeSelection>
  );
};

Built with ❤️ using React, TypeScript, and modern web standards.

🚀 Installation​

📖 Usage​

🔧 Props Reference​

Main Component Props​

Sub-Components​

AttributeSelection.Title​

AttributeSelection.Subtitle​

AttributeSelection.FieldName​

AttributeSelection.Checkbox​

AttributeSelection.SubmitButton​

AttributeSelection.CancelButton​

🔧 TypeScript Support​