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.

expand codeexpand code
import { Checkbox } from 'antd';

function onChange(e) {
  console.log(`checked = ${e.target.checked}`);
}

ReactDOM.render(
  <Checkbox onChange={onChange}>Checkbox</Checkbox>,
  mountNode
);

Communicated with other components.

expand codeexpand code
import { Checkbox, Button } from 'antd';

class App extends React.Component {
  state = {
    checked: true,
    disabled: false,
  };

  toggleChecked = () => {
    this.setState({ checked: !this.state.checked });
  }

  toggleDisable = () => {
    this.setState({ disabled: !this.state.disabled });
  }

  onChange = (e) => {
    console.log('checked = ', e.target.checked);
    this.setState({
      checked: e.target.checked,
    });
  }

  render() {
    const label = `${this.state.checked ? 'Checked' : 'Unchecked'}-${this.state.disabled ? 'Disabled' : 'Enabled'}`;
    return (
      <div>
        <p style={{ marginBottom: '20px' }}>
          <Checkbox
            checked={this.state.checked}
            disabled={this.state.disabled}
            onChange={this.onChange}
          >
            {label}
          </Checkbox>
        </p>
        <p>
          <Button
            type="primary"
            size="small"
            onClick={this.toggleChecked}
          >
            {!this.state.checked ? 'Check' : 'Uncheck'}
          </Button>
          <Button
            style={{ marginLeft: '10px' }}
            type="primary"
            size="small"
            onClick={this.toggleDisable}
          >
            {!this.state.disabled ? 'Disable' : 'Enable'}
          </Button>
        </p>
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);

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

expand codeexpand code
import { Checkbox } from 'antd';

const CheckboxGroup = Checkbox.Group;

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

class App extends React.Component {
  state = {
    checkedList: defaultCheckedList,
    indeterminate: true,
    checkAll: false,
  };

  onChange = (checkedList) => {
    this.setState({
      checkedList,
      indeterminate: !!checkedList.length && (checkedList.length < plainOptions.length),
      checkAll: checkedList.length === plainOptions.length,
    });
  }

  onCheckAllChange = (e) => {
    this.setState({
      checkedList: e.target.checked ? plainOptions : [],
      indeterminate: false,
      checkAll: e.target.checked,
    });
  }

  render() {
    return (
      <div>
        <div style={{ borderBottom: '1px solid #E9E9E9' }}>
          <Checkbox
            indeterminate={this.state.indeterminate}
            onChange={this.onCheckAllChange}
            checked={this.state.checkAll}
          >
            Check all
          </Checkbox>
        </div>
        <br />
        <CheckboxGroup options={plainOptions} value={this.state.checkedList} onChange={this.onChange} />
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);

Disabled checkbox.

expand codeexpand code
import { Checkbox } from 'antd';

ReactDOM.render(
  <div>
    <Checkbox defaultChecked={false} disabled />
    <br />
    <Checkbox defaultChecked disabled />
  </div>,
  mountNode
);




Generate a group of checkboxes from an array.

expand codeexpand code
import { Checkbox } from 'antd';

const CheckboxGroup = Checkbox.Group;

function 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 optionsWithDisabled = [
  { label: 'Apple', value: 'Apple' },
  { label: 'Pear', value: 'Pear' },
  { label: 'Orange', value: 'Orange', disabled: false },
];

ReactDOM.render(
  <div>
    <CheckboxGroup options={plainOptions} defaultValue={['Apple']} onChange={onChange} />
    <br /><br />
    <CheckboxGroup options={options} defaultValue={['Pear']} onChange={onChange} />
    <br /><br />
    <CheckboxGroup options={optionsWithDisabled} disabled defaultValue={['Apple']} onChange={onChange} />
  </div>,
  mountNode
);

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

expand codeexpand code
import { Checkbox, Row, Col } from 'antd';

function onChange(checkedValues) {
  console.log('checked = ', checkedValues);
}

ReactDOM.render(
  <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>,
  mountNode
);

API#

Props#

Checkbox#

PropertyDescriptionTypeDefault
autoFocusget focus when component mountedbooleanfalse
checkedSpecifies whether the checkbox is selected.booleanfalse
defaultCheckedSpecifies the initial state: whether or not the checkbox is selected.booleanfalse
disabledDisable checkboxbooleanfalse
indeterminateindeterminate checked state of checkboxbooleanfalse
onChangeThe callback function that is triggered when the state changes.Function(e:Event)-

Checkbox Group#

PropertyDescriptionTypeDefault
defaultValueDefault selected valuestring[][]
disabledDisable all checkboxesbooleanfalse
optionsSpecifies optionsstring[][]
valueUsed for setting the currently selected value.string[][]
onChangeThe callback function that is triggered when the state changes.Function(checkedValue)-

Methods#

Checkbox#

NameDescription
blur()remove focus
focus()get focus