logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.0
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

Checkbox

Collect user's choices.
Importimport { Checkbox } from "antd";
Sourcecomponents/checkbox
Docs
Edit this pageChangelog

Resources

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

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

PropertyDescriptionTypeDefaultVersion
autoFocusIf get focus when component mountedbooleanfalse
checkedSpecifies whether the checkbox is selectedbooleanfalse
defaultCheckedSpecifies the initial state: whether or not the checkbox is selectedbooleanfalse
disabledIf disable checkboxbooleanfalse
indeterminateThe indeterminate checked state of checkboxbooleanfalse
onChangeThe callback function that is triggered when the state changes(e: CheckboxChangeEvent) => void-
onBlurCalled when leaving the componentfunction()-
onFocusCalled when entering the componentfunction()-

Checkbox.Group

PropertyDescriptionTypeDefaultVersion
defaultValueDefault selected value(string | number)[][]
disabledIf disable all checkboxesbooleanfalse
nameThe name property of all input[type="checkbox"] childrenstring-
optionsSpecifies optionsstring[] | number[] | Option[][]
valueUsed for setting the currently selected value(string | number | boolean)[][]
titletitle of the optionstring-
classNameclassName of the optionstring-5.25.0
stylestyles of the optionReact.CSSProperties-
onChangeThe callback function that is triggered when the state changes(checkedValue: T[]) => void-
Option
typescript
interface Option {
label: string;
value: string;
disabled?: boolean;
}

Methods

Checkbox

NameDescriptionVersion
blur()Remove focus
focus()Get focus
nativeElementReturns the DOM node of the Checkbox5.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.

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

Basic usage of checkbox.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Controlled Checkbox

Communicated with other components.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Check all

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Disabled

Disabled checkbox.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Checkbox Group

Generate a group of checkboxes from an array.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Use with Grid

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code