Solution

To change size of ant design checkbox in react js, you have to use the checkbox component from it, Use this css code .ant-checkbox .ant-checkbox-inner in width: 30px !important; height: 30px !important; then it will change the size of ant design checkbox.

Snippet

In this snippet, see small example for using Checkbox component of Ant design library, with Use this css code .ant-checkbox .ant-checkbox-inner in width: 30px !important; height: 30px !important; then it will change the size of ant design checkbox.

.ant-checkbox .ant-checkbox-inner {
  width: 30px !important;
  height: 30px !important;
}

Table of contents

  • Install Ant Design.
  • Import the Checkbox component.
  • Set the size of checkbox.

Let’s start with the first step.

Step 1: Install Ant Design.

install ant design library using npm install antd command.

Step 2: Import the Checkbox component.

you can import the Checkbox component from Ant Design.

import { Checkbox } from 'antd';

step 3: Set the size of checkbox.

when you have to change the size of the checkbox then use this css code .ant-checkbox .ant-checkbox-inner and add height and width.

.ant-checkbox .ant-checkbox-inner {
  width: 30px !important;
  height: 30px !important;
}

Example

In this example, we will import the Checkbox component from the ant library. use Checkbox component of ant design library, Use this css code .ant-checkbox .ant-checkbox-inner in width: 30px !important; height: 30px !important; then it will change the size of ant design checkbox.

Let’s start coding…

App.js

import { Checkbox } from 'antd';
import "./App.css";

export default function App() {
  return (
    <Checkbox >My Checkbox</Checkbox>
  );
}

.ant-checkbox .ant-checkbox-inner {
  width: 30px !important;
  height: 30px !important;
}

Output

Ant-design, button

Here, we are provided code sandbox links for the above program to change size of ant design checkbox. Then you can use whenever you went and do the changes as per your requirements

codesandbox

Happy Coding,

I hope the above example with help you to do your task.