Solution

To set default value of ant design checkbox in react js, first, install ant design library using npm install antd command import and use the checkbox component from it. You have to use the defaultValue attribute in set default value of ant design checkbox.

Snippet

In this snippet, see small example for using Checkbox component of Ant design library, with use of defaultValue set default value of ant design checkbox.

<Checkbox.Group options={plainOptions}
  defaultValue={['Apple']}
  onChange={onChange}
/>
<br />
<br />
<Checkbox.Group options={options}
  defaultValue={['Pear']}
  onChange={onChange}
/>

Table of contents

  • Install Ant Design.
  • Import the Checkbox component.
  • Set the default value.

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 default value.

You have a need to define the checkbox group using the array, set on the apple.

<Checkbox.Group options={plainOptions} 
  defaultValue={['Apple']} 
  onChange={onChange} 
/>

Example

In this example, we will import the Checkbox component from the ant library. use plainOptions array to set options stored in checkbox and use of defaultValue set default value of ant design checkbox.

Let’s start coding…

App.js

import { Checkbox } from 'antd';
const onChange = (checkedValues) => {
  console.log('checked = ', checkedValues);
};
const plainOptions = ['Apple', 'Pear', 'Orange'];
const options = [
  {
    label: 'Apple',
    value: 'Apple',
  },
  {
    label: 'Pear',
    value: 'Pear',
  },
  {
    label: 'Orange',
    value: 'Orange',
  },
];

const App = () => (
  <>
    <Checkbox.Group options={plainOptions} 
    defaultValue={['Apple']} 
    onChange={onChange} 
    />
    <br />
    <br />
    <Checkbox.Group options={options} 
    defaultValue={['Pear']} 
    onChange={onChange}
    />

  </>
);
export default App;

Output

Ant-design, default, value

Here, we are provided code sandbox links for the above program to set default value 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.