ReactJS MDBootstrap Forms Checkbox Component - GeeksforGeeks

07 Jan, 2022
MDBootstrap is a Material Design and bootstrap-based react UI library that is used to make good-looking webpages with its seamless and easy-to-use component. In this article, we will know how to use Forms Checkbox Component in ReactJS MDBootstrap. A checkbox lets a user definitely choose a value from a limited number of choices in a subtle way.
 
Properties:
className: It is used to add a custom class to the component
name: It is used to specify the name for the component
value: It is used to set the value for the component
id: It is used to define an id for the component
label: It is used to define a label text for the component
labeled: It is used to define an id for the label
labelClass: It is used to add custom classes to the label
wrapperTag: It is used to define a tag type for the wrapper of the component
wrapperClass: It is used to add custom classes to the wrapper of the component
disabled: It is used to make the component disabled
inline: It is used to place the component in one row
defaultChecked: It is used to make the component checked by default
btn: It is used to make a button from the component
btnColor: It is used to allow to set the color of the button checkbox
 
Syntax:
<MDBCheckbox label='string' />
Creating React Application And Installing Module:
Step 1: Create a React application using the following command.
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command.
cd foldername
Step 3: Install ReactJS MDBootstrap in your given directory.
npm i mdb-ui-kit
npm i mdb-react-ui-kit
Step 4: Import the element to be used in the project.
import { MDBCheckbox } from 'mdb-react-ui-kit'
Project Structure: It will look like the following.
Step to Run Application: Run the application from the root directory of the project, using the following command.
npm start
Example 1: This is the basic example that shows how to use Checkbox Component.
App.js
import React from "react";import { MDBCheckbox } from "mdb-react-ui-kit";  export default function App() {    return (        <div id="gfg">            <h2>GeeksforGeeks</h2>            <h4>ReactJS MDBootstrap Checkbox component</h4>              <MDBCheckbox inline name='gfg' id='gfgDefault'                label='CheckBox Component' />            <MDBCheckbox inline                 label='CheckBox Component (Disabled)' disabled />        </div>    );}
Output:
Example 2: In this example, we will know how to use btn property in a Checkbox component.
App.js
import React from "react";import { MDBCheckbox } from "mdb-react-ui-kit";  export default function App() {    return (        <div id="gfg">            <h2>GeeksforGeeks</h2>            <h4>ReactJS MDBootstrap Checkbox component</h4>              <MDBCheckbox btn btnColor='danger' name='gfg'                id='gfgDefault' label='CheckBox Component' />            <br />            <MDBCheckbox btn btnColor="warning" name='abc'                id='abcDefault' label='CheckBox Component' />        </div>    );}
Output:
Reference: https://mdbootstrap.com/docs/b5/react/forms/checkbox/
MDBootstrap
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
ReactJS useNavigate() Hook
How to set background images in ReactJS ?
Axios in React: A Guide for Beginners
How to create a table in ReactJS ?
How to navigate on path by button click in react router ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript