Input Bindings for React Form Base

HTML input bindings for react-form-base.

Installation

npm install --save react-form-js

Usage

For a more detailed information on core functionality of react-form-base, take a look at react-form-base demo. To see a sample usage of this package components, you may want to look at react-form-js components demo.

Example

import Form, {
  TextField,
  TextArea,
  Select,
  Checkbox,
  CheckboxGroup,
  RadioButtonGroup,
  RadioButton
} from 'react-form-js';

const ages = new Array(50).fill(10).map((n, i) => n + i);

export default class MyForm extends Form {
  render() {
    return (
      <div>
        <TextField {...this.$('fullName')} label="Full Name" />
        <TextArea {...this.$('description')} label="Description" />
        <Select {...this.$('age')} options={ages} includeBlank="Select..." />
        <CheckboxGroup {...this.$('favoriteColors')}>
          <Checkbox value="red" label="Red" />
          <Checkbox value="green" label="Green" />
          <Checkbox value="blue" label="Blue" />
        </CheckboxGroup>
        <RadioButtonGroup {...this.$('sex')}>
          <RadioButton value="male" label="Male" />
          <RadioButton value="female" label="Female" />
        </RadioButtonGroup>
        <Checkbox {...this.$('agree')} label="I Agree" />
      </div>
    );
  }
}

Component Props

All of the components receive value, onChange, error and name properties from react-form-base API. The latter is not directly used by components except for RadioButtonGroup component, where it is required for component to work.

Bellow are the specs for other properties that components work with.

TextField

Wraps <input type="text" /> HTML tag.

Prop Name	Spec	Description
label	PropTypes.node	A label to be rendered near the input.
labelPosition	PropTypes.oneOf(['before', 'after']) Defaults to 'before'	Specifies whether label should be rendered before or after input element.
className	PropTypes.string	className for the root component element (which is a label).
inputClassName	PropTypes.string	className for internal input element.
errorClassName	PropTypes.stringDefaults to 'error'	className for internal error element (div), which is rendered if error is present.
...rest		the rest of props are delegated to the nested input[type="text"] element.

TextArea

Wraps <textarea /> HTML tag.

Prop Name	Spec	Description
label	PropTypes.node	A label to be rendered near the textarea.
labelPosition	PropTypes.oneOf(['before', 'after']) Defaults to 'before'	Specifies whether label should be rendered before or after textarea element.
className	PropTypes.string	className for the root component element (which is a label)
inputClassName	PropTypes.string	className for internal textarea element
errorClassName	PropTypes.stringDefaults to 'error'	className for internal error element (div), which is rendered if error is present.
...rest		the rest of props are delegated to the nested textarea element.

Select

Wraps <select /> HTML tag.

Prop Name	Spec	Description
options	PropTypes.arrayOf( PropTypes.oneOfType([ PropTypes.number, PropTypes.string, PropTypes.shape({ value: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), label: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]) }) ]) )	options to be rendered within internal select tag. If array of strings or integers is passed, it's values are used as options' texts and values. If array of objects is passed, each object should have value and label properties.
children	PropTypes.node	Can be used to render options manually. Overrides options prop.
includeBlank	PropTypes.oneOfType([PropTypes.bool, PropTypes.string])	Used to render option with blank value. If true is passed, renders "None" as option's text. If string is passed, renders it as option's text.
label	PropTypes.node	A label to be rendered near the select element.
labelPosition	PropTypes.oneOf(['before', 'after']) Defaults to 'before'	Specifies whether label should be rendered before or after select element.
className	PropTypes.string	className for the root component element (which is a label).
inputClassName	PropTypes.string	className for internal select element.
errorClassName	PropTypes.stringDefaults to 'error'	className for internal error element (div), which is rendered if error is present.
...rest		the rest of props are delegated to the nested select element.

Checkbox

Wraps <input type="checkbox" /> HTML tag.

Prop Name	Spec	Description
label	PropTypes.node	A label to be rendered near the input.
labelPosition	PropTypes.oneOf(['before', 'after']) Defaults to 'after'	Specifies whether label should be rendered before or after input element.
className	PropTypes.string	className for the root component element (which is a label).
inputClassName	PropTypes.string	className for internal input element.
errorClassName	PropTypes.stringDefaults to 'error'	className for internal error element (div), which is rendered if error is present.
...rest		the rest of props are delegated to the nested input[type="checkbox"] element.

CheckboxGroup

Wraper around multiple Checkbox components. Has to include Checkbox'es as direct children. This component is designed for inputs whose value represents a collection of items that can be included in collection via checkboxes. For example, if your input has value of ['foo', 'bar'], Checkboxes underneath CheckboxGroup input with values of 'foo' and 'bar' will be checked. All other checkboxes will be unchecked.

Prop Name	Spec	Description
labelPosition	PropTypes.oneOf(['before', 'after']) Defaults to 'after'	Passed to nested Checkbox components. Specifies whether label should be rendered before or after input element. Can be overriden by Checkbox.
className	PropTypes.string	className for the root component element.
checkboxClassName	PropTypes.string	Passed to nested Checkbox components as className property. Can be overriden by Checkbox.
inputClassName	PropTypes.string	Passed to nested Checkbox components property. Can be overriden by Checkbox.
errorClassName	PropTypes.stringDefaults to 'error'	className for internal error element (div), which is rendered if error is present.
children	PropTypes.node	Actual checkboxes should be passed as children as Checkbox components. All other (non-Checkbox) elements are rendered untouched.
...rest		the rest of props is delegated to each of nested Checkbox component (and only to them).

RadioButtonGroup

Wraper around multiple RadioButton components. Has to include RadioButtons as direct children, and supplies name property to them.

Prop Name	Spec	Description
labelPosition	PropTypes.oneOf(['before', 'after']) Defaults to 'after'	Passed to nested RadioButton components. Specifies whether label should be rendered before or after input element. Can be overriden by RadioButton.
className	PropTypes.string	className for the root component element.
radioClassName	PropTypes.string	Passed to nested RadioButton components as className property. Can be overriden by RadioButton.
inputClassName	PropTypes.string	Passed to nested RadioButton components property. Can be overriden by RadioButton.
errorClassName	PropTypes.stringDefaults to 'error'	className for internal error element (div), which is rendered if error is present.
children	PropTypes.node	Actual radio buttons should be passed as children as RadioButton components. All other (non-RadioButton) elements are rendered untouched.
...rest		the rest of props is delegated to each of nested RadioButton component (and only to them).

RadioButton

Wraps <input type="radio" /> HTML tag.

Prop Name	Spec	Description
label	PropTypes.node	A label to be rendered near the input.
labelPosition	PropTypes.oneOf(['before', 'after']) Defaults to 'after'	Specifies whether label should be rendered before or after input element.
className	PropTypes.string	className for the root component element (which is a label).
inputClassName	PropTypes.string	className for internal input element.
...rest		the rest of props are delegated to the nested input[type="radio"] element.

Credits

Hugs and thanks to ogrechishkina for her support and building all of the CSS for demo application.

License

MIT