Category: React

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.

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.

Form Grid

We can add form controls to a grid to create more complex layouts.

For instance, we can write:

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

export default function App() {
  return (
    <>
      <Form>
        <Row>
          <Col>
            <Form.Control placeholder="First name" />
          </Col>
          <Col>
            <Form.Control placeholder="Last name" />
          </Col>
        </Row>
      </Form>
    </>
  );
}

to display the first name and last name inputs side by side.

Col has the columns.

Form Row

We can replace Row with Form.Row to display a row of form controls/

For example, we can write;

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

export default function App() {
  return (
    <>
      <Form>
        <Form.Row>
          <Col>
            <Form.Control placeholder="First name" />
          </Col>
          <Col>
            <Form.Control placeholder="Last name" />
          </Col>
        </Form.Row>
      </Form>
    </>
  );
}

and get the same result as before.

Horizontal Form Label Sizing

We can change the form label sizing with the column prop.

For instance, we can write:

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

export default function App() {
  return (
    <>
      <Form>
        <Form.Group>
          <Form.Row>
            <Form.Label column="lg" lg={2}>
              Large
            </Form.Label>
            <Col>
              <Form.Control size="lg" type="text" placeholder="Large" />
            </Col>
          </Form.Row>
          <br />
          <Form.Row>
            <Form.Label column lg={2}>
              Normal
            </Form.Label>
            <Col>
              <Form.Control type="text" placeholder="Normal" />
            </Col>
          </Form.Row>
          <br />
          <Form.Row>
            <Form.Label column="sm" lg={2}>
              Small
            </Form.Label>
            <Col>
              <Form.Control size="sm" type="text" placeholder="Small" />
            </Col>
          </Form.Row>
        </Form.Group>
      </Form>
    </>
  );
}

We have the Form.Row and Col component to add our rows and columns,

The column prop on Form.Label lets us change the size of the labels.

The size prop on the Form.Control lets us change the size of the form controls.

Column Sizing

We can change the column sizing with the breakpoint props.

These props include xs for changing column sizes for small screens.

sm for changing column sizes for medium-sized screens.

lg for changing column sizes for large-sized screens.

xl lets us change column sizes for extra-large screen sizes.

For instance, we can write:

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

export default function App() {
  return (
    <>
      <Form>
        <Form.Row>
          <Col xs={5}>
            <Form.Control placeholder="Address" />
          </Col>
          <Col xs={3}>
            <Form.Control placeholder="City" />
          </Col>
          <Col>
            <Form.Control placeholder="State" />
          </Col>
          <Col>
            <Form.Control placeholder="Zip" />
          </Col>
        </Form.Row>
      </Form>
    </>
  );
}

We change the columns for extra small screens and up.

We change the Address field to take up 5 out of 12 columns.

And City field takes up 3 out of 12 columns.

Auto-Sizing

We can change the breakpoint props to auto to change the size.

For example, we can write:

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

export default function App() {
  return (
    <>
      <Form>
        <Form.Row>
          <Col xs="auto">
            <Form.Control placeholder="Address" />
          </Col>
          <Col xs="auto">
            <Form.Control placeholder="City" />
          </Col>
          <Col>
            <Form.Control placeholder="State" />
          </Col>
          <Col>
            <Form.Control placeholder="Zip" />
          </Col>
        </Form.Row>
      </Form>
    </>
  );
}

We change the first 2 columns to auto to let React Bootstrap decide the size for us.

Inline Forms

We can add the inline prop to make the form inline.

For example, we can write:

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

export default function App() {
  return (
    <>
      <Form inline>
        <Form.Label>Name</Form.Label>
        <Form.Control
          className="mb-2"
          id="inlineFormInputName2"
          placeholder="Jane Doe"
        />
        <Form.Label>Username</Form.Label>
        <InputGroup className="mb-2 mr-sm-2">
          <InputGroup.Prepend>
            <InputGroup.Text>@</InputGroup.Text>
          </InputGroup.Prepend>
          <FormControl placeholder="Email" />
        </InputGroup>
        <Form.Check type="checkbox" className="mb-2" label="Remember me" />
      </Form>
    </>
  );
}

We just add the inline prop to the Form so that we can make the form element display inline.

Conclusion

There’re many ways to layout forms.

We can make it inline.

And we can add rows and columns to place the input controls where we want them.

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.

Forms

There’re many components for building forms with React Bootstrap.

For instance, we can write:

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

export default function App() {
  return (
    <>
      <Form>
        <Form.Group>
          <Form.Label>Email</Form.Label>
          <Form.Control type="email" placeholder="Enter email" />
          <Form.Text className="text-muted">Please type email</Form.Text>
        </Form.Group>

        <Form.Group>
          <Form.Label>Name</Form.Label>
          <Form.Control type="text" placeholder="Name" />
        </Form.Group>
        <Form.Group>
          <Form.Check type="checkbox" label="Check me" />
        </Form.Group>
        <Button variant="primary" type="submit">
          Submit
        </Button>
      </Form>
    </>
  );
}

We add a Form component with Form.Group inside to add form groups.

Inside it, we have the Form.Label to add a form control label.

And we have the Form.Control to add a form control.

Form.Text lets us add more text below the form control.

There’s also the Form.Check checkbox to add a checkbox.

Form Controls

React Bootstrap comes with all the common form controls we need.

We can add a text box, select element, and more.

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 controlId="email">
          <Form.Label>Email address</Form.Label>
          <Form.Control type="email" placeholder="name@example.com" />
        </Form.Group>
      </Form>
    </>
  );
}

to add a text input box.

We have a form group to group our form inpy items.

Form.Label has the label.

Form.Control has the text input box. type is set to email to restrict the value to an email.

To add a select dropdown, 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 controlId="select">
          <Form.Label>Example select</Form.Label>
          <Form.Control as="select">
            <option>foo</option>
            <option>bar</option>
            <option>baz</option>
          </Form.Control>
        </Form.Group>
      </Form>
    </>
  );
}

We set the as prop to select to render it as a dropdown.

Then we can put our option elements inside.

We can also add the multiple prop to enable multiple selection on the select element.

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 controlId="select">
          <Form.Label>Example select</Form.Label>
          <Form.Control as="select" multiple>
            <option>foo</option>
            <option>bar</option>
            <option>baz</option>
          </Form.Control>
        </Form.Group>
      </Form>
    </>
  );
}

Now we can select more than one option from the box.

We can use the Form.File component to add a file input.

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.File id="file-upload" label="upload a file" />
        </Form.Group>
      </Form>
    </>
  );
}

We add the Form.File upload to let us upload a file.

Sizing

We can change the sizes of the form control.

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.Control size="lg" type="text" placeholder="Large text" />
          <br />
          <Form.Control type="text" placeholder="Normal text" />
          <br />
          <Form.Control size="sm" type="text" placeholder="Small text" />
        </Form.Group>
      </Form>
    </>
  );
}

We set the size prop to change the size.

lg is large. sm is small. If we don’t pass in a value, then we get a normal-sized control.

We can do the same with select elements.

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.Control as="select" size="lg">
            <option>Large select</option>
          </Form.Control>
          <br />
          <Form.Control as="select">
            <option>Default select</option>
          </Form.Control>
          <br />
          <Form.Control size="sm" as="select">
            <option>Small select</option>
          </Form.Control>
        </Form.Group>
      </Form>
    </>
  );
}

We can change the size of them as we did with the text input.

Readonly Controls

We can add the readOnly prop to make the form control read-only.

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.Control type="text" placeholder="Readonly input..." readOnly />
        </Form.Group>
      </Form>
    </>
  );
}

With the readOnly prop added, we can’t enter things into the box.

Conclusion

We can add input boxes, dropdowns, and file inputs with the Form.Control component.

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 customize React Bootstrap dropdowns.

Drop Directions

We can change the direction that the drop-down menu is shown.

For example, we can write:

import React from "react";
import Dropdown from "react-bootstrap/Dropdown";
import DropdownButton from "react-bootstrap/DropdownButton";
import ButtonGroup from "react-bootstrap/ButtonGroup";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      {["up", "down", "left", "right"].map(direction => (
        <DropdownButton
          as={ButtonGroup}
          key={direction}
          drop={direction}
          variant="secondary"
          title={`Drop ${direction}`}
        >
          <Dropdown.Item eventKey="1">foo</Dropdown.Item>
          <Dropdown.Item eventKey="2">bar</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item eventKey="3">baz</Dropdown.Item>
        </DropdownButton>
      ))}
      }
    </>
  );
}

We set the direction with the drop prop.

It can be 'up' , 'down' , 'left' , or 'right' .

Then the dropdown will be shown above, below, to the left, or the right respectively.

Dropdown Items

We can add dropdown items as links or buttons.

To change our preference, we can use the as prop.

For instance, we can write:

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

export default function App() {
  return (
    <>
      <DropdownButton title="Dropdown button">
        <Dropdown.Item as="button">foo</Dropdown.Item>
        <Dropdown.Item as="button">bar</Dropdown.Item>
        <Dropdown.Item as="button">baz</Dropdown.Item>
      </DropdownButton>
    </>
  );
}

to create the dropdown with buttons in the menu as indicated in the as prop.

Menu Alignment

The menu alignment can be changed.

We can put it on the right side on the screen with the alignRight prop.

For example, we can write:

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

export default function App() {
  return (
    <>
      <DropdownButton title="Dropdown button" alignRight>
        <Dropdown.Item as="button">foo</Dropdown.Item>
        <Dropdown.Item as="button">bar</Dropdown.Item>
        <Dropdown.Item as="button">baz</Dropdown.Item>
      </DropdownButton>
    </>
  );
}

We add the prop to make the dropdown shown on the right.

Menu Headers

Menu can have their own headers.

To add them, we can use the Dropdown.Menu component.

For example, we can write:

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

export default function App() {
  return (
    <>
      <DropdownButton title="Dropdown button" alignRight>
        <Dropdown.Header>Dropdown header</Dropdown.Header>
        <Dropdown.Item as="button">foo</Dropdown.Item>
        <Dropdown.Item as="button">bar</Dropdown.Item>
        <Dropdown.Item as="button">baz</Dropdown.Item>
      </DropdownButton>
    </>
  );
}

to add a header.

With the long form of the Dropdown component, we can write:

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

export default function App() {
  return (
    <>
      <Dropdown as={ButtonGroup}>
        <Dropdown.Toggle variant="success">Dropdown Button</Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Header>Dropdown header</Dropdown.Header>
          <Dropdown.Item eventKey="2">foo</Dropdown.Item>
          <Dropdown.Item eventKey="3">bar</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </>
  );
}

We have the Dropdown.header in the Dropdown.Menu .

Menu Dividers

The Dropdown.Divider component leys us add menu dividers.

For example, we can write:

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

export default function App() {
  return (
    <>
      <Dropdown as={ButtonGroup}>
        <Dropdown.Toggle variant="success">Dropdown Button</Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item eventKey="1">baz</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item eventKey="2">foo</Dropdown.Item>
          <Dropdown.Item eventKey="3">bar</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </>
  );
}

We added the Dropdown.Divider in our Dropdown.Menu to separate the entries.

Customization

We can customize the styles in many ways.

For instance, we can write:

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

export default function App() {
  return (
    <>
      <style type="text/css">
        {`
        .super-colors {
          background: rgb(34,193,195);
          background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
        }
      `}
      </style>
      <Dropdown as={ButtonGroup}>
        <Dropdown.Toggle variant="success">Dropdown Button</Dropdown.Toggle>
        <Dropdown.Menu className="super-colors">
          <Dropdown.Item eventKey="1">baz</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item eventKey="2">foo</Dropdown.Item>
          <Dropdown.Item eventKey="3">bar</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </>
  );
}

We have the super-colors class with a gradient as the background of the menu.

The className prop will set the class name of the rendered element as we expect.

Custom Dropdown Components

We can create our custom dropdown component.

For instance, we can write:

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

const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
  <div
    ref={ref}
    onClick={e => {
      e.preventDefault();
      onClick(e);
    }}
  >
    {children}
  </div>
));

const CustomMenu = React.forwardRef(
  ({ children, style, className, "aria-labelledby": labeledBy }, ref) => {
    const [value, setValue] = React.useState("");

    return (
      <div
        ref={ref}
        style={style}
        className={className}
        aria-labelledby={labeledBy}
      >
        <FormControl
          autoFocus
          className="mx-3 my-2 w-auto"
          placeholder="search"
          onChange={e => setValue(e.target.value)}
          value={value}
        />
        <ul className="list-unstyled">
          {React.Children.toArray(children).filter(
            child =>
              !value || child.props.children.toLowerCase().startsWith(value)
          )}
        </ul>
      </div>
    );
  }
);

export default function App() {
  return (
    <>
      <Dropdown as={ButtonGroup}>
        <Dropdown.Toggle as={CustomToggle}>Dropdown Button</Dropdown.Toggle>
        <Dropdown.Menu as={CustomMenu}>
          <Dropdown.Item eventKey="1">baz</Dropdown.Item>
          <Dropdown.Item eventKey="2">foo</Dropdown.Item>
          <Dropdown.Item eventKey="3">bar</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </>
  );
}

We created our own CustomToggle component to render our own toggle.

We’ve to pass the ref from the props to our toggle component so React Boostrap can use for a toggle.

Then run the onClick function from the props to open the menu.

children has the content of the toggle.

Likewise, we also created a CustomMenu component.

We get the children , style and className from the props and apply them.

Also, we added a FormControl component to set the value state when we type.

When we type, then items on the menu are filtered by the search term.

So only the entries that match what we type in are displayed.

Conclusion

There are many ways to customize a dropdown menu.

We can make our own toggle and menu.

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 buttons.

Checkbox and Radio Buttons

We can use the ToggleButton component to make the buttons work as a checkbox or a radio button style.

For example, we can write:

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

export default function App() {
  const [checked, setChecked] = React.useState(false);
  const [radioValue, setRadioValue] = React.useState("foo");

  const radios = [
    { name: "Foo", value: "foo" },
    { name: "Bar", value: "bar" },
    { name: "Baz", value: "baz" }
  ];

  return (
    <>
      <ButtonGroup toggle className="mb-2">
        <ToggleButton
          type="checkbox"
          checked={checked}
          value="1"
          onChange={e => setChecked(e.currentTarget.checked)}
        >
          Checkbox
        </ToggleButton>
      </ButtonGroup>
      <br />
      <ButtonGroup toggle>
        {radios.map((radio, index) => (
          <ToggleButton
            key={index}
            type="radio"
            name="radio"
            value={radio.value}
            checked={radioValue === radio.value}
            onChange={e => setRadioValue(e.currentTarget.value)}
          >
            {radio.name}
          </ToggleButton>
        ))}
      </ButtonGroup>
    </>
  );
}

to create checkbox and radio buttons.

The first ButtonGroup has the checkbox.

We need the toggle prop for the group so that we get the checkbox effect.

The ToggleButton has the type prop set to 'checkbox' .

The value is set to 1.

And the onChange prop is required to set the checked value to the checkbox’s value .

In the 2nd ButtonGroup we have several buttons.

They’re all ToggleButton s with the type set to 'radio' .

This makes them radio buttons.

The value is the value that we set,

checked has the checked value of the radio button.

And the onChange prop lets us update the value of radioValue according to the value prop.

Now when we click on the Checkbox button, it’ll toggle the button state.

And when we click on the buttons on the 2nd row, we’ll see the only the one we clicked on checked.

Uncontrolled Button Groups

We can also make ToggleButton uncontrolled.

For instance, we can write:

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

export default function App() {
  return (
    <>
      <ToggleButtonGroup type="checkbox" defaultValue={[1, 3]} className="mb-2">
        <ToggleButton value={1}>foo</ToggleButton>
        <ToggleButton value={2}>bar</ToggleButton>
        <ToggleButton value={3}>baz</ToggleButton>
      </ToggleButtonGroup>
      <br />
      <ToggleButtonGroup type="radio" name="options" defaultValue={1}>
        <ToggleButton value={1}>foo</ToggleButton>
        <ToggleButton value={2}>bar</ToggleButton>
        <ToggleButton value={3}>baz</ToggleButton>
      </ToggleButtonGroup>
    </>
  );
}

We use the ToggleButtonGroup instead of ButtonGroup to add uncontrolled ToggleButton s inside.

We set the type to 'checkbox' for checkboxes and 'radio' for radio buttons.

defaultValue has the default value.

Checkboxes can have multiple default values.

And radio buttons can have one.

They should match the values we have in the value prop.

Now we’ll see checkboxes and radio buttons but there won’t be any states associated with them.

Controlled Button Groups

We can also make the buttons groups controlled components.

For instance, we can write:

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

export default function App() {
  const [value, setValue] = React.useState([1, 3]);

  const handleChange = val => setValue(val);

  return (
    <ToggleButtonGroup type="checkbox" value={value} onChange={handleChange}>
      <ToggleButton value={1}>foo</ToggleButton>
      <ToggleButton value={2}>bar</ToggleButton>
      <ToggleButton value={3}>baz</ToggleButton>
    </ToggleButtonGroup>
  );
}

We have the ToggleButtonGroup again.

But now we have a value prop set to the value state.

onChange lets us set the value state when we click on the button.

value on the ToggleButton is the value that’ll be added.

handleChange has all the checked values so that we can set it.

We can do use the same code for a radio button:

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

export default function App() {
  const [value, setValue] = React.useState(2);

  const handleChange = val => setValue(val);

  return (
    <ToggleButtonGroup
      name="value"
      type="radio"
      value={value}
      onChange={handleChange}
    >
      <ToggleButton value={1}>foo</ToggleButton>
      <ToggleButton value={2}>bar</ToggleButton>
      <ToggleButton value={3}>baz</ToggleButton>
    </ToggleButtonGroup>
  );
}

We have the name prop to set the name.

type is changed to 'radio' for the radio button.

We set the value the same way with handleChange .

The only difference is that there’s only one value instead of an array.

Conclusion

We can add toggle buttons to add buttons as checkbox and radio button styles.

They can be controlled or uncontrolled.

If it’s controlled, then we set the state.