formsy-react-form-inputs

Formsy React Form Inputs demo

Implementation Guide

1. Installation

npm install --save formsy-react
npm install --save formsy-react-form-inputs

2. Import all require input types, styles and Formsy React Form

import { Form } from "formsy-react";
import { Input, Checkbox, RadioGroup, Styles } from "../../../src/";

3. Add Components to JSX

<Form onSubmit={this.submitForm} noValidate className="form">
  <Input
    type="text"
    id="signup-first-name"
    name="signupFirstName"
    required
    value=""
    className="input"
    label="First name"
    placeholder="First name"
    validationErrors={{
      isDefaultRequiredValue: 'This is required'
    }}
  />

  <Input
    type="text"
    id="signup-last-name"
    name="signupLastName"
    value=""
    className="input"
    label="Last name"
  />

  <Input
    type="currency"
    id="signup-other-income"
    name="signupOtherIncome"
    value=""
    currencySymbol="£"
    label="Other income"
    helpText="This is your other annual household income from other factors before tax. Please enter 0 if nothing"
  />

  <Input
    type="text"
    id="signup-email"
    name="signupemail"
    value=""
    required
    label="Email address"
    validations={{
      isEmail: true,
    }}
    validationErrors={{
      isEmail: 'You have to type valid email',
      isDefaultRequiredValue: 'This is required'
    }}
    debounce={{
      change: 500
    }}
  />

  <Checkbox
    id="singup-checkbox"
    name="signupCheckbox"
    label="Get the free Martin’s email tips too"
    debounce={{
      change: 0
    }}
  />

  <RadioGroup
    name="signupRadio"
    options={radioOptions}
    className="col-xs"
    groupClassName="row"
    debounce={{
      change: 0
    }}
  />


  <button
    type="submit">
    Submit
  </button>

</Form> 

API

Currently a work in progress