react-gridforms

React components for Gridforms form layout

react-gridforms

Travis npm package Coveralls

React components for form layout with Gridforms.

Live Demo

Install

Note: Webpack is required in order to use this component from npm.

npm install react-gridforms

Browser bundles are available, which export a global GridForms variable and expect to find a global React variable to work with.

Usage

var GridForms = require('react-gridforms')
// or
var {GridForm, Fieldset, Row, Field} = require('react-gridforms')
// or
import {GridForm, Fieldset, Row, Field} from 'react-gridforms'

Nest <Fieldset>, <Row> and <Field> components under a <GridForm> as necessary, using a span prop to control the relative size of each field.

<GridForm>
  <Fieldset legend="Add to inventory">
    <Row>
      <Field span={3}>
        <label>Product Name</label>
        <input type="text" autoFocus/>
      </Field>
      <Field>
        <label>Tags</label>
        <input type="text"/>
      </Field>
    </Row>
  </Fieldset>
</GridForm>

Row spans will be calculated based on their Fields, so you only have to specify span props for fields which need more than the default of 1.

API

All components will pass any props not documented below to the container element they render.

GridForm component

Renders a <form> with a .grid-form class by default.

Prop Default Description
className An additional class name for the element rendered by the component
component 'div' The container component to be rendered - can be a tag name or a custom React component
custom false Flag to indicate a custom build of Gridforms is being used - when true the default .grid-form class will not be used, only the provided className

Fieldset component

Renders a <fieldset> with a <legend>.

Prop Description
legend Contents for the <legend>, which will only be rendered when a legend prop is provided

Row component

Renders a <div> and calculates a GridForms data-row-span attribute based on the span props of its Field component children.

Field component

Container for an input field.

Prop Default Description
span 1 Relative size of the field compared to others in the same Row - can be expressed as a Number or a String

MIT Licensed

Related Repositories

react-gridforms

react-gridforms

React components for Gridforms form layout ...