logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
YouMindTRACTIANLobeHub
6.4.3
  • 组件总览
  • 更新日志
    v6.4.3
  • 通用
    • Button按钮
    • FloatButton悬浮按钮
    • Icon图标
    • Typography排版
  • 布局
    • Divider分割线
    • Flex弹性布局
    • Grid栅格
    • Layout布局
    • Masonry瀑布流
      6.0.0
    • Space间距
    • Splitter分隔面板
  • 导航
    • Anchor锚点
    • Breadcrumb面包屑
    • Dropdown下拉菜单
    • Menu导航菜单
    • Pagination分页
    • Steps步骤条
    • Tabs标签页
  • 数据录入
    • AutoComplete自动完成
    • Cascader级联选择
    • Checkbox多选框
    • ColorPicker颜色选择器
    • DatePicker日期选择框
    • Form表单
    • Input输入框
    • InputNumber数字输入框
    • Mentions提及
    • Radio单选框
    • Rate评分
    • Select选择器
    • Slider滑动输入条
    • Switch开关
    • TimePicker时间选择框
    • Transfer穿梭框
    • TreeSelect树选择
    • Upload上传
  • 数据展示
    • Avatar头像
    • Badge徽标数
    • Calendar日历
    • Card卡片
    • Carousel走马灯
    • Collapse折叠面板
    • Descriptions描述列表
    • Empty空状态
    • Image图片
    • List列表
      废弃
    • Popover气泡卡片
    • QRCode二维码
    • Segmented分段控制器
    • Statistic统计数值
    • Table表格
    • Tag标签
    • Timeline时间轴
    • Tooltip文字提示
    • Tour漫游式引导
    • Tree树形控件
  • 反馈
    • Alert警告提示
    • Drawer抽屉
    • Message全局提示
    • Modal对话框
    • Notification通知提醒框
    • Popconfirm气泡确认框
    • Progress进度条
    • Result结果
    • Skeleton骨架屏
    • Spin加载中
    • Watermark水印
  • 其他
    • Affix固钉
    • App包裹组件
    • BorderBeam边框流光
      6.4.0
    • ConfigProvider全局化配置
    • Util工具类
何时使用
代码演示
基本用法
不可用
受控的 Checkbox
Checkbox 组
全选
布局
自定义语义结构的样式和类
API
方法
Semantic DOM
主题变量(Design Token)
FAQ
为什么在 Form.Item 下不能绑定数据?

Checkbox
多选框

收集用户的多项选择。
使用import { Checkbox } from 'antd';
反馈
components/checkbox提交问题待解决
文档
编辑此页LLMs.md
文档贡献者
    Cascader级联选择ColorPicker颜色选择器

    相关资源

    Ant Design X
    Ant Design Charts
    Ant Design Pro
    Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Web3
    Ant Design Landing-首页模板集
    Scaffolds-脚手架市场
    Umi-React 应用开发框架
    dumi-组件/文档研发工具
    qiankun-微前端框架
    Ant Motion-设计动效
    国内镜像站点 🇨🇳

    社区

    Awesome Ant Design
    Medium
    X
    yuque logoAnt Design 语雀专栏
    Ant Design 知乎专栏
    体验科技专栏
    seeconf logoSEE Conf-蚂蚁体验科技大会
    加入我们

    帮助

    GitHub
    更新日志
    常见问题
    报告 Bug
    议题
    讨论区
    StackOverflow
    SegmentFault

    Ant XTech logo更多产品

    yuque logo语雀-构建你的数字花园
    AntV logoAntV-数据可视化解决方案
    Egg logoEgg-企业级 Node.js 框架
    Kitchen logoKitchen-Sketch 工具集
    Galacean logoGalacean-互动图形解决方案
    WeaveFox logoWeaveFox-前端智能研发
    xtech logo蚂蚁体验科技
    主题编辑器
    Made with ❤ by
    蚂蚁集团和 Ant Design 开源社区
    loading

    何时使用

    • 在一组可选项中进行多项选择时;
    • 单独使用可以表示两种状态之间的切换,和 switch 类似。区别在于切换 switch 会直接触发状态改变,而 checkbox 一般用于状态标记,需要和提交操作配合。

    代码演示

    API

    通用属性参考:通用属性

    Checkbox

    参数说明类型默认值版本
    checked指定当前是否选中booleanfalse
    classNames用于自定义组件内部各语义化结构的 class,支持对象或函数Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string>-
    defaultChecked初始是否选中booleanfalse
    disabled失效状态booleanfalse
    indeterminate设置 indeterminate 状态,只负责样式控制booleanfalse
    onChange变化时的回调函数(e: CheckboxChangeEvent) => void-
    onBlur失去焦点时的回调function()-
    onFocus获得焦点时的回调function()-
    styles用于自定义组件内部各语义化结构的行内 style,支持对象或函数Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties>-

    Checkbox.Group

    参数说明类型默认值版本
    defaultValue默认选中的选项(string | number)[][]
    disabled整组失效booleanfalse
    nameCheckboxGroup 下所有 input[type="checkbox"] 的 name 属性string-
    options指定可选项string[] | number[] | Option[][]
    value指定选中的选项(string | number | boolean)[][]
    title选项的 titlestring-
    className选项的类名string-5.25.0
    style选项的样式React.CSSProperties-
    onChange变化时的回调函数(checkedValue: T[]) => void-
    Option
    typescript
    interface Option {
    label: string;
    value: string;
    disabled?: boolean;
    }

    方法

    Checkbox

    名称描述版本
    blur()移除焦点
    focus()获取焦点
    nativeElement返回 Checkbox 的 DOM 节点5.17.3

    Semantic DOM

    • root
      6.0.0
      根元素,包含行内 flex 布局、基线对齐、光标样式、重置样式等复选框容器的基础样式
    • icon
      6.0.0
      选中框元素,包含尺寸、方向、背景色、边框、圆角、过渡动画,以及选中状态的勾选标记样式
    • label
      6.0.0
      文本元素,包含文本的内边距和与复选框的间距样式

    主题变量(Design Token)

    全局 Token如何定制?
    Token 名称描述类型默认值
    colorBgContainer组件的容器背景色,例如:默认按钮、输入框等。务必不要将其与 `colorBgElevated` 混淆。string#ffffff
    colorBgContainerDisabled控制容器在禁用状态下的背景色。stringrgba(0,0,0,0.04)
    colorBorder默认使用的边框颜色, 用于分割不同的元素,例如:表单的分割线、卡片的分割线等。string#d9d9d9
    colorPrimary品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后,我们会自动帮你生成一套完整的色板,并赋予它们有效的设计语义string#1677ff
    colorPrimaryBorder主色梯度下的描边用色,用在 Slider 等组件的描边上。string#91caff
    colorPrimaryHover主色梯度下的悬浮态。string#4096ff
    colorText最深的文本色。为了符合W3C标准,默认的文本颜色使用了该色,同时这个颜色也是最深的中性色。stringrgba(0,0,0,0.88)
    colorTextDisabled控制禁用状态下的字体颜色。stringrgba(0,0,0,0.25)
    colorWhite不随主题变化的纯白色string#fff
    borderRadiusSMSM号圆角,用于组件小尺寸下的圆角,如 Button、Input、Select 等输入类控件在 small size 下的圆角number4
    controlInteractiveSize控制组件的交互大小。number16
    fontFamilyAnt Design 的字体家族中优先使用系统默认的界面字体,同时提供了一套利于屏显的备用字体库,来维护在不同平台以及浏览器的显示下,字体始终保持良好的易读性和可读性,体现了友好、稳定和专业的特性。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'
    fontSize设计系统中使用最广泛的字体大小,文本梯度也将基于该字号进行派生。number14
    fontSizeLG大号字体大小number16
    lineHeight文本行高number1.5714285714285714
    lineType用于控制组件边框、分割线等的样式,默认是实线stringsolid
    lineWidth用于控制组件边框、分割线等的宽度number1
    lineWidthBold描边类组件的默认线宽,如 Button、Input、Select 等输入类控件。number2
    lineWidthFocus控制线条的宽度,当组件处于聚焦态时。number3
    marginXS控制元素外边距,小尺寸。number8
    motionDurationFast动效播放速度,快速。用于小型元素动画交互string0.1s
    motionDurationMid动效播放速度,中速。用于中型元素动画交互string0.2s
    motionDurationSlow动效播放速度,慢速。用于大型元素如面板动画交互string0.3s
    motionEaseInBack预设动效曲率string
    Cubic Bezier Visualizer
    cubic-bezier(0.71, -0.46, 0.88, 0.6)External Link Icon
    motionEaseOutBack预设动效曲率string
    Cubic Bezier Visualizer
    cubic-bezier(0.12, 0.4, 0.29, 1.46)External Link Icon
    paddingXS控制元素的特小内间距。number8

    FAQ

    为什么在 Form.Item 下不能绑定数据?

    Form.Item 默认绑定值属性到 value 上,而 Checkbox 的值属性为 checked。你可以通过 valuePropName 来修改绑定的值属性。

    tsx
    <Form.Item name="fieldA" valuePropName="checked">
    <Checkbox />
    </Form.Item>
    基本用法

    简单的 checkbox。

    CodeSandbox Icon
    Hitu Icon
    codepen icon
    External Link Icon
    Expand Icon

    受控的 Checkbox

    联动 checkbox。

    CodeSandbox Icon
    Hitu Icon
    codepen icon
    External Link Icon
    Expand Icon
    全选

    在实现全选效果时,你可能会用到 indeterminate 属性。

    CodeSandbox Icon
    Hitu Icon
    codepen icon
    External Link Icon
    Expand Icon
    自定义语义结构的样式和类

    通过 classNames 和 styles 传入对象/函数可以自定义 Checkbox 的语义化结构样式。

    CodeSandbox Icon
    Hitu Icon
    codepen icon
    External Link Icon
    Expand Icon
    6.0.0
    不可用

    checkbox 不可用。

    CodeSandbox Icon
    Hitu Icon
    codepen icon
    External Link Icon
    Expand Icon




    Checkbox 组

    方便的从数组生成 Checkbox 组。

    CodeSandbox Icon
    codepen icon
    External Link Icon
    Expand Icon
    布局

    Checkbox.Group 内嵌 Checkbox 并与 Grid 组件一起使用,可以实现灵活的布局。

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