How To Build Forms In React With Reactstrap?

August 09, 2023

React is a JavaScript library for building web app user interfaces, while Reactstrap powers React with the functionalities of Bootstrap components. In tandem, the two help create dynamic and interactive forms in React to better the user experience and make the users engage with the content.

Table of Contents

In this article, we’ll present a simple step-by-step method to build forms in React using Reactstrap, validate them, and handle their submission.

Step # 1 Setting Up Reactstrap

The first step for building Reactstrap forms is configuring Reactstrap as a dependency in React. For that, you need to run the following command in your project directory:

npm install reactstrap bootstrap

Step # 2 Creating a Basic Form Structure

The next step is to import the Reactstrap components required to build an active and interactive form in React and use it to build a basic structure. Here’s how:

import React from 'react';

import { Container, Form, FormGroup, Label, Input, Button } from 'reactstrap';

function MyForm() {

  return (

    <Container>

      <Form>

        <FormGroup>

          <Label for="name">Name</Label>

          <Input type="text" id="name" />

        </FormGroup>

        {/* Add more form fields here */}

        <Button color="primary">Submit</Button>

      </Form>

    </Container>

  );

}

export default MyForm;

Step # 3 Adding More Components

Reactstrap forms can handle and accept different types of form inputs. We will discuss, with examples, the common three types; text, select, checkbox & radio inputs.

– Text Input

Adding a text input field in Reactstrap form is simple. All you need to do is type the <Input> component and set type=”text’. Here’s how:

<FormGroup>

  <Label for="email">Email</Label>

  <Input type="email" id="email" />

</FormGroup>

– Select Input

Similarly, you can use select inputs by replacing type=”text” to type=”select”. You can also further define the options by using <option> tags. Here’s how:

<FormGroup>

  <Label for="country">Country</Label>

  <Input type="select" id="country">

    <option>United States</option>

    <option>United Kingdom</option>

    <option>Canada</option>

  </Input>

</FormGroup>

– Checkbox and Radio Inputs

A type=”checkbox” or type=”radio” helps add a checkbox and radio inputs to your Reactstrap form. Here’s how:

<FormGroup check>

  <Label check>

    <Input type="checkbox" />{' '}

    Check me out

  </Label>

</FormGroup>

<FormGroup check>

  <Label check>

    <Input type="radio" name="radio1" />{' '}

    Option 1

  </Label>

</FormGroup>

Step # 4 Form Validation

Luckily, Reactstrap provides developers with built-in support when it comes to form validation. How to use the feature?

Simply add validation rules to your form by defining the ‘valid’ and ‘invalid’ properties. Here’s how:

<FormGroup>

  <Label for="password">Password</Label>

  <Input type="password" id="password" valid />

</FormGroup>

<FormGroup>

  <Label for="confirmPassword">Confirm Password</Label>

  <Input type="password" id="confirmPassword" invalid />

  <FormFeedback>Passwords do not match</FormFeedback>

</FormGroup>

Step # 5 Form Submission

Lastly, it’s about time to learn how to handle form submissions. For this, you need to add an ‘onSubmit’ event handler to the Reactstrap <Form>.

function MyForm() {

  const handleSubmit = (event) => {

    event.preventDefault();

    // Form submission logic goes here

  };

  return (

    <Container>

      <Form onSubmit={handleSubmit}>

        {/* Form fields */}

        <Button color="primary" type="submit">Submit</Button>

      </Form>

    </Container>

  );

}

How to Customize Reactstrap Form Layout?

In addition to the basic steps above, you can also customize forms in React using Reactstrap customization techniques. Let’s explore some common ones to see how to layout and style forms better

– Customizing Grid Systems

As Reactstrap uses Bootstrap’s grid system, you get the liberty to structure your layout. How? By merging <Col> and <Row> components. Here’s how:

<Container>

  <Form>

    <Row>

      <Col md="6">

        <FormGroup>

          <Label for="firstName">First Name</Label>

          <Input type="text" id="firstName" />

        </FormGroup>

      </Col>

      <Col md="6">

        <FormGroup>

          <Label for="lastName">Last Name</Label>

          <Input type="text" id="lastName" />

        </FormGroup>

      </Col>

    </Row>

    {/* Add more form fields here */}

    <Button color="primary">Submit</Button>

  </Form>

</Container>

– Using Inline Forms

You can also add an <inline> attribute to the Reactstrap form to create inline forms in Reactstrap. Here’s how:

<Form inline>

  <FormGroup>

    <Label for="email">Email</Label>

    <Input type="email" id="email" />

  </FormGroup>

  <FormGroup>

    <Label for="password">Password</Label>

    <Input type="password" id="password" />

  </FormGroup>

  <Button color="primary">Submit</Button>

</Form>

– Custom Styling

Undoubtedly, a major reason why Reactstrap forms are a hit is that you can also custom style them using CS5 classes. Here’s how:

<FormGroup className="my-custom-form-group">

  <Label for="customInput">Custom Input</Label>

  <Input type="text" id="customInput" className="my-custom-input" />

</FormGroup>

Conclusion

Using Reactstrap forms in React opens up a world of possibilities and helps you create interactive user interfaces. The pre-built Reactstrap components work like magic and help simplify the process and ensure better integration.

Not to forget, the integration of React and Bootstrap gets you access to almost every styling option or UI element you need to build good forms. So, now you know how to build interactive forms in React with Reactstrap. Go build forms to elevate the user experience and make your app a hit.

Also Read: What Is React Memo? How To Use React Memo?