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,
},
],
});
})();
``