Category: React Bootstrap

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to work with React Bootstrap’s media objects to add complex and repetitive components.

Media Objects

Media objects let us build complex and repetitive components.

It’s also based on flexbox as with the grid.

To use it we can write:

import React from "react";
import Media from "react-bootstrap/Media";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Media>
        <img
          width={64}
          height={64}
          className="mr-3"
          src="http://placekitten.com/200/200"
          alt="cat"
        />
        <Media.Body>
          <h2>Title</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
            ultrices ac dolor nec vestibulum. Maecenas vulputate diam ut sem
            tempus, id eleifend tortor hendrerit. Sed non orci massa. Aliquam
            eget lectus a ante convallis gravida. Donec fringilla odio ut magna
            gravida aliquam. Cras molestie non ante vel dictum. Cras lacinia
            molestie lacus, in lacinia sapien imperdiet in. Sed eleifend laoreet
            finibus. Integer semper dictum eros nec eleifend. Nunc quam mi,
            finibus lacinia metus vitae, dapibus ultricies diam. Vivamus ante
            nisi, pellentesque at lacus eu, vehicula pretium lorem. Nunc vitae
            ligula laoreet, accumsan diam et, auctor mauris. Fusce vitae posuere
            nibh, vitae eleifend quam. Duis a enim lacus.
          </p>
        </Media.Body>
      </Media>
    </>
  );
}

We just use the Media component as a wrapper.

Inside it, we have the img element with the width and height of the image.

src is the URL of the image.

className has the styling class we want to apply.

alt is the text description of the image.

Media.Body has the body of the content, which is displayed to the right of the image.

Inside it, we can have anything we want.

Media Nesting

Media components can be nested.

For instance, we can write:

import React from "react";
import Media from "react-bootstrap/Media";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Media>
        <img
          width={64}
          height={64}
          className="mr-3"
          src="http://placekitten.com/200/200"
          alt="cat"
        />
        <Media.Body>
          <h2>Title</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
            ultrices ac dolor nec vestibulum. Maecenas vulputate diam ut sem
            tempus, id eleifend tortor hendrerit. Sed non orci massa. Aliquam
            eget lectus a ante convallis gravida. Donec fringilla odio ut magna
            gravida aliquam. Cras molestie non ante vel dictum. Cras lacinia
            molestie lacus, in lacinia sapien imperdiet in. Sed eleifend laoreet
            finibus. Integer semper dictum eros nec eleifend. Nunc quam mi,
            finibus lacinia metus vitae, dapibus ultricies diam. Vivamus ante
            nisi, pellentesque at lacus eu, vehicula pretium lorem. Nunc vitae
            ligula laoreet, accumsan diam et, auctor mauris. Fusce vitae posuere
            nibh, vitae eleifend quam. Duis a enim lacus.
          </p>

<Media>
            <img
              width={64}
              height={64}
              className="mr-3"
              src="http://placekitten.com/100/100"
              alt="another cat"
            />
            <Media.Body>
              <h2>Another Heading</h2>
              <p>
                Integer non ante ut arcu imperdiet maximus. Pellentesque id
                metus porttitor, ornare ex et, finibus ante. Aenean mattis
                ligula lectus, a aliquet est pharetra et. Donec sit amet est
                massa. Maecenas dolor ante, congue sit amet mattis eu, vehicula
                quis nisl. Nulla viverra ligula vitae mollis sagittis. Fusce
                volutpat convallis purus. Vestibulum tincidunt elit id aliquam
                placerat. Vivamus vestibulum enim sed eros ullamcorper congue.
                Fusce nec tincidunt arcu. Sed sed suscipit justo, ac eleifend
                mauris. Morbi molestie turpis a accumsan mollis. Aenean vel diam
                vitae ante tincidunt varius.
              </p>
            </Media.Body>
          </Media>
        </Media.Body>
      </Media>
    </>
  );
}

We have another Media component nested in the Media.Body of the first Media component.

Media Alignment

The media in the Media component’s position can be changed.

For instance, we can write:

import React from "react";
import Media from "react-bootstrap/Media";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Media>
        <img
          width={64}
          height={64}
          className="align-self-end mr-3"
          src="[http://placekitten.com/200/200](http://placekitten.com/200/200)"
          alt="cat"
        />
        <Media.Body>
          <h2>Title</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
            ultrices ac dolor nec vestibulum. Maecenas vulputate diam ut sem
            tempus, id eleifend tortor hendrerit. Sed non orci massa. Aliquam
            eget lectus a ante convallis gravida. Donec fringilla odio ut magna
            gravida aliquam. Cras molestie non ante vel dictum. Cras lacinia
            molestie lacus, in lacinia sapien imperdiet in. Sed eleifend laoreet
            finibus. Integer semper dictum eros nec eleifend. Nunc quam mi,
            finibus lacinia metus vitae, dapibus ultricies diam. Vivamus ante
            nisi, pellentesque at lacus eu, vehicula pretium lorem. Nunc vitae
            ligula laoreet, accumsan diam et, auctor mauris. Fusce vitae posuere
            nibh, vitae eleifend quam. Duis a enim lacus.
          </p>
        </Media.Body>
      </Media>
    </>
  );
}

We change the className of the img element to move the image to the bottom.

Conclusion

We can create Media components to create a layout with an image on the left and text on the right.

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to work with React Bootstrap’s grid system to create layouts.

Responsive Grids with Multiple Breakpoints

We can make React Bootstrap watch for multiple breakpoints and size the columns accordingly.

For instance, we can write:

import React from "react";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Container>
        <Row>
          <Col xs={12} md={8}>
            foo
          </Col>
          <Col xs={6} md={4}>
            bar
          </Col>
        </Row>

        <Row>
          <Col xs={6} md={4}>
            foo
          </Col>
          <Col xs={6} md={4}>
            bar
          </Col>
          <Col xs={6} md={4}>
            baz
          </Col>
        </Row>

        <Row>
          <Col xs={6}>foo</Col>
          <Col xs={6}>bar</Col>
        </Row>
      </Container>
    </>
  );
}

to size the columns to different sizes.

We have the xs and md breakpoints to size them the way we like.

For example, xs={12} md={8} means the column will take up all 12 columns of the grid when the xs or extra small breakpoint is hit.

If the md or medium breakpoint is hit, then the column will be 8 columns wide.

Order and Offset

In addition to the breakpoint props, we can also pass in an object with theorder and offset properties.

order specifies the visual order from left to right.

offset is the number of columns to move a column to the right.

For instance, we can write:

import React from "react";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Container>
        <Row>
          <Col xs>1</Col>
          <Col xs={{ order: 12 }}>2</Col>
          <Col xs={{ order: 1 }}>3</Col>
        </Row>
      </Container>
    </>
  );
}

to order our columns.

The ones with the lower number is to the left and the ones with higher numbers are to the right.

So the column with the 2 is to the right of the one with the 3 since the first one has a higher order number than the other one.

We can also write first for the leftmost one and the last for the rightmost one.

For example, we can write:

import React from "react";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Container>
        <Row>
          <Col xs={{ order: "last" }}>1</Col>
          <Col xs>2</Col>
          <Col xs={{ order: "first" }}>3</Col>
        </Row>
      </Container>
    </>
  );
}

We see that 3 and 1 are flipped even though the column with 1 is defined first.

This is because of the order property.

We can also add the offset property to move a column to the right by the given number of columns.

For example, we can write:

import React from "react";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Container>
        <Row>
          <Col xs={4}>foo</Col>
          <Col xs={{ span: 4, offset: 4 }}>bar</Col>
        </Row>
        <Row>
          <Col xs={{ span: 3, offset: 3 }}>foo</Col>
          <Col xs={{ span: 3, offset: 3 }}>bar</Col>
        </Row>
        <Row>
          <Col xs={{ span: 6, offset: 3 }}>foo</Col>
        </Row>
      </Container>
    </>
  );
}

Then move the columns around according to the span and offset .

span is the number of columns that are spanned from 1 to 12.

offset is the number of columns to move to the right relative to the neighboring column.

Setting Column Widths in Row

We can set the width of all the columns inside it within the Row component.

For instance, we can write:

import React from "react";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Container>
        <Row xs={2} md={4} lg={6}>
          <Col>foo</Col>
          <Col>bar</Col>
        </Row>
        <Row xs={1} md={2}>
          <Col>foo</Col>
          <Col>bar</Col>
          <Col>baz</Col>
        </Row>
      </Container>
    </>
  );
}

And we set the sizes for all the columns in the row.

So in the first row, if the screen is extra small, then the size is 2.

If the size is medium, then the size is 4.

And if the size is large, then the size is 6.

Conclusion

We can size columns and move with various props and values.

They can be ordered and spaced out according to offsets.

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to add forms and input groups to a React app with React Bootstrap.

Form Libraries

We can use form libraries to make form validation easier for us.

React Bootstrap has integration with the Formik library to let us bind our input values to states.

It also does form validation when it’s used with Yup.

For instance, we can use it by writing:

import React from "react";
import Form from "react-bootstrap/Form";
import Col from "react-bootstrap/Col";
import Button from "react-bootstrap/Button";
import { Formik } from "formik";
import * as yup from "yup";
import "bootstrap/dist/css/bootstrap.min.css";

const schema = yup.object({
  firstName: yup.string().required(),
  lastName: yup.string().required(),
  username: yup.string().required(),
  city: yup.string().required(),
  region: yup.string().required(),
  postalcode: yup.string().required(),
  terms: yup.bool().required()
});

export default function App() {
  return (
    <Formik
      validationSchema={schema}
      onSubmit={console.log}
      initialValues={{
        firstName: "james",
        lastName: "smith"
      }}
    >
      {({
        handleSubmit,
        handleChange,
        handleBlur,
        values,
        touched,
        isValid,
        errors
      }) => (
        <Form noValidate onSubmit={handleSubmit}>
          <Form.Row>
            <Form.Group as={Col} md="6">
              <Form.Label>First name</Form.Label>
              <Form.Control
                type="text"
                name="firstName"
                value={values.firstName}
                onChange={handleChange}
                isValid={touched.firstName && !errors.firstName}
              />
              <Form.Control.Feedback>Looks good</Form.Control.Feedback>
            </Form.Group>
            <Form.Group as={Col} md="6">
              <Form.Label>Last name</Form.Label>
              <Form.Control
                type="text"
                name="lastName"
                value={values.lastName}
                onChange={handleChange}
                isValid={touched.lastName && !errors.lastName}
              />

              <Form.Control.Feedback>Looks good</Form.Control.Feedback>
            </Form.Group>
          </Form.Row>
          <Form.Row>
            <Form.Group as={Col} md="6">
              <Form.Label>City</Form.Label>
              <Form.Control
                type="text"
                placeholder="City"
                name="city"
                value={values.city}
                onChange={handleChange}
                isInvalid={!!errors.city}
              />

              <Form.Control.Feedback type="invalid">
                {errors.city}
              </Form.Control.Feedback>
            </Form.Group>
            <Form.Group as={Col} md="3">
              <Form.Label>State</Form.Label>
              <Form.Control
                type="text"
                placeholder="Region"
                name="region"
                value={values.region}
                onChange={handleChange}
                isInvalid={!!errors.region}
              />
              <Form.Control.Feedback type="invalid">
                {errors.region}
              </Form.Control.Feedback>
            </Form.Group>
            <Form.Group as={Col} md="3">
              <Form.Label>Postal Code</Form.Label>
              <Form.Control
                type="text"
                placeholder="Postal Code"
                name="postalcode"
                value={values.postalcode}
                onChange={handleChange}
                isInvalid={!!errors.postalCode}
              />

              <Form.Control.Feedback type="invalid">
                {errors.zip}
              </Form.Control.Feedback>
            </Form.Group>
          </Form.Row>
          <Form.Group>
            <Form.Check
              required
              name="terms"
              label="Agree to terms"
              onChange={handleChange}
              isInvalid={!!errors.terms}
              feedback={errors.terms}
            />
          </Form.Group>
          <Button type="submit">Submit</Button>
        </Form>
      )}
    </Formik>
  );
}

We create the form validation with Yup before we create the component.

All the fields are marked required.

Then in the component, we use the Formik component to create the form.

We set the initial values with the initialValues prop.

It takes a callback that has an object with various properties that we’ll pass into our form control components.

handleSubmit is passed into the onSubmit prop of the form element.

handleChange updates the state from the input values of the form controls, so it’s passed into the onChange prop of each form control.

values is an object with the inputted values, so it’s passed in as the value of each form control.

touched indicates whether the user has interacted with the form or not.

We can use that while we check form control validity.

errors is an object with the form validations errors divided by field.

So we can also use that in the isValid prop.

Once we have that, we have a form with validation and we didn’t have to write code to set the input values of each field as a state value and check them ourselves.

Input Group

We can use the InputGroup component to lets us add content besides an input box.

For instance, we can write:

import React from "react";
import FormControl from "react-bootstrap/FormControl";
import InputGroup from "react-bootstrap/InputGroup";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div>
      <InputGroup className="mb-3">
        <InputGroup.Prepend>
          <InputGroup.Text>@</InputGroup.Text>
        </InputGroup.Prepend>
        <FormControl placeholder="Name" />
      </InputGroup>
    </div>
  );
}

to add an InputGroup with the @ sign to the left of the input box.

InputGroup.Prepend lets us add content to the left of the input.

We can also use InputGroup.Append to add content to the right of the input.

For example, we can write:

import React from "react";
import FormControl from "react-bootstrap/FormControl";
import InputGroup from "react-bootstrap/InputGroup";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div>
      <InputGroup className="mb-3">
        <FormControl placeholder="Name" />
        <InputGroup.Append>
          <InputGroup.Text>@</InputGroup.Text>
        </InputGroup.Append>
      </InputGroup>
    </div>
  );
}

Input Group Sizing

We can change the size of the InputGroup by using the size prop.

For example, we can write:

import React from "react";
import FormControl from "react-bootstrap/FormControl";
import InputGroup from "react-bootstrap/InputGroup";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div>
      <InputGroup size="sm">
        <FormControl placeholder="Name" />
        <InputGroup.Append>
          <InputGroup.Text>@</InputGroup.Text>
        </InputGroup.Append>
      </InputGroup>
    </div>
  );
}

to make the input group extra small.

We can also make the size extra large with lg as the value.

Conclusion

Form validation can be made easy with Formik and Yup integration.

Input groups lets us add content to the left or right of the input box.

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to add forms to a React app with React Bootstrap.

Help Text

We can add help text to form controls.

For instance, we can write:

import React from "react";
import Form from "react-bootstrap/Form";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Form.Label htmlFor="inputPassword5">Password</Form.Label>
      <Form.Control type="password" />
      <Form.Text muted>
        Your password must be 8-50 characters long.
      </Form.Text>
    </>
  );
}

to add help text below the form control.

Form.Text is the container for help text.

muted makes the text color lighter.

Disabled Forms

We can disable form controls with the disabled prop.

It’ll prevent user interaction and make it appear lighter.

For example, we can write:

import React from "react";
import Form from "react-bootstrap/Form";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Form.Group>
        <Form.Label>Disabled input</Form.Label>
        <Form.Control placeholder="Disabled input" disabled />
      </Form.Group>
      <Form.Group>
        <Form.Label>Disabled dropdown</Form.Label>
        <Form.Control as="select" disabled>
          <option>Disabled dropdown</option>
        </Form.Control>
      </Form.Group>
      <Form.Group>
        <Form.Check type="checkbox" label="Disabled" disabled />
      </Form.Group>
    </>
  );
}

to add a text input box, drop down, and a checkbox that is disabled.

We can also add the disabled prop to the fieldset element surrounding the controls to disable all the controls inside it:

import React from "react";
import Form from "react-bootstrap/Form";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <fieldset disabled>
        <Form.Group>
          <Form.Label>Disabled input</Form.Label>
          <Form.Control placeholder="Disabled input" />
        </Form.Group>
        <Form.Group>
          <Form.Label>Disabled dropdown</Form.Label>
          <Form.Control as="select">
            <option>Disabled dropdown</option>
          </Form.Control>
        </Form.Group>
        <Form.Group>
          <Form.Check type="checkbox" label="Disabled" />
        </Form.Group>
      </fieldset>
    </>
  );
}

Validation

We can add validation to our forms.

Yo do that, we add the validated prop to the form to set the state to indicate whether the form is validated or not.

For instance, we can write:

import React from "react";
import Form from "react-bootstrap/Form";
import Col from "react-bootstrap/Col";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  const [validated, setValidated] = React.useState(false);

  const handleSubmit = event => {
    const form = event.currentTarget;
    if (form.checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
    }

setValidated(true);
  };

return (
    <Form noValidate validated={validated} onSubmit={handleSubmit}>
      <Form.Row>
        <Form.Group as={Col} md="6">
          <Form.Label>First name</Form.Label>
          <Form.Control
            required
            type="text"
            placeholder="First name"
            defaultValue="John"
          />
          <Form.Control.Feedback>Looks good</Form.Control.Feedback>
        </Form.Group>
        <Form.Group as={Col} md="6">
          <Form.Label>Last name</Form.Label>
          <Form.Control
            required
            type="text"
            placeholder="Last name"
            defaultValue="Smith"
          />
          <Form.Control.Feedback>Looks good</Form.Control.Feedback>
        </Form.Group>
      </Form.Row>
      <Form.Row>
        <Form.Group as={Col} md="6">
          <Form.Label>City</Form.Label>
          <Form.Control type="text" placeholder="City" required />
          <Form.Control.Feedback type="invalid">
            Please provide a valid city.
          </Form.Control.Feedback>
        </Form.Group>
        <Form.Group as={Col} md="3">
          <Form.Label>Region</Form.Label>
          <Form.Control type="text" placeholder="Region" required />
          <Form.Control.Feedback type="invalid">
            Please provide a valid region.
          </Form.Control.Feedback>
        </Form.Group>
        <Form.Group as={Col} md="3">
          <Form.Label>Postal Code</Form.Label>
          <Form.Control type="text" placeholder="Postal Code" required />
          <Form.Control.Feedback type="invalid">
            Please provide a valid postal code.
          </Form.Control.Feedback>
        </Form.Group>
      </Form.Row>
      <Form.Group>
        <Form.Check
          required
          label="Agree to terms and conditions"
          feedback="You must agree before submitting."
        />
      </Form.Group>
      <Button type="submit">Submit</Button>
    </Form>
  );
}

We can add validation messages by using the Form.Control.FeedBack component.

The tyoe is set to invalid so that we display something when an invalid value is entered.

Is there’s no type prop value, then the message is displayed when the value is valid.

Also, on the form element, we have the validated prop to set the validation state of the form.

If it’s validated, then it should be set to true .

The handleSubmit handler gets the form element and then call the native checkValidity method to check for each field.

It checks again validation attributes like required and pattern .

Conclusion

We can help form help text below form controls.

Also, we can disable form controls to stop users from interacting with them.

We can also use native HTML5 form validation with React Bootstrap.

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to add forms to a React app with React Bootstrap.

Readonly Plain Text

We can add the plaintext prop to make our read-only elements styled as plain text.

For instance, we can write:

import React from "react";
import Form from "react-bootstrap/Form";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Form>
        <Form.Group>
          <Form.Control
            type="text"
            placeholder="Readonly input..."
            plaintext
            readOnly
          />
        </Form.Group>
      </Form>
    </>
  );
}

With the plaintext prop, we won’t get any borders or shadows with the form control.

Range Inputs

React Bootstrap comes with a range input slider.

To add it, we just set the type prop to 'range' .

For example, we can write:

import React from "react";
import Form from "react-bootstrap/Form";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Form>
        <Form.Group>
          <Form.Label>Range</Form.Label>
          <Form.Control type="range" />
        </Form.Group>
      </Form>
    </>
  );
}

We just set the type to 'range' on the Form.Control .

Checkboxes and Radios

We can checkboxes and radios with the Form.Check component.

We just set the type prop on it to set it as a checkbox or a radio button.

For example, we can write:

import React from "react";
import Form from "react-bootstrap/Form";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      {["checkbox", "radio"].map(type => (
        <div key={`default-${type}`}>
          <Form.Check
            type={type}
            id={`default-${type}`}
            label={`default ${type}`}
          />

          <Form.Check
            disabled
            type={type}
            label={`disabled ${type}`}
            id={`disabled-default-${type}`}
          />
        </div>
      ))}
    </>
  );
}

We set the checkbox and radio as value of the type prop to make Form.Check render a checkbox or a radio button.

Inline Checkbox or Radio Buttons

We can make our checkbox and radio buttons display inline with the inline prop.

For example, we can write:

import React from "react";
import Form from "react-bootstrap/Form";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      {["checkbox", "radio"].map(type => (
        <div key={`default-${type}`}>
          <Form.Check
            type={type}
            inline
            id={`default-${type}`}
            label={`default ${type}`}
          />

         <Form.Check
            disabled
            type={type}
            inline
            label={`disabled ${type}`}
            id={`disabled-default-${type}`}
          />
        </div>
      ))}
    </>
  );
}

We add the inline prop to the Form.Check component to make them display inline.

Checkbox and Radio Buttons Without Labels

The label prop is an option prop of the Form.Check component.

We can write:

import React from "react";
import Form from "react-bootstrap/Form";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      {["checkbox", "radio"].map(type => (
        <div key={`default-${type}`}>
          <Form.Check
            type={type}
            inline
            id={`default-${type}`}
          />
        </div>
      ))}
    </>
  );
}

to render the checkbox and radio button without labels.

Customizing FormCheck Rendering

We can set the validation state of the checkbox.

If we add the isValuid prop to the Form.Check.Input component, then everything will be displayed in green.

For instance, we can write:

import React from "react";
import Form from "react-bootstrap/Form";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      {["checkbox", "radio"].map(type => (
        <div key={type} className="mb-3">
          <Form.Check type={type}>
            <Form.Check.Input type={type} isValid />
            <Form.Check.Label>{type}</Form.Check.Label>
            <Form.Control.Feedback type="valid">
              looks good
            </Form.Control.Feedback>
          </Form.Check>
        </div>
      ))}
    </>
  );
}

We have the Form.Check component with more components inside it.

The Form.Check.Input component has the checkbox or radio button itself.

isValid indicates that the input value is valid and it’s displayed in green.

Form.Check.Label has the label for the checkbox or radio button.

Form.Control.Feedback lets us display validation feedback.

type='valid' indicates that it’s a valid input.

Form Groups

Form groups let us create a layout for form controls.

For instance, we can write:

import React from "react";
import Form from "react-bootstrap/Form";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Form>
        <Form.Group>
          <Form.Label>Email address</Form.Label>
          <Form.Control type="email" placeholder="Email" />
        </Form.Group>
        <Form.Group>
          <Form.Label>Name</Form.Label>
          <Form.Control type="text" placeholder="Name" />
        </Form.Group>
      </Form>
    </>
  );
}

to add form groups to our forms.

The Form.Label is displayed above the Form.Control in each group.

Form.Group separate the inputs into their own rows.

Conclusion

We can add read-only text inputs.

There are many ways to add checkboxes and radio buttons.

Form groups let us add layout form control components.