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
Links
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.
Happy Coding,
I hope the above example with help you to do your task.