@ramenjs/formstepper v2.2.2
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 parametertotalSteps
integer Indication of how many steps the form hasfields
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,
},
],
});
})();
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago