Checkbox

Checkbox component.

When To Use

Used for selecting multiple values from several options.
If you use only one checkbox, it is the same as using Switch to toggle between two states. The difference is that Switch will trigger the state change directly, but Checkbox just marks the state as changed and this needs to be submitted.

Examples

Basic usage of checkbox.

TypeScript
JavaScript
import React from 'react';
import { Checkbox } from 'antd';
import type { CheckboxChangeEvent } from 'antd/es/checkbox';

const onChange = (e: CheckboxChangeEvent) => {
  console.log(`checked = ${e.target.checked}`);
};

const App: React.FC = () => <Checkbox onChange={onChange}>Checkbox</Checkbox>;

export default App;

Controlled Checkbox

Communicated with other components.

TypeScript
JavaScript
import React, { useState } from 'react';
import { Button, Checkbox } from 'antd';
import type { CheckboxChangeEvent } from 'antd/es/checkbox';

const App: React.FC = () => {
  const [checked, setChecked] = useState(true);
  const [disabled, setDisabled] = useState(false);

  const toggleChecked = () => {
    setChecked(!checked);
  };

  const toggleDisable = () => {
    setDisabled(!disabled);
  };

  const onChange = (e: CheckboxChangeEvent) => {
    console.log('checked = ', e.target.checked);
    setChecked(e.target.checked);
  };

  const label = `${checked ? 'Checked' : 'Unchecked'}-${disabled ? 'Disabled' : 'Enabled'}`;

  return (
    <>
      <p style={{ marginBottom: '20px' }}>
        <Checkbox checked={checked} disabled={disabled} onChange={onChange}>
          {label}
        </Checkbox>
      </p>
      <p>
        <Button type="primary" size="small" onClick={toggleChecked}>
          {!checked ? 'Check' : 'Uncheck'}
        </Button>
        <Button style={{ margin: '0 10px' }} type="primary" size="small" onClick={toggleDisable}>
          {!disabled ? 'Disable' : 'Enable'}
        </Button>
      </p>
    </>
  );
};

export default App;

Check all

The indeterminate property can help you to achieve a 'check all' effect.

TypeScript
JavaScript
import React, { useState } from 'react';
import { Checkbox, Divider } from 'antd';
import type { CheckboxChangeEvent } from 'antd/es/checkbox';
import type { CheckboxValueType } from 'antd/es/checkbox/Group';

const CheckboxGroup = Checkbox.Group;

const plainOptions = ['Apple', 'Pear', 'Orange'];
const defaultCheckedList = ['Apple', 'Orange'];

const App: React.FC = () => {
  const [checkedList, setCheckedList] = useState<CheckboxValueType[]>(defaultCheckedList);
  const [indeterminate, setIndeterminate] = useState(true);
  const [checkAll, setCheckAll] = useState(false);

  const onChange = (list: CheckboxValueType[]) => {
    setCheckedList(list);
    setIndeterminate(!!list.length && list.length < plainOptions.length);
    setCheckAll(list.length === plainOptions.length);
  };

  const onCheckAllChange = (e: CheckboxChangeEvent) => {
    setCheckedList(e.target.checked ? plainOptions : []);
    setIndeterminate(false);
    setCheckAll(e.target.checked);
  };

  return (
    <>
      <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
        Check all
      </Checkbox>
      <Divider />
      <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} />
    </>
  );
};

export default App;

Disabled

Disabled checkbox.

TypeScript
JavaScript
import React from 'react';
import { Checkbox } from 'antd';

const App: React.FC = () => (
  <>
    <Checkbox defaultChecked={false} disabled />
    <br />
    <Checkbox defaultChecked disabled />
  </>
);

export default App;

Checkbox Group

Generate a group of checkboxes from an array.

TypeScript
JavaScript
import React from 'react';
import { Checkbox } from 'antd';
import type { CheckboxValueType } from 'antd/es/checkbox/Group';

const onChange = (checkedValues: CheckboxValueType[]) => {
  console.log('checked = ', checkedValues);
};

const plainOptions = ['Apple', 'Pear', 'Orange'];
const options = [
  { label: 'Apple', value: 'Apple' },
  { label: 'Pear', value: 'Pear' },
  { label: 'Orange', value: 'Orange' },
];
const optionsWithDisabled = [
  { label: 'Apple', value: 'Apple' },
  { label: 'Pear', value: 'Pear' },
  { label: 'Orange', value: 'Orange', disabled: false },
];

const App: React.FC = () => (
  <>
    <Checkbox.Group options={plainOptions} defaultValue={['Apple']} onChange={onChange} />
    <br />
    <br />
    <Checkbox.Group options={options} defaultValue={['Pear']} onChange={onChange} />
    <br />
    <br />
    <Checkbox.Group
      options={optionsWithDisabled}
      disabled
      defaultValue={['Apple']}
      onChange={onChange}
    />
  </>
);

export default App;

Use with Grid

We can use Checkbox and Grid in Checkbox.Group, to implement complex layout.

TypeScript
JavaScript
import React from 'react';
import { Checkbox, Col, Row } from 'antd';
import type { CheckboxValueType } from 'antd/es/checkbox/Group';

const onChange = (checkedValues: CheckboxValueType[]) => {
  console.log('checked = ', checkedValues);
};

const App: React.FC = () => (
  <Checkbox.Group style={{ width: '100%' }} onChange={onChange}>
    <Row>
      <Col span={8}>
        <Checkbox value="A">A</Checkbox>
      </Col>
      <Col span={8}>
        <Checkbox value="B">B</Checkbox>
      </Col>
      <Col span={8}>
        <Checkbox value="C">C</Checkbox>
      </Col>
      <Col span={8}>
        <Checkbox value="D">D</Checkbox>
      </Col>
      <Col span={8}>
        <Checkbox value="E">E</Checkbox>
      </Col>
    </Row>
  </Checkbox.Group>
);

export default App;

API

Props

Checkbox

Property	Description	Type	Default
autoFocus	If get focus when component mounted	boolean	false
checked	Specifies whether the checkbox is selected	boolean	false
defaultChecked	Specifies the initial state: whether or not the checkbox is selected	boolean	false
disabled	If disable checkbox	boolean	false
indeterminate	The indeterminate checked state of checkbox	boolean	false
onChange	The callback function that is triggered when the state changes	function(e:Event)	-

Checkbox Group

Property	Description	Type	Default
defaultValue	Default selected value	string[]	[]
disabled	If disable all checkboxes	boolean	false
name	The `name` property of all `input[type="checkbox"]` children	string	-
options	Specifies options	string[] \| number[] \| Option[]	[]
value	Used for setting the currently selected value	string[]	[]
onChange	The callback function that is triggered when the state changes	function(checkedValue)	-

Methods

Checkbox

Name	Description	Version
blur()	Remove focus
focus()	Get focus

import React from 'react'; import { Checkbox } from 'antd'; import type { CheckboxChangeEvent } from 'antd/es/checkbox'; const onChange = (e: CheckboxChangeEvent) => { console.log(`checked = ${e.target.checked}`); }; const App: React.FC = () => <Checkbox onChange={onChange}>Checkbox</Checkbox>; export default App;

import React, { useState } from 'react'; import { Button, Checkbox } from 'antd'; import type { CheckboxChangeEvent } from 'antd/es/checkbox'; const App: React.FC = () => { const [checked, setChecked] = useState(true); const [disabled, setDisabled] = useState(false); const toggleChecked = () => { setChecked(!checked); }; const toggleDisable = () => { setDisabled(!disabled); }; const onChange = (e: CheckboxChangeEvent) => { console.log('checked = ', e.target.checked); setChecked(e.target.checked); }; const label = `${checked ? 'Checked' : 'Unchecked'}-${disabled ? 'Disabled' : 'Enabled'}`; return ( <> <p style={{ marginBottom: '20px' }}> <Checkbox checked={checked} disabled={disabled} onChange={onChange}> {label} </Checkbox> </p> <p> <Button type="primary" size="small" onClick={toggleChecked}> {!checked ? 'Check' : 'Uncheck'} </Button> <Button style={{ margin: '0 10px' }} type="primary" size="small" onClick={toggleDisable}> {!disabled ? 'Disable' : 'Enable'} </Button> </p> </> ); }; export default App;

import React, { useState } from 'react'; import { Checkbox, Divider } from 'antd'; import type { CheckboxChangeEvent } from 'antd/es/checkbox'; import type { CheckboxValueType } from 'antd/es/checkbox/Group'; const CheckboxGroup = Checkbox.Group; const plainOptions = ['Apple', 'Pear', 'Orange']; const defaultCheckedList = ['Apple', 'Orange']; const App: React.FC = () => { const [checkedList, setCheckedList] = useState<CheckboxValueType[]>(defaultCheckedList); const [indeterminate, setIndeterminate] = useState(true); const [checkAll, setCheckAll] = useState(false); const onChange = (list: CheckboxValueType[]) => { setCheckedList(list); setIndeterminate(!!list.length && list.length < plainOptions.length); setCheckAll(list.length === plainOptions.length); }; const onCheckAllChange = (e: CheckboxChangeEvent) => { setCheckedList(e.target.checked ? plainOptions : []); setIndeterminate(false); setCheckAll(e.target.checked); }; return ( <> <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}> Check all </Checkbox> <Divider /> <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} /> </> ); }; export default App;

import React from 'react'; import { Checkbox } from 'antd'; const App: React.FC = () => ( <> <Checkbox defaultChecked={false} disabled /> <br /> <Checkbox defaultChecked disabled /> </> ); export default App;

import React from 'react'; import { Checkbox } from 'antd'; import type { CheckboxValueType } from 'antd/es/checkbox/Group'; const onChange = (checkedValues: CheckboxValueType[]) => { console.log('checked = ', checkedValues); }; const plainOptions = ['Apple', 'Pear', 'Orange']; const options = [ { label: 'Apple', value: 'Apple' }, { label: 'Pear', value: 'Pear' }, { label: 'Orange', value: 'Orange' }, ]; const optionsWithDisabled = [ { label: 'Apple', value: 'Apple' }, { label: 'Pear', value: 'Pear' }, { label: 'Orange', value: 'Orange', disabled: false }, ]; const App: React.FC = () => ( <> <Checkbox.Group options={plainOptions} defaultValue={['Apple']} onChange={onChange} /> <br /> <br /> <Checkbox.Group options={options} defaultValue={['Pear']} onChange={onChange} /> <br /> <br /> <Checkbox.Group options={optionsWithDisabled} disabled defaultValue={['Apple']} onChange={onChange} /> </> ); export default App;

import React from 'react'; import { Checkbox, Col, Row } from 'antd'; import type { CheckboxValueType } from 'antd/es/checkbox/Group'; const onChange = (checkedValues: CheckboxValueType[]) => { console.log('checked = ', checkedValues); }; const App: React.FC = () => ( <Checkbox.Group style={{ width: '100%' }} onChange={onChange}> <Row> <Col span={8}> <Checkbox value="A">A</Checkbox> </Col> <Col span={8}> <Checkbox value="B">B</Checkbox> </Col> <Col span={8}> <Checkbox value="C">C</Checkbox> </Col> <Col span={8}> <Checkbox value="D">D</Checkbox> </Col> <Col span={8}> <Checkbox value="E">E</Checkbox> </Col> </Row> </Checkbox.Group> ); export default App;

API

Props

Checkbox

Property	Description	Type	Default
autoFocus	If get focus when component mounted	boolean	false
checked	Specifies whether the checkbox is selected	boolean	false
defaultChecked	Specifies the initial state: whether or not the checkbox is selected	boolean	false
disabled	If disable checkbox	boolean	false
indeterminate	The indeterminate checked state of checkbox	boolean	false
onChange	The callback function that is triggered when the state changes	function(e:Event)	-

Checkbox Group

Property	Description	Type	Default
defaultValue	Default selected value	string[]	[]
disabled	If disable all checkboxes	boolean	false
name	The `name` property of all `input[type="checkbox"]` children	string	-
options	Specifies options	string[] \| number[] \| Option[]	[]
value	Used for setting the currently selected value	string[]	[]
onChange	The callback function that is triggered when the state changes	function(checkedValue)	-

Methods

Checkbox

Name	Description	Version
blur()	Remove focus
focus()	Get focus

Ant Design

Checkbox

Ant Design

Checkbox

When To Use

Examples

API

Props

Checkbox

Checkbox Group

Methods

Checkbox

When To Use

Examples

API

Props

Checkbox

Checkbox Group

Methods

Checkbox