Ramen - FormStepper

Here Comes the FormStepper - a stepped form module for Ramen

Installation

npm i @ramenjs/formstepper -S

How to use

  import FormStepper from '@ramenjs/formstepper';
  FormStepper(config);

configuration

• selector [string] The selector for the DOM element where the form will be rendered E.g. .js-form-stepper
• onSubmit [function] A callback function thats fired on form submit, recives the form data as the first parameter
• totalSteps [integer] Indication of how many steps the form has
• fields [array] Array of fields to be rendered (See blow for examples)

Fields

Todo

Fields Types

Todo

Example Configuration

// Import Dependencies
import FormStepper from '@ramenjs/formstepper';
import { isRequired } from '@ramenjs/utilitybelt';

// Run Application
(() => {
  FormStepper({
    selector: '.js-form-stepper',
    totalSteps: 3,
    onSubmit: (data) => {
      console.log('SUBMIT', data); // eslint-disable-line
    },
    fields: [
      {
        id: 'step1Legend',
        type: 'legend',
        text: 'Step 1 legend',
        step: 1,
      },
      {
        id: 'exampleText',
        name: 'exampleText',
        label: 'Text input',
        type: 'text',
        placeholder: 'Text input placeholder',
        validate: [isRequired],
        step: 1,
      },
      {
        id: 'exampleSelect',
        name: 'exampleSelect',
        label: 'Select dropdown',
        type: 'select',
        options: [
          {
            id: 'option1',
            label: 'Select option 1',
            value: 'Select option 1',
          },
          {
            id: 'option2',
            label: 'Select option 2',
            value: 'Select option 2',
          },
          {
            id: 'option3',
            label: 'Select option 3',
            value: 'Select option 3',
          },
        ],
        step: 1,
      },
      {
        id: 'exampleCheckbox',
        name: 'exampleCheckbox',
        label: 'Checkbox',
        type: 'checkbox',
        options: [
          {
            id: 'exampleCheckbox-option1',
            label: 'Checkbox option 1',
            value: 'Checkbox option 1',
          },
        ],
        value: true,
        step: 1,
      },
      {
        id: 'exampleRadio',
        name: 'exampleRadio',
        label: 'Radio',
        type: 'radio',
        options: [
          {
            id: 'exampleRadio-option1',
            label: 'Radio option 1',
            value: 'Radio option 1',
          },
          {
            id: 'exampleRadio-option2',
            label: 'Radio option 2',
            value: 'Radio option 2',
          },
          {
            id: 'exampleRadio-option3',
            label: 'Radio option 3',
            value: 'Radio option 3',
          },
        ],
        value: 'Radio option 2',
        step: 1,
      },
      {
        id: 'step2Legend',
        type: 'legend',
        text: 'Step 2 legend',
        step: 2,
      },
      {
        id: 'exampleText3',
        name: 'exampleText3',
        label: 'Text input 3',
        type: 'text',
        placeholder: 'Text input placeholder',
        validate: [isRequired],
        step: 2,
      },
      {
        id: 'exampleText4',
        name: 'exampleText4',
        label: 'Text input 4',
        type: 'text',
        placeholder: 'Text input placeholder',
        validate: [isRequired],
        step: 2,
      },
      {
        id: 'secrettest',
        name: 'secrettest',
        label: 'Secret field if you type test ha',
        type: 'text',
        placeholder: 'Text input placeholder',
        showField: formData => formData.exampleText === 'test', // only show this field if 'exampleText' = 'test'
        step: 2,
      },
      {
        id: 'step3Legend',
        type: 'legend',
        text: 'Step 3 legend',
        step: 3,
      },
      {
        id: 'exampleText5',
        name: 'exampleText5',
        label: 'Text input 5',
        type: 'text',
        placeholder: 'Text input placeholder',
        step: 3,
      },
    ],
  });
})();