Input Field

This page explains how the default Input works and how to implement it. Input put can either be used as a text input field or as a textarea. Here is how to use the Input field:

import React, { Component } from 'react'
import Form, { Input } from 'react-state-form'

export default class ExampleForm extends Component {
  handleEmailChange = (event, field, setField) => {
    console.log('Email was changed!')
  }

  render() {
    const fieldDetails = {
      userName : {
        id          : 'name',
        value       : 'XXXX',
        placeholder : 'enter your name',
        label       : 'Name',
        displayName : 'User Name',
        validate    : 'required|alphaNumeric|minLength-3|maxLength-13',
        customRules : {
          newRule : {
            rule : () => /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i,
            formatter() {
              return 'yes, it worked!'
            }
          }
        },
        events : {
          onChange : this.handleNameChange
        }
      }
    }

    const formProps = {
      defaultClasses : {
        contClass  : 'testing',
        inputClass : 'input-test another',
        errorClass : 'error-test',
        label      : 'label-test'
      }
    }

    return (
      <div>
        <Form {...props}>
          <Input {...fieldDetails.userName} />
        </Form>
      </div>
    )
  }
}

Props Details:

id[String]:

id is a required field. This property helps the Form to keep track of the individual field.

name[String]:

name is an optional field. This is used to add the name attribute to the Input.

value[String]:

value is an optional field. This is used to assign a default value to the field.

label[String]:

label is an optional field. Input adds a label tag before the input field. Note that label won't be created if the label prop is not passed.

validate[String]:

validate is an optional field. Pass pipe(|) operator separated validation rule names in case of multiple rules. Note that validate expects only the Form provided rules(please refer to validation wiki for more details). Please pass the custom rules through the customRules prop. Here is an example of validate prop:

  <Input {...otherProps} validate='required|email|maxLength-10' />

placeholder[String]:

placeholder is an optional field. This adds a placeholder attribute to the text input(or textarea) field.

displayName[String]:

displayName is an optional field. This is used in the error messages. Let's say displayName of a field is "user name" and it has an invalid value. The error message for the field will be like: "user name has invalid value".

Please note that the id property will be used as displayName in case of no displayName passed.

shouldUseDefaultClasses[Boolean]:

shouldUseDefaultClasses is an optional field and is set to true by default. Input will add Form level default classes if it's set to true.

shouldValidateField[Boolean]:

shouldValidateField is an optional field and set to false by default. Input will not be validated if the property value is set to false.

type[String]:

type is an optional field and set to text by default. Type can be either of the following:

• text
• textarea
• email
• number
• tel
• password

events[Object]:

events is an optional field. Please pass all events(onChange, onBlur, etc.) through this object. Please refer to the example above for more details.

classes[Object]:

classes is an optional field. This is used to add additional classes other than Form default classes. This is the shape of the classes object:

{
  labelClass, // classes for label
  contClass,  // input container class(inspect Input HTML for more details)
  errorClass, // class for error text
  fieldClass  // this will be added to the actual input field
}

customRules[Object]:

customRules is an optional field. This is used to pass additional validation rules. Check out the example above and custom validation wiki for more details.