logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
YouMindTRACTIANLobeHubCodeRabbit
6.4.5
  • Components Overview
  • Changelog
    v6.4.5
  • General
    • Button
    • FloatButton
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
    • Grid
    • Layout
    • Masonry
      6.0.0
    • Space
    • Splitter
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
    • 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
      DEPRECATED
    • Popover
    • QRCode
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
  • Other
    • Affix
    • App
    • BorderBeam
      6.4.0
    • ConfigProvider
    • Util
When To Use
Examples
Basic
Disabled
Controlled Checkbox
Checkbox Group
Check all
Use with Grid
Custom semantic dom styling
API
Methods
Semantic DOM
Design Token
FAQ
Why not work in Form.Item?

Checkbox

Collect user's choices.
Importimport { Checkbox } from 'antd';
GitHub
components/checkboxIssueOpen issues
Docs
Edit this pageLLMs.md
CascaderColorPicker

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
X
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
For Agents
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
WeaveFox logoWeaveFox-AI Development with WeaveFox 🦊
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

PropertyDescriptionTypeDefaultVersionGlobal Config
checkedSpecifies whether the checkbox is selectedbooleanfalse×
classNamesCustomize class for each semantic structure inside the component. Supports object or function.Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string>-6.0.0
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()-×
stylesCustomize inline style for each semantic structure inside the component. Supports object or function.Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties>-6.0.0

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

Semantic DOM

Design Token

Global TokenHow to use?
Token NameDescriptionTypeDefault Value
colorBgContainerContainer background color, e.g: default button, input box, etc. Be sure not to confuse this with `colorBgElevated`.string#ffffff
colorBgContainerDisabledControl the background color of container in disabled state.stringrgba(0,0,0,0.04)
colorBorderDefault border color, used to separate different elements, such as: form separator, card separator, etc.string#d9d9d9
colorPrimaryBrand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics.string#1677ff
colorPrimaryBorderThe stroke color under the main color gradient, used on the stroke of components such as Slider.string#91caff
colorPrimaryHoverHover state under the main color gradient.string#4096ff
colorTextDefault text color which comply with W3C standards, and this color is also the darkest neutral color.stringrgba(0,0,0,0.88)
colorTextDisabledControl the color of text in disabled state.stringrgba(0,0,0,0.25)
colorWhitePure white color don't changed by themestring#fff
borderRadiusSMSM size border radius, used in small size components, such as Button, Input, Select and other input components in small sizenumber4
controlInteractiveSizeControl the interactive size of control component.number16
fontFamilyThe font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics.string-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
fontSizeThe most widely used font size in the design system, from which the text gradient will be derived.number14
fontSizeLGLarge font sizenumber16
lineHeightLine height of text.number1.5714285714285714
lineTypeBorder style of base componentsstringsolid
lineWidthBorder width of base componentsnumber1
lineWidthBoldThe default line width of the outline class components, such as Button, Input, Select, etc.number2
lineWidthFocusControl the width of the line when the component is in focus state.number3
marginXSControl the margin of an element, with a small size.number8
motionDurationFastMotion speed, fast speed. Used for small element animation interaction.string0.1s
motionDurationMidMotion speed, medium speed. Used for medium element animation interaction.string0.2s
motionDurationSlowMotion speed, slow speed. Used for large element animation interaction.string0.3s
motionEaseInBackPreset motion curve.string
Cubic Bezier Visualizer
cubic-bezier(0.71, -0.46, 0.88, 0.6)External Link Icon
motionEaseOutBackPreset motion curve.string
Cubic Bezier Visualizer
cubic-bezier(0.12, 0.4, 0.29, 1.46)External Link Icon
paddingXSControl the extra small padding of the element.number8

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
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Controlled Checkbox

Communicated with other components.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Check all

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

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Custom semantic dom styling

You can customize the semantic dom style of Checkbox by passing objects/functions through classNames and styles.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
6.0.0
Disabled

Disabled checkbox.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Checkbox Group

Generate a group of checkboxes from an array.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Use with Grid

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

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon





  • root
    6.0.0
    Root element with inline-flex layout, baseline alignment, cursor style, reset styles and other basic checkbox container styles
  • icon
    6.0.0
    Checkbox icon element with size, direction, background, border, border-radius, transitions, and checked state checkmark styles
  • label
    6.0.0
    Label text element with padding and spacing styles relative to the checkbox