Styling

To style this form you have three different options, all requires to pass a React component to a form prop.

CSS-in-JS

In this section we will use a library that uses styled-components to style our form

First you have to import the this library and the Form Components you want to use for your styling. In this example we will use styled-bootstrap-components.

import {
 Form, 
 Field, 
 Button, 
 Select, 
 RadioGroup,
} from 'react-form-package';
import {
  FormGroup,
  FormControl,
  FormCheck,
  FormCheckInput,
  Column,
  Button as Btn,
} from 'styled-bootstrap-components';

The next step is to create you form and pass the styled components as props to the <Form /> component.

<Form
  validate
  input={<FormControl />}
  select={<FormControl select />}
  button={<Btn primary mt="3px" mb="3px" />}
  checkbox={<FormCheckInput />}
  radio={<FormCheckInput />}
  error={<div style={{ color: 'red' }} />}
>
  <FormGroup row nomb>
    <Column sm={6}>
      <FormGroup>
        <label>Email</label>

        <Field id="email" type="email" placeholder="Email" />
      </FormGroup>
    </Column>

    <Column sm={6}>
      <FormGroup>
        <label>Password</label>

        <Field id="password" type="password" placeholder="Password" />
      </FormGroup>
    </Column>
  </FormGroup>

  <FormGroup row nomb>
    <Column sm={12}>
      <FormGroup>
        <label>Address</label>

        <Field id="address" type="text" placeholder="1234 Main St" />
      </FormGroup>
    </Column>
  </FormGroup>

  <FormGroup row>
    <Column sm={12}>
      <FormGroup>
        <label>Address 2</label>

        <Field
          id="address2"
          type="text"
          placeholder="Apartment, Studio, or floor"
        />
      </FormGroup>
    </Column>
  </FormGroup>

  <FormGroup row nomb>
    <Column sm={6}>
      <FormGroup>
        <label>City</label>

        <Field id="city" type="text" />
      </FormGroup>
    </Column>

    <Column sm={4}>
      <FormGroup>
        <label>State</label>

        <Select id="state" type="select">
          <option disabled value="">
            --- Choose a state ---
          </option>
          <option value="austria">Austria</option>
          <option value="germany">Germany</option>
          <option value="swiss">Swiss</option>
        </Select>
      </FormGroup>
    </Column>

    <Column sm={2}>
      <FormGroup>
        <label>Zip</label>

        <Field id="zip" type="text" />
      </FormGroup>
    </Column>
  </FormGroup>

  <FormGroup row>
    <Column sm={12}>
      <FormCheck ml="20px">
        <Field id="checkbox" type="checkbox" />

        <label>Accept Terms and Conditions</label>
      </FormCheck>
    </Column>
  </FormGroup>

  <FormGroup row>
    <Column sm={12}>
      <label>Choose an option</label>

      <RadioGroup type="radio" id="radio" required>
        <FormCheck>
          <FormCheckInput type="radio" name="radio" id="test" />

          <label>Option 1</label>
        </FormCheck>

        <FormCheck>
          <FormCheckInput type="radio" name="radio" id="test2" />

          <label>Option 2</label>
        </FormCheck>
      </RadioGroup>
    </Column>
  </FormGroup>

  <FormGroup row nomb>
    <Column sm={12}>
      <Button
        id="submit"
        type="submit"
        onClick={state => {
          alert(JSON.stringify(state, null, 2))
          alert('open the console to see the whole state...')
          console.log(state)
        }}
        primary
      >
        Submit
      </Button>
    </Column>
  </FormGroup>
</Form><Form
  validate
  input={<FormControl />}
  select={<FormControl select />}
  button={<Btn primary mt="3px" mb="3px" />}
  checkbox={<FormCheckInput />}
  radio={<FormCheckInput />}
  error={<div style={{ color: 'red' }} />}
>
  <FormGroup row nomb>
    <Column sm={6}>
      <FormGroup>
        <label>Email</label>
        <Field id="email" type="email" placeholder="Email" />
      </FormGroup>
    </Column>
    <Column sm={6}>
      <FormGroup>
        <label>Password</label>
        <Field id="password" type="password" placeholder="Password" />
      </FormGroup>
    </Column>
  </FormGroup>
  <FormGroup row nomb>
    <Column sm={12}>
      <FormGroup>
        <label>Address</label>
        <Field id="address" type="text" placeholder="1234 Main St" />
      </FormGroup>
    </Column>
  </FormGroup>
  <FormGroup row>
    <Column sm={12}>
      <FormGroup>
        <label>Address 2</label>
        <Field
          id="address2"
          type="text"
          placeholder="Apartment, Studio, or floor"
        />
      </FormGroup>
    </Column>
  </FormGroup>
  <FormGroup row nomb>
    <Column sm={6}>
      <FormGroup>
        <label>City</label>
        <Field id="city" type="text" />
      </FormGroup>
    </Column>
    <Column sm={4}>
      <FormGroup>
        <label>State</label>
        <Select id="state" type="select">
          <option disabled value="">
            --- Choose a state ---
          </option>
          <option value="austria">Austria</option>
          <option value="germany">Germany</option>
          <option value="swiss">Swiss</option>
        </Select>
      </FormGroup>
    </Column>
    <Column sm={2}>
      <FormGroup>
        <label>Zip</label>
        <Field id="zip" type="text" />
      </FormGroup>
    </Column>
  </FormGroup>
  <FormGroup row>
    <Column sm={12}>
      <FormCheck ml="20px">
        <Field id="checkbox" type="checkbox" />
        <label>Accept Terms and Conditions</label>
      </FormCheck>
    </Column>
  </FormGroup>
  <FormGroup row>
    <Column sm={12}>
      <label>Choose an option</label>
      <RadioGroup type="radio" id="radio" required>
        <FormCheck>
          <FormCheckInput type="radio" name="radio" id="test" />
          <label>Option 1</label>
        </FormCheck>
        <FormCheck>
          <FormCheckInput type="radio" name="radio" id="test2" />
          <label>Option 2</label>
        </FormCheck>
      </RadioGroup>
    </Column>
  </FormGroup>
  <FormGroup row nomb>
    <Column sm={12}>
      <Button
        id="submit"
        type="submit"
        onClick={state => {
          alert(JSON.stringify(state, null, 2))
          alert('open the console to see the whole state...')
          console.log(state)
        }}
        primary
      >
        Submit
      </Button>
    </Column>
  </FormGroup>
</Form>

style prop

In this section we will use a the style prop to style our form

To style your form pass components to the <Form /> component that are styled with the style tag. When you create your own <input />, <button /> components do not forget do bind functions like onClick, onChange, onFocus, onBlur. This functions are needed to make react-form-package work properly.

const MyButton = (props) => (
  <button
    type="submit"
    style={{
      margin: '10px 0px',
      padding: '8px 24px',
      borderRadius: '5px',
      border: 'none',
      background: '#7FDBFF',
      color: '#001f3f',
      cursor: 'pointer',
    }}
    onClick={props.onClick}
  >
    {props.children}
  </button>
);
const MyInput = (props) => (
  <input
    style={{
      margin: '10px 0px',
      padding: '8px 3px',
      border: '1px solid #7FDBFF',
      borderRadius: '5px',
      color: 'black',
    }}
    value={props.value}
    placeholder={props.placeholder}
    onChange={props.onChange}
    onBlur={props.onBlur}
    onFocus={props.onFocus}
  />
);

The next step is to create you form and pass the styled components as props to the <Form /> component.

<Form button={<MyButton />} input={<MyInput />}>
  <div>Email</div>
  <Field type="email" id="email2" placeholder="Email" />
  <Button
    type="submit"
    id="submit2"
    onClick={state => {
      alert(JSON.stringify(state, null, 2))
      alert('open the console to see the whole state...')
      console.log(state)
    }}
  >
    Submit
  </Button>
</Form><Form button={<MyButton />} input={<MyInput />}>
  <div>Email</div>
  <Field type="email" id="email2" placeholder="Email" />
  <Button
    type="submit"
    id="submit2"
    onClick={state => {
      alert(JSON.stringify(state, null, 2))
      alert('open the console to see the whole state...')
      console.log(state)
    }}
  >
    Submit
  </Button>
</Form>

CSS and className

In this section we will use a the className prop and a css file to style our form

To style your form pass components to the <Form /> component that have className prop and use css files (make sure to have an appropriate loader for your bundler).

.button {
  background: #001f3f;
  border: 1px solid black;
  padding: 8px 24px;
  border-radius: 3px;
  color: white;
  cursor: pointer;
}
.input {
  margin: 10px 0px;
  padding: 8px 3px;
  border: 1px solid #001f3f;
  border-radius: 5px;
}

Import your CSS file to your application and make sure you have a proper loader for your stylesheet.

import './style.css';
const MyClassNameButton = (props) => (
  <button
    clssName="button"
  >
    {children}
  </button>
);
const MyClassNameInput = (props) => (
  <input
    className="input"
    value={props.value}
    placeholder={props.placeholder}
    onChange={props.onChange}
    onBlur={props.onBlur}
    onFocus={props.onFocus}
  />
);

The next step is to create you form and pass the styled components as props to the <Form /> component.

<Form button={<MyClassNameButton />} input={<MyClassNameInput />}>
  <div>Email</div>
  <Field type="email" id="email3" placeholder="Email" />
  <Button
    type="submit"
    id="submit2"
    onClick={state => {
      alert(JSON.stringify(state, null, 2))
      alert('open the console to see the whole state...')
      console.log(state)
    }}
  >
    Submit
  </Button>
</Form><Form button={<MyClassNameButton />} input={<MyClassNameInput />}>
  <div>Email</div>
  <Field type="email" id="email3" placeholder="Email" />
  <Button
    type="submit"
    id="submit2"
    onClick={state => {
      alert(JSON.stringify(state, null, 2))
      alert('open the console to see the whole state...')
      console.log(state)
    }}
  >
    Submit
  </Button>
</Form>

Passing props

To make your own components work with react-form-package you have to pass some props.

components

The Prop is the prop on the <Form /> component.
HTML is the actual HTML element to use.
Props are the props you have to pass these components e.g. id={prop.id} or id={this.prop.id} or onChange={prop.onChange} or onChange={this.prop.onChange}.
Info shows you which props you have to bind.

Prop	HTML	Props	Info
input	input	`id`, `type`, `onChange`, `onBlur`, `onFocus`
checkbox	input	`id`,`type`, `onChange`, `onBlur`, `onFocus`
radio	div	`id`,`type`, `onChange`, `onBlur`, `onFocus`, `children`	this is a wrapper that renders every child, and watch out for `<input type="radio" value="someValue" name="theIdRadioGroup" />` and handles their state
button	input	`id`, `type`, `onClick`, `children`
select	select	`id`, `type`, `onChange`, `onBlur`, `onFocus`, `children`	this is a wrapper that renders every child, and watch out for `<option value="someValue" />` and handles their state
textarea	textarea	`id`, `type`, `onChange`, `onBlur`, `onFocus`

A textarea example:

const myTextarea = (props) => (
  <textarea
    id={props.id}
    type={props.type}
    onChange={props.onChange}
    onBlur={props.onBlur}
    onFocus={props.onFocus}
  />
);

Styling

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}CSS-in-JS

style prop

CSS and className

Passing props

components

CSS-in-JS