Ant Design

⌘ K

5.22.2

Checkbox

Collect user's choices.

Importimport{ Checkbox }from"antd";

Sourcecomponents/checkbox

Docs

Edit this page Changelog

Ant Design

⌘ K

5.22.2

Checkbox

Collect user's choices.

Importimport{ Checkbox }from"antd";

Sourcecomponents/checkbox

Docs

Edit this page Changelog

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

API

Common props ref：Common 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	(e: CheckboxChangeEvent) => void	-
onBlur	Called when leaving the component	function()	-
onFocus	Called when entering the component	function()	-

Checkbox Group

Property	Description	Type	Default
defaultValue	Default selected value	(string \| number)[]	[]
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 \| number \| boolean)[]	[]
onChange	The callback function that is triggered when the state changes	(checkedValue: T[]) => void	-

Option

interface Option {
  label: string;
  value: string;
  disabled?: boolean;
}

Methods

Checkbox

Name	Description	Version
blur()	Remove focus
focus()	Get focus
nativeElement	Returns the DOM node of the Checkbox	5.17.3

Design Token

Global TokenHow to use?

FAQ

Why not work in Form.Item?

Form.Item default bind value to value property, but Checkbox value property is checked. You can use valuePropName to change bind property.

<Form.Item name="fieldA" valuePropName="checked">
  <Checkbox />
</Form.Item>

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

API

Common props ref：Common 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	(e: CheckboxChangeEvent) => void	-
onBlur	Called when leaving the component	function()	-
onFocus	Called when entering the component	function()	-

Checkbox Group

Property	Description	Type	Default
defaultValue	Default selected value	(string \| number)[]	[]
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 \| number \| boolean)[]	[]
onChange	The callback function that is triggered when the state changes	(checkedValue: T[]) => void	-

Option

interface Option {
  label: string;
  value: string;
  disabled?: boolean;
}

Methods

Checkbox

Name	Description	Version
blur()	Remove focus
focus()	Get focus
nativeElement	Returns the DOM node of the Checkbox	5.17.3

Design Token

Global TokenHow to use?

FAQ

Why not work in Form.Item?

Form.Item default bind value to value property, but Checkbox value property is checked. You can use valuePropName to change bind property.

<Form.Item name="fieldA" valuePropName="checked">
  <Checkbox />
</Form.Item>

Basic

Basic usage of checkbox.

Controlled Checkbox

Communicated with other components.

Check all

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

Same line

customize lineWidth

测试自定义 lineWidth 的情况：https://github.com/ant-design/ant-design/issues/46307

Disabled

Disabled checkbox.

Checkbox Group

Generate a group of checkboxes from an array.

Use with Grid

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

Basic

Basic usage of checkbox.

Controlled Checkbox

Communicated with other components.

Check all

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

Same line

customize lineWidth

测试自定义 lineWidth 的情况：https://github.com/ant-design/ant-design/issues/46307

Disabled

Disabled checkbox.

Checkbox Group

Generate a group of checkboxes from an array.

Use with Grid

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

Checkbox

Checked-Enabled

Check all

ApplePearOrange

Bamboo

Little

Bamboo

Little

Bamboo

Little

Bamboo

Little

Aligned

ApplePearOrange