Reactstrap — Custom Inputs and Input Groups

Photo by Anna Gru 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 custom inputs and input groups with Reactstrap.

Custom Inputs

We can add custom inputs to our app.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { CustomInput, Form, FormGroup, Label } from "reactstrap";
export default function App() {
  return (
    <div>
      <Form>
        <FormGroup>
          <Label for="exampleCheckbox">Checkboxes</Label>
          <div>
            <CustomInput
              type="checkbox"
              id="exampleCustomCheckbox"
              label="mango"
            />
            <CustomInput
              type="checkbox"
              id="exampleCustomCheckbox2"
              label="orange"
            />
            <CustomInput type="checkbox" label="pear" disabled />
            <CustomInput
              type="checkbox"
              id="checkbox"
              label="checkbox"
              htmlFor="checkbox"
              disabled
            />
          </div>
        </FormGroup>
        <FormGroup>
          <Label for="exampleCheckbox">Radios</Label>…