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.

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"
};

<FormComponent field={fieldExample} />

| Key of field | Permitted values | Required | Note | |----------------|-------------------------------------------------------|----------| ---- | | id | "inputId" | Y | - | | type | "select", "checkbox", "textarea", "text" | Y | - | | label | "Select an option", "Agree to terms" | N | - | | name | "fieldName" | Y | - | | onKeyDownRegex | "/^[a-zA-Z0-9]+$/" | N | - | | onChange | props.onChange props for checkbox type | N | - | | initialOption | { value: "initial", label: "Please select" } | N | - | | options | [{ value: "value1", label: "Option 1" },{ value: "value2", label: "Option 2" }] | N | - | | textAreaRows | number | N | Rows number for textarea | | textAreaCols | number | N | Cols number for textarea | | defaultValue | A default value for textarea | N | - |

Styling

• textarea has a className textarea-fcta