1.0.8 • Published 8 years ago

tforms v1.0.8

Weekly downloads
2
License
MIT
Repository
github
Last release
8 years ago

tforms

npm version

React Form Layout inspired by gridforms. This implementation uses flexbox.

Live Demo

Install

npm install tforms

Usage

import React from 'react'

import { Fieldset, Row, Field } from 'tforms'

const UserForm = () => (
  <form className="tforms">
    <Fieldset legend="User Login">
      <Row>
        <Field>
          <div>
            <label htmlFor="username">Username</label>
            <input type="text" className="form-control" />
          </div>
        </Field>
      </Row>
      <Row>
        <Field span="3">
          <div>
            <label htmlFor="username">One third</label>
            <input type="text" className="form-control" />
          </div>
        </Field>
        <Field>
          <div>
            <label htmlFor="username">One fourth</label>
            <input type="text" className="form-control" />
          </div>
        </Field>
      </Row>
      <button type="submit">Button</button>
    </Fieldset>
  </form>
)

export default UserForm

The tforms class name is important.

You need to manually include the stylesheet for this component (uses bootstrap-sass as base).

// somewhere in your scss file
...
@import "node_modules/tforms/lib/style";
1.0.8

8 years ago

1.0.7

8 years ago

1.0.6

8 years ago

1.0.5

8 years ago

1.0.4

8 years ago

1.0.3

8 years ago

1.0.2

8 years ago

1.0.1

8 years ago

1.0.0

8 years ago