ant-design/components/checkbox/demo/basic.md

---
order: 0
title:
  zh-CN: 基本用法
  en-US: Basic
---

## zh-CN

简单的 checkbox。

## en-US

Basic usage of checkbox.

```tsx
import { Checkbox } from 'antd';
import type { CheckboxChangeEvent } from 'antd/es/checkbox';
import React from 'react';

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

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

export default App;
```
docs: update demo format 2016-03-31 09:40:55 +08:00			`---`
			`order: 0`
docs: tranlsation of Checkbox (#2740) 2016-08-18 11:22:55 +08:00			`title:`
:lipstick: prittier all files 2019-05-07 14:57:32 +08:00			`zh-CN: 基本用法`
			`en-US: Basic`
docs: update demo format 2016-03-31 09:40:55 +08:00			`---`
add checkbox 2015-07-15 15:19:24 +08:00
docs: tranlsation of Checkbox (#2740) 2016-08-18 11:22:55 +08:00			`## zh-CN`

add checkbox 2015-07-15 15:19:24 +08:00			`简单的 checkbox。`

docs: tranlsation of Checkbox (#2740) 2016-08-18 11:22:55 +08:00			`## en-US`

			`Basic usage of checkbox.`

docs: feat components TS demo (#34742) * docs: add general components TS demo * docs: add layout components TS demo * docs: add navigation components TS demo * docs: add data entry components TS demo * chore(deps): add types for qs * docs: add data display TS demo * docs: add feedback components TS demo * docs: add other components TS demo * chore(deps): add types * docs: unified demo code style * docs: fix lint error * docs: add demo TS type * docs: fix demo TS type * test: update snapshot * docs: fix TS demo * feat: update Rate character type * docs: fix lint error * feat: update Rate character type * feat: update Rate character type 2022-05-19 09:46:26 +08:00			```tsx
ES6 syntax for demo code fix antd.notification 2015-10-28 20:55:49 +08:00			`import { Checkbox } from 'antd';`
docs: feat components TS demo (#34742) * docs: add general components TS demo * docs: add layout components TS demo * docs: add navigation components TS demo * docs: add data entry components TS demo * chore(deps): add types for qs * docs: add data display TS demo * docs: add feedback components TS demo * docs: add other components TS demo * chore(deps): add types * docs: unified demo code style * docs: fix lint error * docs: add demo TS type * docs: fix demo TS type * test: update snapshot * docs: fix TS demo * feat: update Rate character type * docs: fix lint error * feat: update Rate character type * feat: update Rate character type 2022-05-19 09:46:26 +08:00			`import type { CheckboxChangeEvent } from 'antd/es/checkbox';`
chore: merge master 2022-05-21 22:14:15 +08:00			`import React from 'react';`
ES6 syntax for demo code fix antd.notification 2015-10-28 20:55:49 +08:00
docs: feat components TS demo (#34742) * docs: add general components TS demo * docs: add layout components TS demo * docs: add navigation components TS demo * docs: add data entry components TS demo * chore(deps): add types for qs * docs: add data display TS demo * docs: add feedback components TS demo * docs: add other components TS demo * chore(deps): add types * docs: unified demo code style * docs: fix lint error * docs: add demo TS type * docs: fix demo TS type * test: update snapshot * docs: fix TS demo * feat: update Rate character type * docs: fix lint error * feat: update Rate character type * feat: update Rate character type 2022-05-19 09:46:26 +08:00			`const onChange = (e: CheckboxChangeEvent) => {`
style: update code style to please lint 2016-02-17 18:04:42 +08:00			console.log(`checked = ${e.target.checked}`);
docs: feat components TS demo (#34742) * docs: add general components TS demo * docs: add layout components TS demo * docs: add navigation components TS demo * docs: add data entry components TS demo * chore(deps): add types for qs * docs: add data display TS demo * docs: add feedback components TS demo * docs: add other components TS demo * chore(deps): add types * docs: unified demo code style * docs: fix lint error * docs: add demo TS type * docs: fix demo TS type * test: update snapshot * docs: fix TS demo * feat: update Rate character type * docs: fix lint error * feat: update Rate character type * feat: update Rate character type 2022-05-19 09:46:26 +08:00			`};`
add checkbox 2015-07-15 15:19:24 +08:00
docs: feat components TS demo (#34742) * docs: add general components TS demo * docs: add layout components TS demo * docs: add navigation components TS demo * docs: add data entry components TS demo * chore(deps): add types for qs * docs: add data display TS demo * docs: add feedback components TS demo * docs: add other components TS demo * chore(deps): add types * docs: unified demo code style * docs: fix lint error * docs: add demo TS type * docs: fix demo TS type * test: update snapshot * docs: fix TS demo * feat: update Rate character type * docs: fix lint error * feat: update Rate character type * feat: update Rate character type 2022-05-19 09:46:26 +08:00			`const App: React.FC = () => <Checkbox onChange={onChange}>Checkbox</Checkbox>;`

			`export default App;`
:lipstick: prittier all files 2019-05-07 14:57:32 +08:00			```