Fieldstack is the most robust ReactJS component library for building beautiful, flexible & highly interactive form-based interfaces.

npm install --save fieldstack

Fieldstack relies on SCSS for styling. Be sure to import the library's style sheets into your application's Scss.

@import '~fieldstack/lib/style_config' @import '~fieldStack/lib/default_theme'; @import '~fieldstack/lib/base_styles'; 

To customize theme colors, fonts etc, copy style_config.scss and replace the values in it with your custom values.

 import React, {Component} from 'react'; import {FieldStack} from 'fieldstack'; class SampleForm extends Component{ state: { values: {} } render(){ const actions = { onChange: this.handleChange.bind(this) } return( <FieldStack formData={formData} values={this.state.values} actions={actions}/> ); } handleChange(fieldName, event){ this.setState(currentState=>({ values: { [fieldName]: event.target.value, ...currentState.values } })) } } formData: { formTitle: 'Signup Form', fields: [ { name: 'email', label: 'Email', type: 'email', }, { name: 'password', label: 'Password', type: 'password', }, { name: 'website', label: 'Company Website', type: 'url', }, { name: 'about', label: 'Company Bio', type: 'multiline-text', }, { name: 'regDate', label: 'Registration Date', type: 'date', }, { name: 'time', label: 'Office Resumption Time', type: 'time', }, { name: 'industry', label: 'Industry', type: 'option-text', options: [ 'Automobile', 'Building', 'Cosmetics', 'Eduction', ] }, { name: 'phone', label: 'Phone Number', type: 'tel', } { name: 'accountType', label: 'Account Type', type: 'selectFieldSet', options: [ {key:'savings', label: 'Saving Account'}, {key:'current', label: 'Current Account'}, {key:'escrow', label: 'Escrow Account'}, {key:'dom', label: 'Dom Account'}, ] }, { name: 'addon', label: 'Addon Features', type: 'multiSelectFieldSet', options: [ {key:'social', label: 'Social Banking'}, {key:'lifestyle', label: 'Lifestyle Banking'}, {key:'mobile', label: 'Mobile Banking'} ] }, ] } 

See Fieldstack Component documentation for a more advanced example

number | defaults to null

object | defaults to {}

boolean | defaults to false

object | defaults to {}

object | defaults to null

object | defaults to {}

string | defaults to null

function(options: object) | defaults to null

object | defaults to {}

string | defaults to ""

boolean | defaults to false

string | defaults to null

boolean | defaults to false

string | defaults to ""

string | defaults to ""

string | defaults to null

function(event: syntheticEvent) | defaults to ()=>{}

function(event: syntheticEvent) | defaults to ()=>{}

function(event: syntheticEvent) | defaults to ()=>{}

function(event: syntheticEvent) | defaults to ()=>{}

function(event: syntheticEvent) | defaults to ()=>{}

function(event: syntheticEvent) | defaults to ()=>{}

bolean | defaults to false

string | defaults to ""

bolean | defaults to false

string | defaults to ""

Same as TextField +

options | defaults to []

Same as TextField +

number | defaults to 3

string | defaults to ""

string | defaults to null

boolean | defaults to false

string | defaults to ""

string | defaults to ""

function(event: syntheticEvent) | defaults to ()=>{}

bolean | defaults to false

object | defaults to <DraftJS Editor State>

uncollapse | defaults to false

string | defaults to ""

boolean | defaults to false

string | defaults to null

boolean | defaults to false

string | defaults to ""

string | defaults to ""

string | defaults to null

function(event: syntheticEvent) | defaults to ()=>{}

array | defaults to null

object [] | of shape: { key: string, label: string, iconClass: string } | defaults to null

string | one of checkList, buttonGrid | defaults to null

string | defaults to ""

boolean | defaults to false

string | defaults to null

boolean | defaults to false

string | defaults to ""

string | defaults to ""

string | defaults to null

function(event: syntheticEvent) | defaults to ()=>{}

array | defaults to null

object | of shape: { key: string, label: string, iconClass: string } | defaults to null

string | one of checkList, buttonGrid | defaults to null

###props

string | defaults to null

boolean | defaults to true

boolean | defaults to false

function(event: syntheticEvent) | defaults to ()=>{}

string | defaults to ""

boolean | defaults to false

boolean | defaults to false

MIT