React component to manage form layouts.
yarn add react-spaceformTop 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>There are 4 base components
import { Form, FormRow, FormLabel, FormControl } from "react-spaceform";| 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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent