1.0.8 • Published 8 years ago
tforms v1.0.8
tforms
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";