Form Component

NPM package to get a form component.

| CI / CD | Status | | ------- | ------ | | NPM | | | Semaphore CI | | | Circle CI | | | Coverall | | | SonarCloud | |

form-component returns a Form component, based on input props. It works on Next Framework.

Requirements

• Node.js >= 18.0.0

Installation

npm install @sineverba/form-component

Usage

const fieldExample = {
  id: "inputId",
  type: "select",
  label: "Select an option",
  name: "fieldName",
  onKeyDownRegex: "/^[a-zA-Z0-9]+$/",
  initialOption: { value: "initial", label: "Please select" },
  options: [
    { value: "value1", label: "Option 1" },
    { value: "value2", label: "Option 2" }
  ],
  defaultValue: "A default value",
  onChange: (e) => console.log(e.target.value)
};

<FormComponent field={fieldExample} />

Field Configuration

| Key | Type | Required | Description | |----------------|-------------------------------------------------------|----------|-------------| | id | string | Y | Unique identifier for the field | | type | "select" / "checkbox" / "textarea" / "text" / "password" / "number" | Y | Type of input field | | name | string | Y | Name attribute for the field | | label | string | N | Label text for the field | | onKeyDownRegex | string | N | Regex pattern to validate key press events (text and textarea inputs only) | | onKeyDown | function | N | Custom key down event handler (text and textarea inputs only) | | onChange | function | N | Change event handler | | initialOption | { value: string, label: string } | N | Initial option for select fields | | options | Array<{ value: string, label: string }> | N | Options array for select fields | | value | string / number | N | Controlled value for select and textarea fields | | textAreaRows | number | N | Number of rows for textarea | | textAreaCols | number | N | Number of columns for textarea | | defaultValue | string / number | N | Default value for textarea or input number | | defaultChecked | boolean | N | Default checked state for checkbox (default: false) | | placeholder | string | N | Placeholder text for textarea |

Styling

• textarea has a className textarea-fcta