Reactstrap — Custom Inputs and Input Groups

John Au-Yeung
3 min readSep 27, 2020
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>
<div>
<CustomInput type="radio" name="name" label="foo" />
<CustomInput type="radio" name="customRadio" label="qux" />
<CustomInput type="radio" id="name" label="bar" disabled />
<CustomInput
type="radio"
label="baz"
htmlFor="exampleCustomRadio4_X"
disabled
/>
</div>
</FormGroup>
<FormGroup>
<Label for="exampleCheckbox">Switches</Label>
<div>
<CustomInput
type="switch"
id="switch"
name="fruit"
label="banana"
/>
<CustomInput type="switch" id="grape" name="fruit" label="grape" />
<CustomInput type="switch" id="apple" label="apple" disabled />
<CustomInput type="switch" id="orange" label="orange" disabled />
</div>
</FormGroup>
<FormGroup>
<Label…

--

--