logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.11.5
  • Components Overview
  • General
    • Button
    • FloatButtonNew
    • Icon
    • Typography
  • Layout
    • Divider
    • FlexNew
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • 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
    • QRCodeNew
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • TourNew
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
  • Other
    • Affix
    • AppNew
    • ConfigProvider
When To Use
Examples
Basic
Disabled
Controlled Checkbox
Checkbox Group
Check all
Use with Grid
API
Methods
Design Token
FAQ
Why not work in Form.Item?

Checkbox

    • CascaderColorPicker

    Resources

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

    Community

    Awesome Ant Design
    Medium
    Twitter
    yuqueAnt Design in YuQue
    Ant Design in Zhihu
    Experience Cloud Blog
    seeconfSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTechMore Products

    yuqueYuQue-Document Collaboration Platform
    AntVAntV-Data Visualization
    EggEgg-Enterprise Node.js Framework
    kitchenKitchen-Sketch Toolkit
    GalaceanGalacean-Interactive Graphics Solution
    xtechAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Ant Design Community

    Checkbox component.

    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-

    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)[][]
    onChangeThe callback function that is triggered when the state changes(checkedValue: CheckboxValueType[]) => void-
    Option
    interface Option {
      label: string;
      value: string;
      disabled?: boolean;
    }

    Methods

    Checkbox

    NameDescriptionVersion
    blur()Remove focus
    focus()Get focus

    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.

    expand codeexpand code

    Controlled Checkbox

    Communicated with other components.

    expand codeexpand code
    Check all

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

    expand codeexpand code


    Disabled

    Disabled checkbox.

    expand codeexpand code




    Checkbox Group

    Generate a group of checkboxes from an array.

    expand codeexpand code
    Use with Grid

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

    expand codeexpand code