Category: Reactstrap

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 list group content with Reactstrap.

Custom Content

We can add custom content to our list group items.

For instance, we can write:

import React from "react";
import {
  ListGroup,
  ListGroupItem,
  ListGroupItemHeading,
  ListGroupItemText
} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <ListGroup>
        <ListGroupItem active>
          <ListGroupItemHeading>List group item heading</ListGroupItemHeading>
          <ListGroupItemText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </ListGroupItemText>
        </ListGroupItem>
        <ListGroupItem>
          <ListGroupItemHeading>List group item heading</ListGroupItemHeading>
          <ListGroupItemText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </ListGroupItemText>
        </ListGroupItem>
        <ListGroupItem>
          <ListGroupItemHeading>List group item heading</ListGroupItemHeading>
          <ListGroupItemText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </ListGroupItemText>
        </ListGroupItem>
      </ListGroup>
    </div>
  );
}

We use the ListGroupItemHeading and ListGroupItemText to add our content and main text for list group items respectively.

Flush

To remove the border of the list group, we can add the flush prop to the list group.

For example, we can write:

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

export default function App() {
  return (
    <div className="App">
      <ListGroup flush>
        <ListGroupItem disabled tag="a" href="#">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </ListGroupItem>
        <ListGroupItem tag="a" href="#">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </ListGroupItem>
        <ListGroupItem tag="a" href="#">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </ListGroupItem>
        <ListGroupItem tag="a" href="#">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </ListGroupItem>
        <ListGroupItem tag="a" href="#">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </ListGroupItem>
      </ListGroup>
    </div>
  );
}

We have the flush prop of the ListGroup to remove the border.

Horizontal List Groups

We can make the items laid out horizontally instead of vertically.

We just have to add a horizontal prop to do this.

Also, we can set the breakpoint as the value to only turn horizontal given a breakpoint.

For example, we can write:

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

export default function App() {
  return (
    <div className="App">
      <ListGroup horizontal>
        <ListGroupItem disabled tag="a" href="#">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </ListGroupItem>
        <ListGroupItem tag="a" href="#">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </ListGroupItem>
        <ListGroupItem tag="a" href="#">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </ListGroupItem>
        <ListGroupItem tag="a" href="#">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </ListGroupItem>
        <ListGroupItem tag="a" href="#">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </ListGroupItem>
      </ListGroup>
    </div>
  );
}

to make it always horizontal.

And we can write:

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

export default function App() {
  return (
    <div className="App">
      <ListGroup horizontal="lg">
        <ListGroupItem disabled tag="a" href="#">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </ListGroupItem>
        <ListGroupItem tag="a" href="#">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </ListGroupItem>
        <ListGroupItem tag="a" href="#">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </ListGroupItem>
        <ListGroupItem tag="a" href="#">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </ListGroupItem>
        <ListGroupItem tag="a" href="#">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </ListGroupItem>
      </ListGroup>
    </div>
  );
}

to make it horizontal only when the screen hits the lg breakpoint or wider.

Conclusion

We can add custom content and change the layout of list groups.

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 layouts with Reactstrap.

Container

Containers are used to hold content for layouts.

We can add them by writing:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Container } from "reactstrap";

export default function App() {
  return (
    <div>
      <Container>.container</Container>
      <Container fluid="sm">.container-sm</Container>
      <Container fluid="md">.container-md</Container>
      <Container fluid="lg">.container-lg</Container>
      <Container fluid="xl">.container-xl</Container>
      <Container fluid={true}>.container-fluid</Container>
    </div>
  );
}

We add the Container components and we can make them fluid when certain breakpoints are hit with the fluid prop.

If we specify the breakpoint, then it’ll be fluid if the screen is at the breakpoint or narrower.

If it’s true , then it’s always fluid.

Row Columns

We can add rows and columns inside containers to layout content.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Container, Row, Col } from "reactstrap";

export default function App() {
  return (
    <div>
      <Container>
        <Row xs="2">
          <Col>Column</Col>
          <Col>Column</Col>
          <Col>Column</Col>
          <Col>Column</Col>
        </Row>
        <Row xs="3">
          <Col>Column</Col>
          <Col>Column</Col>
          <Col>Column</Col>
          <Col>Column</Col>
        </Row>
      </Container>
    </div>
  );
}

We specify how many columns can be one row given the breakpoint or higher with the breakpoint prop.

So xs='2' means that we have 2 columns if the screen hits the xs breakpoint or wider.

We can also specify multiple breakpoint props:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Container, Row, Col } from "reactstrap";

export default function App() {
  return (
    <div>
      <Container>
        <Row xs="1" sm="2" md="4">
          <Col>Column</Col>
          <Col>Column</Col>
          <Col>Column</Col>
          <Col>Column</Col>
        </Row>
      </Container>
    </div>
  );
}

xs='1' means that we have 1 column per row if the breakpoint is xs or narrower.

sm='2' means that we have 2 columns per row if the breakpoint is sm or narrower.

md='4' means we have 4 columns per row if the breakpoint is md or narrow.

The props with the narrower breakpoints override the wider ones.

List Group

List groups let us add lists of items.

For example, we can use the ListGroup and ListGroupItem components as follows:

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

export default function App() {
  return (
    <div>
      <ListGroup>
        <ListGroupItem>Lorem ipsum dolor sit amet</ListGroupItem>
        <ListGroupItem>consectetur adipiscing elit</ListGroupItem>
        <ListGroupItem>Nunc non egestas velit</ListGroupItem>
        <ListGroupItem>sed pretium sapien</ListGroupItem>
        <ListGroupItem>Vestibulum at eros</ListGroupItem>
      </ListGroup>
    </div>
  );
}

Tags

We can add badges to display tags.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { ListGroup, ListGroupItem, Badge } from "reactstrap";

export default function App() {
  return (
    <div>
      <ListGroup>
        <ListGroupItem>
          Lorem ipsum dolor sit amet <Badge pill>11</Badge>
        </ListGroupItem>
        <ListGroupItem>
          consectetur adipiscing elit <Badge pill>12</Badge>
        </ListGroupItem>
        <ListGroupItem>
          Nunc non egestas velit <Badge pill>13</Badge>
        </ListGroupItem>
        <ListGroupItem>
          sed pretium sapien <Badge pill>14</Badge>
        </ListGroupItem>
        <ListGroupItem>
          Vestibulum at eros <Badge pill>15</Badge>
        </ListGroupItem>
      </ListGroup>
    </div>
  );
}

We use the Badge component to add tags to display them beside the text.

Disabled Items

We can make items disabled by writing:

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

export default function App() {
  return (
    <div>
      <ListGroup>
        <ListGroupItem disabled tag="a" href="#" `action`>
          Lorem ipsum dolor sit amet
        </ListGroupItem>
        <ListGroupItem tag="a" href="#" `action`>
          consectetur adipiscing elit
        </ListGroupItem>
        <ListGroupItem tag="a" href="#" `action`>
          Nunc non egestas velit
        </ListGroupItem>
        <ListGroupItem tag="a" href="#" `action`>
          sed pretium sapien
        </ListGroupItem>
        <ListGroupItem tag="a" href="#" `action`>
          Vestibulum at eros
        </ListGroupItem>
      </ListGroup>
    </div>
  );
}

The tag prop lets us render the list group item as an anchor element.

href is the same one for an anchor element.

The disabled prop lets us disable clicking on it.

The action prop make the buttons fit the list.

Anchors and Buttons

List group items can be rendered as buttons also.

For example, we can write:

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

export default function App() {
  return (
    <div>
      <ListGroup>
        <ListGroupItem disabled tag="button">
          Lorem ipsum dolor sit amet
        </ListGroupItem>
        <ListGroupItem tag="button">consectetur adipiscing elit</ListGroupItem>
        <ListGroupItem tag="button">Nunc non egestas velit</ListGroupItem>
        <ListGroupItem tag="button">sed pretium sapien</ListGroupItem>
        <ListGroupItem tag="button">Vestibulum at eros</ListGroupItem>
      </ListGroup>
    </div>
  );
}

to set the tag prop as button and render them as buttons.

Conclusion

Containers let us add layouts to our pages.

List groups let us display items in lists.

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 input groups, jumbotrons, and layouts with Reactstrap.

Buttons and Dropdowns

We can add buttons and dropdowns as input group addons.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButtonDropdown,
  Input,
  Button,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "reactstrap";

export default function App() {
  const [dropdownOpen, setDropdownOpen] = React.useState(false);
  const [splitButtonOpen, setSplitButtonOpen] = React.useState(false);

  const toggleDropDown = () => setDropdownOpen(!dropdownOpen);

  const toggleSplit = () => setSplitButtonOpen(!splitButtonOpen);

  return (
    <div>
      <InputGroup>
        <InputGroupAddon addonType="prepend">
          <Button>button</Button>
        </InputGroupAddon>
        <Input />
      </InputGroup>
      <br />
      <InputGroup>
        <Input />
        <InputGroupButtonDropdown
          addonType="append"
          isOpen={dropdownOpen}
          toggle={toggleDropDown}
        >
          <DropdownToggle caret>Button Dropdown</DropdownToggle>
          <DropdownMenu>
            <DropdownItem header>Header</DropdownItem>
            <DropdownItem disabled>Action</DropdownItem>
            <DropdownItem>Action</DropdownItem>
            <DropdownItem divider />
            <DropdownItem>Action</DropdownItem>
          </DropdownMenu>
        </InputGroupButtonDropdown>
      </InputGroup>
      <br />
      <InputGroup>
        <InputGroupButtonDropdown
          addonType="prepend"
          isOpen={splitButtonOpen}
          toggle={toggleSplit}
        >
          <Button outline>Button</Button>
          <DropdownToggle split outline />
          <DropdownMenu>
            <DropdownItem header>Header</DropdownItem>
            <DropdownItem disabled>Action</DropdownItem>
            <DropdownItem>Action</DropdownItem>
            <DropdownItem divider />
            <DropdownItem>Action</DropdownItem>
          </DropdownMenu>
        </InputGroupButtonDropdown>
        <Input placeholder="name" />
        <InputGroupAddon addonType="append">
          <Button color="secondary">button</Button>
        </InputGroupAddon>
      </InputGroup>
    </div>
  );
}

We have the InputGroup with the InputGroupAddon component.

We have one with Button s inside and we can also add InputGroupButtonDropdown to add the button dropdown.

DropdownToggle has the dropdown toggle.

We can optionally make a split button with a Button and a DropdownToggle with the split prop.

The style cal be outlined with the outlined prop.

Jumbotron

We can add a jumbotron to display content in a way that gets people’s attention.

It gets attention by being bigger than other content.

To add a jumbotron, we use the Jumbotron component.

For example, we can write:

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

export default function App() {
  return (
    <div>
      <Jumbotron>
        <h1 className="display-3">Hello, world!</h1>
        <p className="lead">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut
          lectus tellus. Vestibulum vulputate id ex nec tincidunt. Pellentesque
          eu nunc finibus, bibendum magna sit amet, vulputate nunc.
        </p>
        <hr className="my-2" />
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut
          lectus tellus. Vestibulum vulputate id ex nec tincidunt. Pellentesque
          eu nunc finibus, bibendum magna sit amet, vulputate nunc.
        </p>
        <p className="lead">
          <Button color="primary">Learn More</Button>
        </p>
      </Jumbotron>
    </div>
  );
}

We add the Jumbotron component with content inside.

We add class names to add margins.

Fluid Jumbotron

We can make the jumbotron fluid with the fluid prop.

For example, we can write:

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

export default function App() {
  return (
    <div>
      <Jumbotron fluid>
        <Container fluid>
          <h1 className="display-3">Fluid jumbotron</h1>
          <p className="lead">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut
            lectus tellus. Vestibulum vulputate id ex nec tincidunt.
            Pellentesque eu nunc finibus, bibendum magna sit amet, vulputate
            nunc.
          </p>
        </Container>
      </Jumbotron>
    </div>
  );
}

We have the Jumbotron and the Container set to fluid so that we can display the jumbotron responsively.

Layout Components

We can add layouts to our app with the Row and Col components.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Container, Row, Col } from "reactstrap";

export default function App() {
  return (
    <div>
      <Container>
        <Row>
          <Col>.col</Col>
        </Row>
        <Row>
          <Col>.col</Col>
          <Col>.col</Col>
          <Col>.col</Col>
        </Row>
        <Row>
          <Col xs="3">.col-3</Col>
          <Col xs="auto">.col-auto - variable width content</Col>
          <Col xs="3">.col-3</Col>
        </Row>
        <Row>
          <Col sm={{ size: "auto", offset: 1 }}>.col-sm-auto .offset-sm-1</Col>
          <Col sm={{ size: "auto", offset: 1 }}>.col-sm-auto .offset-sm-1</Col>
        </Row>
      </Container>
    </div>
  );
}

We have the Row and Col components to create the grid.

Col can be sized with breakpoint props like xs to make it display the size we want given that the screen hits the given breakpoint or wider.

The prop takes a string or an object.

If it’s an object, the column size would be in the size property.

offset has the offset by the given distance.

Conclusion

We can add button groups and dropdowns to input groups.

Also, we can layout items with rows, columns, and jumbotrons.

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 for="exampleCheckbox">Inline</Label>
          <div>
            <CustomInput
              type="checkbox"
              label="An inline custom input"
              inline
            />
            <CustomInput type="checkbox" label="and another one" inline />
          </div>
        </FormGroup>
        <FormGroup>
          <Label for="select">Custom Select</Label>
          <CustomInput type="select" id="select" name="customSelect">
            <option value="">Select</option>
            <option>Value 1</option>
            <option>Value 2</option>
            <option>Value 3</option>
          </CustomInput>
        </FormGroup>
        <FormGroup>
          <Label for="multiselect">Custom Multiple Select</Label>
          <CustomInput
            type="select"
            id="multiselect"
            name="customSelect"
            multiple
          >
            <option value="">Select</option>
            <option>Value 1</option>
            <option>Value 2</option>
            <option>Value 3</option>
          </CustomInput>
        </FormGroup>
        <FormGroup>
          <Label for="custom-select">Custom Select Disabled</Label>
          <CustomInput
            type="select"
            id="custom-select"
            name="custom-select"
            disabled
          >
            <option value="">Select</option>
            <option>Value 1</option>
            <option>Value 2</option>
            <option>Value 3</option>
          </CustomInput>
        </FormGroup>
        <FormGroup>
          <Label for="multiple-select">Custom Multiple Select Disabled</Label>
          <CustomInput
            type="select"
            id="multiple-select"
            name="customSelect"
            multiple
            disabled
          >
            <option value="">Select</option>
            <option>Value 1</option>
            <option>Value 2</option>
            <option>Value 3</option>
          </CustomInput>
        </FormGroup>
        <FormGroup>
          <Label for="range">Custom Range</Label>
          <CustomInput type="range" id="range" name="range" />
        </FormGroup>
        <FormGroup>
          <Label for="file">File Browser</Label>
          <CustomInput type="file" id="file" name="file" />
        </FormGroup>
        <FormGroup>
          <Label for="file-2">File Browser with Custom Label</Label>
          <CustomInput
            type="file"
            id="file-2"
            name="customFile"
            label="pick a file"
          />
        </FormGroup>
        <FormGroup>
          <Label for="file-3">File Browser Disabled</Label>
          <CustomInput type="file" id="file-3" name="file-3" disabled />
        </FormGroup>
      </Form>
    </div>
  );
}

We use the CustomInput component with various props.

type has the type of input to render.

It also takes options as children if the type is select .

We can make inputs inline with the inline prop.

If the type is set to switch , them we get a switch.

Input Group

Input groups are containers for inputs.

We can put content other than inputs inside input groups in addition to inputs itself.

For example, we can write:

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

export default function App() {
  return (
    <div>
      <InputGroup>
        <InputGroupAddon addonType="prepend">
          <InputGroupText>@</InputGroupText>
        </InputGroupAddon>
        <Input placeholder="username" />
      </InputGroup>
      <br />
      <InputGroup>
        <InputGroupAddon addonType="prepend">
          <InputGroupText>
            <Input addon type="checkbox" />
          </InputGroupText>
        </InputGroupAddon>
        <Input placeholder="I agree" />
      </InputGroup>
      <br />
      <InputGroup>
        <Input placeholder="username" />
        <InputGroupAddon addonType="append">
          <InputGroupText>[@example](http://twitter.com/example "Twitter profile for @example").com</InputGroupText>
        </InputGroupAddon>
      </InputGroup>
      <br />
      <InputGroup>
        <InputGroupAddon addonType="prepend">
          <InputGroupText>$</InputGroupText>
          <InputGroupText>$</InputGroupText>
        </InputGroupAddon>
        <Input placeholder="amount" />
        <InputGroupAddon addonType="append">
          <InputGroupText>$</InputGroupText>
          <InputGroupText>$</InputGroupText>
        </InputGroupAddon>
      </InputGroup>
      <br />
      <InputGroup>
        <InputGroupAddon addonType="prepend">$</InputGroupAddon>
        <Input placeholder="Amount" min={0} max={100} type="number" step="1" />
        <InputGroupAddon addonType="append">.00</InputGroupAddon>
      </InputGroup>
    </div>
  );
}

We have the InputGroup component to use as the input group container.

InputGroupText has the content for the input group addon.

We can have text or other elements inside it.

InputGroupAddon has the addons on each side.

addonType specifies the side that it’ll be on.

If it’s prepend , it’ll be on the left side.

If it’s append , then it’ll be on the right side.

Addon Sizing

The size of the addon can be changed.

For example, we can write:

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

export default function App() {
  return (
    <div>
      <InputGroup size="lg">
        <InputGroupAddon addonType="prepend">lg</InputGroupAddon>
        <Input />
      </InputGroup>
      <br />
      <InputGroup>
        <InputGroupAddon addonType="prepend">normal</InputGroupAddon>
        <Input />
      </InputGroup>
      <br />
      <InputGroup size="sm">
        <InputGroupAddon addonType="prepend">sm</InputGroupAddon>
        <Input />
      </InputGroup>
    </div>
  );
}

to change their size with the size prop.

The prop is on the InputGroup component so that the sizing applies to everything inside.

Conclusion

We can add custom inputs add inputs flexibly.

Also, we can add input groups to add elements to the left or right of the input.

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.