Open In App

ReactJS UI Ant Design Checkbox Component

Last Updated : 21 May, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

Ant Design Library has this component pre-built, and it is very easy to integrate as well. The checkbox component allows the user to make a binary choice from the given options. We can use the following approach in ReactJS to use the Ant Design Checkbox Component.

Checkbox Methods:

  • blur(): This method is used to remove the focus from the element.
  • focus(): This method is used to get the focus on the element.

Checkbox Props:

  • autoFocus: It is used to get focus when the component is mounted.
  • checked: It indicates whether the checkbox is selected or not.
  • defaultChecked: It is used to specify the initial state whether the checkbox is selected or not.
  • disabled: It is used to disable the checkbox.
  • indeterminate: It is used to denote the indeterminate checked state of the checkbox.
  • onChange: It is the callback function which is triggered when state changes.

Checkbox Group Props:

  • defaultValue: It is used to define the default selected value for the checkbox.
  • disabled: It is used to disable all checkboxes.
  • name: It is used to define the name property of all input children which are of type checkbox.
  • options: It is used to specify options.
  • value: It is used for setting the currently selected value.
  • onChange: It is the callback function which is triggered when state changes.

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: After creating the ReactJS application, Install the required module using the following command:

    npm install antd

Project Structure: It will look like the following.

Project Structure

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js




import React from 'react'
import "antd/dist/antd.css";
import { Checkbox } from 'antd';
  
export default function App() {
  
  return (
    <div style={{ display: 'block',
                  width: 700, padding: 30 }}>
      <h4>ReactJS Ant-Design Checkbox Component</h4>
      <Checkbox onChange={()=> {
         alert("You Checked the box!")
      }}>Agree to terms and Conditions</Checkbox>
    </div>
  );
}


Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Reference: https://ant.design/components/checkbox/


Previous Article
Next Article

Similar Reads

ReactJS UI Ant Design Result Component
Ant Design Library has this component pre-built, and it is very easy to integrate as well. Result Component is used to feedback the results of a series of operational tasks. We can use the following approach in ReactJS to use the Ant Design Affix Component. Result Props: extra: It is used to define the operating area.icon: It is used to pass the cu
2 min read
ReactJS UI Ant Design Typography Component
Ant Design Library has this component pre-built, and it is very easy to integrate as well. Typography component is useful for basic text writing, body text, including headings, lists, and many more. We can use the following approach in ReactJS to use the Ant Design Typography Component. Typography.Text Props: code: It is used for the code style.cop
5 min read
ReactJS UI Ant Design Statistic Component
Ant Design Library has this component pre-built, and it is very easy to integrate as well. Statistic Component is used when we want to display statistic numbers. It can be used in applications that have to display statistic data like games applications for scores, cricket scores website, etc. We can use the following approach in ReactJS to use the
3 min read
ReactJS UI Ant Design Tooltip Component
Ant Design Library has this component pre-built, and it is very easy to integrate as well. Tooltip Component is used to display the information in the form of text when users focus on, hover over, or tap an element. We can use the following approach in ReactJS to use the Ant Design Tooltip Component. Tooltip Props: title: It is used to describe the
3 min read
ReactJS UI Ant Design Divider Component
Ant Design Library has this component pre-built, and it is very easy to integrate as well. Divider Component provides a way to separate the different content using a divider line. We can use the following approach in ReactJS to use the Ant Design Divider Component. Divider Props: className: It is used to denote the class name for the container.dash
2 min read
ReactJS UI Ant Design Timeline Component
Timeline is used to display a series of information that needs to be ordered by time (ascending or descending). Ant Design Library has this component pre-built, and it is very easy to integrate as well. We can use this Timeline component using the following approach easily. Syntax: &lt;Timeline&gt; &lt;Timeline.Item&gt; Content of the timeline &lt;
2 min read
ReactJS UI Ant Design Popconfirm Component
Popconfirm is a simple and compact confirmation dialog of an action. It is basically used to ask for user confirmation. Ant Design Library has this component pre-built, and it is very easy to integrate as well. We can use this Popconfirm component using the following process easily. Syntax: &lt;Popconfirm title="Open Popconfirm?" onConfirm={confirm
2 min read
ReactJS UI Ant Design Spin Component
A spinner is used for displaying the loading state of a page or a section in our projects. It is basically used when the page is waiting for asynchronous data or during a rendering process, an appropriate loading animation can effectively mitigate users' uneasiness. Ant Design Library has this component pre-built, and it is very easy to integrate a
2 min read
ReactJS UI Ant Design Steps Component
Ant Design Library has this component pre-built, and it is very easy to integrate as well. Steps Component is a kind of navigation bar that is helpful in a way that it guides users through the steps of a task. We can use the following approach in ReactJS to use the Ant Design Steps Component. Syntax: &lt;Steps current={ }&gt; &lt;Step title=" " des
3 min read
ReactJS UI Ant Design Pagination Component
Ant Design Library has this component pre-built, and it is very easy to integrate as well. Pagination Component allows the user to show the page number and switch between pages easily with the next and previous button. We can use the following approach in ReactJS to use the Ant Design Pagination Component. Syntax: &lt;Pagination defaultCurrent={ }
3 min read