Reactstrap — Form Validation and Customizations

Photo by Quinten de Graaf on Unsplash

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>…