Select Box

This page explains how the default Select works and how to implement it. Select in Form doesn't use the native select tag to make the Select box. It uses basic divs to make a select box. This helps to make Select more customizable. The Form doesn't provide styles so you can add styles as per your application theme(of course it's fully functional 😃). Here is how to use Select:

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

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

  render() {
    const fieldDetails = {
      gender : {
        id       : 'gender',
        value    : '3',
        label    : 'gender',
        validate : 'required',
        options  : [
          {
            value       : '3',
            id          : 'male',
            displayName : 'male'
          },
          {
            id          : '2',
            value       : 'female',
            displayName : 'female'
          },
          {
            id          : '1',
            value       : 'not sure',
            displayName : 'not sure'
          }
        ],
        displayName : 'Gender',
        events      : {
          onChange() {
            console.log('select value changed!')
          }
        }
      }
    }

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

    return (
      <div>
        <Form {...props}>
          <Select {...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.

options[Array]:

options is a required field. It is an array of objects. This is used to render all available options for the Select field. Here is the shape of the object:

  {
    id          : 'male', // id of the option
    value       : 0,      // value to set if the option is  selected
    displayName : 'Male'  // name to display in error messages.
  }

Please check out the example above for more details.

value[String]:

value is a required field. Please note that value(s) must be one of the id property of the options prop.

label[String]:

label is an optional field. Select adds a label tag before the 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:

<Select {...otherProps} validate='required' />

shouldValidateField[Boolean]:

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

shouldUseDefaultClasses[Boolean]:

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

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:

{
  contClass           : '', // field container class(inspect Input HTML for more details)
  labelClass          : '', // classes for label
  fieldClass          : '', // this will be added to the actual field
  errorClass          : '', // class for error text
  optionClass         : '', // this will be added to each option
  selectedOptionClass : ''  // class added to the selected option(some tick or different color)
}

events(Object):

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

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.