logoNamu Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
1.0.0
  • Components Overview
  • General
    • Button
    • FloatButtonNew
    • Icon
    • Typography
  • Layout
    • Divider
    • 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

Checkbox

    • CascaderColorPicker

    Resources

    Namu Design Charts
    Namu Design Pro
    Namu Design Pro Components
    Namu Design Mobile
    Namu Design Mini
    Namu 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 Namu Design
    Medium
    Twitter
    yuqueNamu Design in YuQue
    Namu 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
    xtechAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Namu 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

    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

    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 Token