0.2.2 • Published 6 years ago
react-spaceform v0.2.2
react-spaceform
React component to manage form layouts.
Installation
yarn add react-spaceform
Examples
Top aligned labels
<Form>
<FormRow>
<FormLabel>Login</FormLabel>
<FormControl>
<input placeholder="login" />
</FormControl>
</FormRow>
<FormRow>
<FormLabel>Password</FormLabel>
<FormControl>
<input placeholder="password" type="password" />
</FormControl>
</FormRow>
<FormRow>
<FormLabel />
<FormControl>
<input type="submit" value="Sign in" />
</FormControl>
</FormRow>
</Form>
Left aligned labels
<Form labelWidth="80px" labelAlign="left">
<FormRow>
<FormLabel>Login</FormLabel>
<FormControl>
<input placeholder="login" />
</FormControl>
</FormRow>
<FormRow>
<FormLabel>Password</FormLabel>
<FormControl>
<input placeholder="password" type="password" />
</FormControl>
</FormRow>
<FormRow>
<FormLabel />
<FormControl>
<input type="submit" value="Sign in" />
</FormControl>
</FormRow>
</Form>
Right aligned labels
<Form labelWidth="80px" labelAlign="right">
<FormRow>
<FormLabel>Login</FormLabel>
<FormControl>
<input placeholder="login" />
</FormControl>
</FormRow>
<FormRow>
<FormLabel>Password</FormLabel>
<FormControl>
<input placeholder="password" type="password" />
</FormControl>
</FormRow>
<FormRow>
<FormLabel />
<FormControl>
<input type="submit" value="Sign in" />
</FormControl>
</FormRow>
</Form>
By default spacing is equal to 4px. To change it pass prop spacing to Form
<Form labelWidth="80px" labelAlign="right" spacing={10}>
<FormRow>
<FormLabel>Login</FormLabel>
<FormControl>
<input placeholder="login" />
</FormControl>
</FormRow>
<FormRow>
<FormLabel>Password</FormLabel>
<FormControl>
<input placeholder="password" type="password" />
</FormControl>
</FormRow>
<FormRow>
<FormLabel />
<FormControl>
<input type="submit" value="Sign in" />
</FormControl>
</FormRow>
</Form>
API
There are 4 base components
import { Form, FormRow, FormLabel, FormControl } from "react-spaceform";
Form
Props
name | type | default | description |
---|---|---|---|
width | string or number | form width | |
labelWidth | string or number | labels width | |
labelAlign | top , left or right | top | label position |
spacing | number | 4 | spacing base number |
Components FormRow
, FormLabel
and FormControl
accepts any
valid react html-attributes.