Reactstrap — Form Validation and Customizations

Reactstrap is a version Bootstrap made for React.

It’s a set of React components that have Boostrap styles.

In this article, we’ll look at how to add form validation and customizations with Reactstrap.

Form Validation

Reactstrap comes with styles for form validation.

We can apply them with the valid and invalid props.

For example, we can add form fields with those styles by writing:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
  Form,
  FormGroup,
  Label,
  Input,
  FormFeedback,
  FormText
} from "reactstrap";

export default function App() {
  return (
    <div>
      <Form>
        <FormGroup>
          <Label for="exampleEmail">Input without validation</Label>
          <Input />
          <FormFeedback>can't see this</FormFeedback>
          <FormText>some text.</FormText>
        </FormGroup>
        <FormGroup>
          <Label>Valid input</Label>
          <Input valid />
          <FormFeedback valid>looks good</FormFeedback>
          <FormText>some text.</FormText>
        </FormGroup>
        <FormGroup>
          <Label>Invalid input</Label>
          <Input invalid />
          <FormFeedback>invalid input</FormFeedback>
          <FormText>some text.</FormText>
        </FormGroup>
        <FormGroup>
          <Label>Input without validation</Label>
          <Input />
          <FormFeedback tooltip>looks good</FormFeedback>
          <FormText>some text.</FormText>
        </FormGroup>
        <FormGroup>
          <Label>Valid input</Label>
          <Input valid />
          <FormFeedback valid tooltip>
            looks good
          </FormFeedback>
          <FormText>some text.</FormText>
        </FormGroup>
        <FormGroup>
          <Label>Invalid input</Label>
          <Input invalid />
          <FormFeedback tooltip>invalid input</FormFeedback>
          <FormText>some text.</FormText>
        </FormGroup>
      </Form>
    </div>
  );
}

We have various things in this form.

The valid or invalid props are added to Input s to style them according to their validity.

We put the validation feedback in the FormFeedback component.

valid and invalid can also be added to FormFeedback to style them.

tooltip makes the form feedback a tooltip.

Valid inputs will be green.

Invalid inputs will be red.

There’s also an icon on the right side of the input.

Inline Checkboxes

We can add inline checkboxes with the check and inline props.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Form, FormGroup, Label, Input } from "reactstrap";

export default function App() {
  return (
    <div>
      <Form>
        <FormGroup check inline>
          <Label check>
            <Input type="checkbox" /> apple
          </Label>
        </FormGroup>
        <FormGroup check inline>
          <Label check>
            <Input type="checkbox" /> orange
          </Label>
        </FormGroup>
      </Form>
    </div>
  );
}

We add both props to the FormGroup to make it inline.

Also, we added the check prop to the Label to make it show the checkbox with Bootstrap styles.

Input Sizing

The sizing of inputs can be changed with the bsSize prop.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Form, Input } from "reactstrap";

export default function App() {
  return (
    <div>
      <Form>
        <Input placeholder="lg" bsSize="lg" />
        <Input placeholder="default" />
        <Input placeholder="sm" bsSize="sm" />
        <Input type="select" bsSize="lg">
          <option>Large</option>
        </Input>
        <Input type="select">
          <option>Default</option>
        </Input>
        <Input type="select" bsSize="sm">
          <option>Small</option>
        </Input>
      </Form>
    </div>
  );
}

We can set the value to lg or sm to set the size to large or small respectively.

Input Grid Sizing

We can change the input grid size with the size prop.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Col, Form, FormGroup, Label, Input } from "reactstrap";

export default function App() {
  return (
    <div>
      <Form>
        <FormGroup row>
          <Label for="email" sm={2} size="lg">
            Email
          </Label>
          <Col sm={10}>
            <Input
              type="email"
              name="email"
              id="email"
              placeholder="lg"
              bsSize="lg"
            />
          </Col>
        </FormGroup>
        <FormGroup row>
          <Label for="email2" sm={2}>
            Email
          </Label>
          <Col sm={10}>
            <Input
              type="email"
              name="email"
              id="email2"
              placeholder="default"
            />
          </Col>
        </FormGroup>
      </Form>
    </div>
  );
}

We have the FormGroup component with the row prop to make them display as rows.

And we have the size prop on the label and bsSize on the input to change the size of them.

Hidden Labels

We can add hidden labels to our form with the hidden prop.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Button, Form, FormGroup, Label, Input } from "reactstrap";

export default function App() {
  return (
    <div>
      <Form inline>
        <FormGroup>
          <Label for="email" hidden>
            Email
          </Label>
          <Input type="email" name="email" id="email" placeholder="Email" />
        </FormGroup>
        <FormGroup>
          <Label for="password" hidden>
            Password
          </Label>
          <Input
            type="password"
            name="password"
            id="password"
            placeholder="Password"
          />
        </FormGroup>
        <Button>Submit</Button>
      </Form>
    </div>
  );
}

to add the hidden props to the labels.

Now we won’t see them.

Conclusion

We can add styles form validation.

Also, hidden labels can be added and sizes can be changed with props.