logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
YouMindTRACTIANLobeHub
6.4.3
  • Components Overview
  • Changelog
    v6.4.3
  • 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
contributors
    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
    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

    PropertyDescriptionTypeDefaultVersion
    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>-
    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>-

    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