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.