在 refine 项目中使用 Material UI Checkbox从基础用法、表单集成到无障碍实践【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine导读本文围绕 Material UIMUI的Checkbox组件展开以 refine 开源仓库为实例载体完整讲解复选框组件的导入方式、size/color/icon等常用 props、FormGroup分组、indeterminate三态、表单校验与 styled 高级定制并结合 refine 内置 Material UI 组件包refinedev/mui中“记住我”等真实业务场景演示如何将 Checkbox 与 react-hook-form、refine 的useForm无缝集成。读完本文你将掌握 MUI Checkbox 从展示到可用的完整链路并能在 refine 的登录页、创建/编辑表单中直接落地。什么是 Material UI CheckboxMaterial UI Checkbox 是一种表单输入组件允许用户从一组给定的选项中选择一个或多个选项。它是 Material UI 组件库的一部分为 React 应用提供了现代化、可访问、可高度定制的复选框实现。在 refine 的仓库中Material UI 是一等公民packages/mui目录即refinedev/mui包提供了ThemedLayoutV2、AuthPage、useDataGrid、useAutocomplete等与 Material UI 深度绑定的组件与 HookCheckbox 正是其中表单与认证页面中频繁出现的基础输入件。关键特性与优势易于集成单条 import 语句即可使用无障碍内置 ARIA 支持与键盘导航可定制通过 props 与主题theme实现丰富的样式定制表单友好与主流表单库无缝协作状态管理同时支持受控与非受控组件响应式适用于所有尺寸的设备TypeScript 支持包含完整类型定义。一个复选框Checkbox本质上是“当用户选中时表示某个特定功能或选项已被启用”的小方框。Material UI 把这一常用组件封装成开箱即用的形态并允许你按照项目需求自由定制。快速开始导入与基本用法Material UI Checkbox 允许用户从选项列表中选择一个或多个选项用于回答某个问题或表达某个偏好也可以用作开关来切换选项。当存在多个可选项时用复选框替代 on/off 开关可以节省空间。下面是最基本的导入与使用方式import * as React from react; import Checkbox from mui/material/Checkbox; export default function Checkboxes() { return ( div style{{ margin: 25% }} Checkbox defaultChecked / Checkbox / Checkbox disabled / Checkbox disabled checked / /div ); }defaultChecked非受控模式下设置初始勾选状态disabled禁用该复选框同时使用disabled checked可以渲染一个“已勾选但不可操作”的复选框。定制你的 Material UI CheckboxMUI Checkbox 的灵活性来源于丰富的 props 与配套组件。下面逐一演示常用定制手段。添加标签FormControlLabelFormControlLabel组件负责给 Checkbox 附加文字标签同时保证点击标签也能切换勾选状态import * as React from react; import FormGroup from mui/material/FormGroup; import FormControlLabel from mui/material/FormControlLabel; import Checkbox from mui/material/Checkbox; export default function CheckboxLabels() { return ( FormGroup FormControlLabel control{Checkbox defaultChecked /} labelLabel / FormControlLabel disabled control{Checkbox /} labelDisabled / /FormGroup ); }控制尺寸size propsizeprop 用于设定组件尺寸可取值small小、medium默认等。如需更精细的控制可以直接通过sx修改内部图标的字号import * as React from react; import Checkbox from mui/material/Checkbox; export default function SizeCheckboxes() { return ( div style{{ margin: 25% }} Checkbox defaultChecked sizesmall / Checkbox defaultChecked / Checkbox defaultChecked sx{{ .MuiSvgIcon-root: { fontSize: 28 } }} / /div ); }控制颜色color prop通过colorprop 可以快速切换主题色常用取值包括primary默认、secondary、success、error、default等import * as React from react; import Checkbox from mui/material/Checkbox; export default function BasicButtonGroup() { return ( div div classNamehead style{{ width: fit-content, margin: auto }} h1 style{{ color: green }}Checkbox colors/h1 strongReact Material UI Checkbox API/strong /div div style{{ width: fit-content, margin: auto }} Checkbox colorsecondary / Checkbox colorsuccess / Checkbox colordefault / Checkbox colorprimary / /div /div ); }标签位置labelPlacementFormControlLabel的labelPlacementprop 可把标签放在复选框的顶部top、底部bottom、起始start或末尾endimport * as React from react; import Checkbox from mui/material/Checkbox; import FormGroup from mui/material/FormGroup; import FormControlLabel from mui/material/FormControlLabel; import FormControl from mui/material/FormControl; import FormLabel from mui/material/FormLabel; export default function FormControlLabelPosition() { return ( FormControl componentfieldset FormLabel componentlegendLabel placement/FormLabel FormGroup aria-labelposition row FormControlLabel valuetop control{Checkbox /} labelTop labelPlacementtop / FormControlLabel valuestart control{Checkbox /} labelStart labelPlacementstart / FormControlLabel valuebottom control{Checkbox /} labelBottom labelPlacementbottom / FormControlLabel valueend control{Checkbox /} labelEnd labelPlacementend / /FormGroup /FormControl ); }自定义图标Checkbox 可以完全替换为自定义图标——icon定义未选中态图标checkedIcon定义选中态图标。借助mui/icons-material可以轻松做出“收藏”“推荐”等心形/推荐样式import * as React from react; import Checkbox from mui/material/Checkbox; import FavoriteBorder from mui/icons-material/FavoriteBorder; import Favorite from mui/icons-material/Favorite; import RecommendBorderIcon from mui/icons-material/Recommend; import RecommendIcon from mui/icons-material/Recommend; export default function IconCheckboxes() { return ( div style{{ margin: 25% }} Checkbox icon{FavoriteBorder /} checkedIcon{Favorite /} / Checkbox icon{RecommendBorderIcon /} checkedIcon{RecommendIcon /} / /div ); }其他实用功能FormGroup分组管理选择控件FormGroup是用于对多个选择控件进行分组的便捷包装器。下面的例子用受控状态管理三个科目复选框并通过FormHelperText给出辅助提示右侧还演示了required与error组合当勾选数量不等于 2 时显示错误态import * as React from react; import Box from mui/material/Box; import FormLabel from mui/material/FormLabel; import FormControl from mui/material/FormControl; import FormGroup from mui/material/FormGroup; import FormControlLabel from mui/material/FormControlLabel; import FormHelperText from mui/material/FormHelperText; import Checkbox from mui/material/Checkbox; export default function CheckboxesGroup() { const [state, setState] React.useState({ mathematics: true, physics: false, chemistry: false, }); const handleChange (event: React.ChangeEventHTMLInputElement) { setState({ ...state, [event.target.name]: event.target.checked, }); }; const { mathematics, physics, chemistry } state; const error [mathematics, physics, chemistry].filter((v) v).length ! 2; return ( div style{{ margin: 25% }} Box sx{{ display: flex }} FormControl sx{{ m: 3 }} componentfieldset variantstandard FormLabel componentlegendChoose Subject/FormLabel FormGroup FormControlLabel control{ Checkbox checked{mathematics} onChange{handleChange} namemathematics / } labelmathematics / FormControlLabel control{ Checkbox checked{physics} onChange{handleChange} namephysics / } labelphysics / FormControlLabel control{ Checkbox checked{chemistry} onChange{handleChange} namechemistry / } labelchemistry / /FormGroup FormHelperTextBe careful/FormHelperText /FormControl FormControl required error{error} componentfieldset sx{{ m: 3 }} variantstandard FormLabel componentlegendPick two/FormLabel FormGroup FormControlLabel control{ Checkbox checked{mathematics} onChange{handleChange} namemathematics / } labelmathematics / FormControlLabel control{ Checkbox checked{physics} onChange{handleChange} namephysics / } labelPhysics / FormControlLabel control{ Checkbox checked{chemistry} onChange{handleChange} namechemistry / } labelChemistry / /FormGroup FormHelperTextchoose correctly/FormHelperText /FormControl /Box /div ); }要点这里使用event.target.name作为状态 key 更新对应字段FormControl error{error}会把错误态红色文字透传给内部的FormHelperText与FormControlLabel。Indeterminate三态复选框一个复选框可以处于三种状态已勾选、未勾选、不确定indeterminate。indeterminateprop 决定组件是否处于“未知/半选”状态常用于“全选/子项”的树形结构父级勾选时同步所有子项子项部分勾选时父级显示不确定态。import * as React from react; import Box from mui/material/Box; import Checkbox from mui/material/Checkbox; import FormControlLabel from mui/material/FormControlLabel; export default function IndeterminateCheckbox() { const [checked, setChecked] React.useState([true, false]); const handleChange1 (event: React.ChangeEventHTMLInputElement) { setChecked([event.target.checked, event.target.checked]); }; const handleChange2 (event: React.ChangeEventHTMLInputElement) { setChecked([event.target.checked, checked[1]]); }; const handleChange3 (event: React.ChangeEventHTMLInputElement) { setChecked([checked[0], event.target.checked]); }; const children ( Box sx{{ display: flex, flexDirection: column, ml: 3 }} FormControlLabel labelFirst Child control{Checkbox checked{checked[0]} onChange{handleChange2} /} / FormControlLabel labelSecond Child control{Checkbox checked{checked[1]} onChange{handleChange3} /} / /Box ); return ( div FormControlLabel labelParent control{ Checkbox checked{checked[0] checked[1]} indeterminate{checked[0] ! checked[1]} onChange{handleChange1} / } / {children} /div ); }逻辑说明父级checked为两个子项做“与”运算全选才显示勾选父级indeterminate为两个子项做“异或”比较一个勾选一个未勾选时显示不确定态父级onChange把勾选状态同步给两个子项实现“全选/全不选”。表单错误处理与验证在表单中处理复选框错误至关重要。下面是最基础的“必须勾选才能提交”校验模式import * as React from react; import { Checkbox, FormControlLabel, FormHelperText, FormControl, } from mui/material; export default function ValidationExample() { const [checked, setChecked] React.useState(false); const [error, setError] React.useState(false); const handleSubmit (event) { event.preventDefault(); if (!checked) { setError(true); return; } setError(false); // Handle form submission }; return ( form onSubmit{handleSubmit} FormControl error{error} FormControlLabel control{ Checkbox checked{checked} onChange{(e) setChecked(e.target.checked)} / } labelI accept the terms and conditions / {error ( FormHelperTextYou must accept the terms to continue/FormHelperText )} /FormControl /form ); }常见校验场景还包括必填字段校验不勾选不允许提交如服务条款最小选择数量要求从分组中至少选择 N 项见上文 “Pick two” 示例分组校验规则对一组复选框整体做条件判断并展示错误信息。结合 react-hook-formrefine 中的 register 模式在 refine 生态中更常见的做法是让 Checkbox 与 refinedev/react-hook-form 的register配合实现无状态管理代码的表单绑定。refine 官方 Material UI 主题示例examples/theme-material-ui-demo中有一个独立的 “Remember me” 组件examples/theme-material-ui-demo/src/components/remember-me/index.tsximport Checkbox from mui/material/Checkbox; import FormControlLabel from mui/material/FormControlLabel; import { useFormContext } from react-hook-form; export const RememeberMe () { const { register } useFormContext(); return ( FormControlLabel sx{{ span: { fontSize: 12px, }, }} control{ Checkbox sizesmall idrememberMe {...register(rememberMe)} / } labelRemember me / ); };关键点useFormContext()来自 react-hook-form用于在子组件中访问表单实例{...register(rememberMe)}把字段名、onChange、onBlur、ref等自动绑定到 Checkbox 底层的input勾选状态直接进入表单状态sizesmall控制尺寸idrememberMe便于 label 关联。同样的模式也出现在 refine 的博客示例中例如 examples/blog-refine-mui/src/pages/categories/create.tsx 使用refinedev/react-hook-form的useFormregister构建创建表单对于需要显式受控的场景则配合 react-hook-form 的Controller使用。高级定制使用 styled API 定制样式通过mui/material/styles的styled可以创建专属样式的 Checkbox利用 CSS 选择器覆盖不同状态import { styled } from mui/material/styles; import Checkbox from mui/material/Checkbox; const CustomCheckbox styled(Checkbox) .MuiCheckbox-root { color: #666; } .Mui-checked { color: #2196f3; } ; export default function StyledExample() { return CustomCheckbox defaultChecked /; }.MuiCheckbox-root覆盖组件根元素默认/未勾选颜色.Mui-checked覆盖勾选态颜色。自定义图标组合在样式化基础上叠加自定义图标可以做出品牌化的勾选反馈import FavoriteIcon from mui/icons-material/Favorite; import FavoriteBorderIcon from mui/icons-material/FavoriteBorder; export default function CustomIconExample() { return ( Checkbox icon{FavoriteBorderIcon /} checkedIcon{FavoriteIcon /} sx{{ color: pink }} / ); }这些定制手段让你能够匹配应用的设计系统品牌色、圆角、字体创造独特的视觉元素心形、推荐、评分图标通过自定义交互提升用户体验。何时使用 Checkbox与 Radio、Switch 的取舍在应用开发中为“选项列表”选择正确的控件组件直接影响交互清晰度。Checkbox vs Radio单选按钮Radio 按钮适用于用户必须二选一、且选项不能同时为真的场景。点击一个未选中的单选按钮会取消同组中之前选中的其他按钮。Checkbox适用于用户可以选择两个或更多选项的场景。勾选其中一个复选框不会取消同组其他复选框。独立复选框表示用户可启用或禁用的单一选项如“订阅新闻邮件”。Checkbox vs Switch开关开关Switch是模拟物理开关如电灯开关的切换按钮用户点击开关即完成“选择 执行”两个动作而复选框只是选中一个选项通常还需要借助另一个控件来完成执行。选择时应基于使用语境而非功能本身场景推荐控件定义的设置需要确认动作后才显示结果Checkbox设置需要 on/off 或 show/hide 切换来直接显示结果Switch更改生效前需要用户执行额外步骤Checkbox需要用户立即执行、无需复查或确认的动作Switch用户需要从相关选项列表中选择一个或多个Checkbox用户在相互独立的特性或行为间切换Switch只有一个二元的是/否选项Checkbox需要单一选择并提供两个选项做开/关决策Switch实战用 Checkbox 构建联系表单 UI把前面学到的内容组合起来用 Checkbox 作为独立组件构建一个简单的联系表单姓名、邮箱、留言 订阅选项import * as React from react; import FormGroup from mui/material/FormGroup; import FormControlLabel from mui/material/FormControlLabel; import Checkbox from mui/material/Checkbox; export default function TransitionsTooltips() { return ( section classNamelogin div classNameloginContainer labelName/label input typetext autoFocus required / labelEmail/label input typetext required / labelComment or Message/label textarea placeholderEnter comment here/textarea h3 style{{ background: none }}Stay connected/h3 FormGroup style{{ background: none }} FormControlLabel control{Checkbox defaultChecked /} labelSign Up for our Newsletter / /FormGroup div classNamebtnContainer buttonSubmit/button /div /div /section ); }这里defaultChecked让“订阅新闻邮件”默认勾选用户可随时取消在真实业务中可以将该 Checkbox 接入register(subscribe)让勾选状态随表单一起提交。Material UI Checkbox 可访问性包括复选框、单选按钮、开关在内的所有表单控件通常都应该有标签。大多数情况下使用FormControlLabel内部渲染label即可。当无法使用可见标签时可以通过inputProps给底层输入元素补充无障碍属性例如aria-label、aria-labelledby和titleCheckbox valuecheckedA inputProps{{ aria-label: Checkbox A, }} /在 refine 生态中可访问性同样是内置组件的基本要求refine 的refinedev/mui登录页内置 “Remember me” Checkbox见 packages/mui/src/components/pages/auth/components/login/index.tsx它默认用FormControlLabel包裹、并支持 i18n 翻译pages.login.buttons.rememberMe同时该字段可通过rememberMeprop 完全自定义替换。更多细节可参考 Material UI Auth Page 文档。总结Material UI Checkbox 是一个“小身材、大能力”的表单组件通过size、color、icon/checkedIcon、labelPlacement等 props 可以快速适配界面风格FormGroup与indeterminate支撑复杂的分组与树形选择结合FormControl/FormHelperText可实现完整的错误态展示而在 refine 应用中与 react-hook-form 的register或Controller组合即可把复选框状态无缝纳入useForm的表单数据流。无论是 refine 内置登录页的“记住我”还是业务表单中的订阅、多选、全选场景掌握上述用法都能让你写出更清晰、更健壮、更无障碍的表单交互。【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 在 refine 项目中使用 Material UI Checkbox：从基础用法、表单集成到无障碍实践
在 refine 项目中使用 Material UI Checkbox从基础用法、表单集成到无障碍实践【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine导读本文围绕 Material UIMUI的Checkbox组件展开以 refine 开源仓库为实例载体完整讲解复选框组件的导入方式、size/color/icon等常用 props、FormGroup分组、indeterminate三态、表单校验与 styled 高级定制并结合 refine 内置 Material UI 组件包refinedev/mui中“记住我”等真实业务场景演示如何将 Checkbox 与 react-hook-form、refine 的useForm无缝集成。读完本文你将掌握 MUI Checkbox 从展示到可用的完整链路并能在 refine 的登录页、创建/编辑表单中直接落地。什么是 Material UI CheckboxMaterial UI Checkbox 是一种表单输入组件允许用户从一组给定的选项中选择一个或多个选项。它是 Material UI 组件库的一部分为 React 应用提供了现代化、可访问、可高度定制的复选框实现。在 refine 的仓库中Material UI 是一等公民packages/mui目录即refinedev/mui包提供了ThemedLayoutV2、AuthPage、useDataGrid、useAutocomplete等与 Material UI 深度绑定的组件与 HookCheckbox 正是其中表单与认证页面中频繁出现的基础输入件。关键特性与优势易于集成单条 import 语句即可使用无障碍内置 ARIA 支持与键盘导航可定制通过 props 与主题theme实现丰富的样式定制表单友好与主流表单库无缝协作状态管理同时支持受控与非受控组件响应式适用于所有尺寸的设备TypeScript 支持包含完整类型定义。一个复选框Checkbox本质上是“当用户选中时表示某个特定功能或选项已被启用”的小方框。Material UI 把这一常用组件封装成开箱即用的形态并允许你按照项目需求自由定制。快速开始导入与基本用法Material UI Checkbox 允许用户从选项列表中选择一个或多个选项用于回答某个问题或表达某个偏好也可以用作开关来切换选项。当存在多个可选项时用复选框替代 on/off 开关可以节省空间。下面是最基本的导入与使用方式import * as React from react; import Checkbox from mui/material/Checkbox; export default function Checkboxes() { return ( div style{{ margin: 25% }} Checkbox defaultChecked / Checkbox / Checkbox disabled / Checkbox disabled checked / /div ); }defaultChecked非受控模式下设置初始勾选状态disabled禁用该复选框同时使用disabled checked可以渲染一个“已勾选但不可操作”的复选框。定制你的 Material UI CheckboxMUI Checkbox 的灵活性来源于丰富的 props 与配套组件。下面逐一演示常用定制手段。添加标签FormControlLabelFormControlLabel组件负责给 Checkbox 附加文字标签同时保证点击标签也能切换勾选状态import * as React from react; import FormGroup from mui/material/FormGroup; import FormControlLabel from mui/material/FormControlLabel; import Checkbox from mui/material/Checkbox; export default function CheckboxLabels() { return ( FormGroup FormControlLabel control{Checkbox defaultChecked /} labelLabel / FormControlLabel disabled control{Checkbox /} labelDisabled / /FormGroup ); }控制尺寸size propsizeprop 用于设定组件尺寸可取值small小、medium默认等。如需更精细的控制可以直接通过sx修改内部图标的字号import * as React from react; import Checkbox from mui/material/Checkbox; export default function SizeCheckboxes() { return ( div style{{ margin: 25% }} Checkbox defaultChecked sizesmall / Checkbox defaultChecked / Checkbox defaultChecked sx{{ .MuiSvgIcon-root: { fontSize: 28 } }} / /div ); }控制颜色color prop通过colorprop 可以快速切换主题色常用取值包括primary默认、secondary、success、error、default等import * as React from react; import Checkbox from mui/material/Checkbox; export default function BasicButtonGroup() { return ( div div classNamehead style{{ width: fit-content, margin: auto }} h1 style{{ color: green }}Checkbox colors/h1 strongReact Material UI Checkbox API/strong /div div style{{ width: fit-content, margin: auto }} Checkbox colorsecondary / Checkbox colorsuccess / Checkbox colordefault / Checkbox colorprimary / /div /div ); }标签位置labelPlacementFormControlLabel的labelPlacementprop 可把标签放在复选框的顶部top、底部bottom、起始start或末尾endimport * as React from react; import Checkbox from mui/material/Checkbox; import FormGroup from mui/material/FormGroup; import FormControlLabel from mui/material/FormControlLabel; import FormControl from mui/material/FormControl; import FormLabel from mui/material/FormLabel; export default function FormControlLabelPosition() { return ( FormControl componentfieldset FormLabel componentlegendLabel placement/FormLabel FormGroup aria-labelposition row FormControlLabel valuetop control{Checkbox /} labelTop labelPlacementtop / FormControlLabel valuestart control{Checkbox /} labelStart labelPlacementstart / FormControlLabel valuebottom control{Checkbox /} labelBottom labelPlacementbottom / FormControlLabel valueend control{Checkbox /} labelEnd labelPlacementend / /FormGroup /FormControl ); }自定义图标Checkbox 可以完全替换为自定义图标——icon定义未选中态图标checkedIcon定义选中态图标。借助mui/icons-material可以轻松做出“收藏”“推荐”等心形/推荐样式import * as React from react; import Checkbox from mui/material/Checkbox; import FavoriteBorder from mui/icons-material/FavoriteBorder; import Favorite from mui/icons-material/Favorite; import RecommendBorderIcon from mui/icons-material/Recommend; import RecommendIcon from mui/icons-material/Recommend; export default function IconCheckboxes() { return ( div style{{ margin: 25% }} Checkbox icon{FavoriteBorder /} checkedIcon{Favorite /} / Checkbox icon{RecommendBorderIcon /} checkedIcon{RecommendIcon /} / /div ); }其他实用功能FormGroup分组管理选择控件FormGroup是用于对多个选择控件进行分组的便捷包装器。下面的例子用受控状态管理三个科目复选框并通过FormHelperText给出辅助提示右侧还演示了required与error组合当勾选数量不等于 2 时显示错误态import * as React from react; import Box from mui/material/Box; import FormLabel from mui/material/FormLabel; import FormControl from mui/material/FormControl; import FormGroup from mui/material/FormGroup; import FormControlLabel from mui/material/FormControlLabel; import FormHelperText from mui/material/FormHelperText; import Checkbox from mui/material/Checkbox; export default function CheckboxesGroup() { const [state, setState] React.useState({ mathematics: true, physics: false, chemistry: false, }); const handleChange (event: React.ChangeEventHTMLInputElement) { setState({ ...state, [event.target.name]: event.target.checked, }); }; const { mathematics, physics, chemistry } state; const error [mathematics, physics, chemistry].filter((v) v).length ! 2; return ( div style{{ margin: 25% }} Box sx{{ display: flex }} FormControl sx{{ m: 3 }} componentfieldset variantstandard FormLabel componentlegendChoose Subject/FormLabel FormGroup FormControlLabel control{ Checkbox checked{mathematics} onChange{handleChange} namemathematics / } labelmathematics / FormControlLabel control{ Checkbox checked{physics} onChange{handleChange} namephysics / } labelphysics / FormControlLabel control{ Checkbox checked{chemistry} onChange{handleChange} namechemistry / } labelchemistry / /FormGroup FormHelperTextBe careful/FormHelperText /FormControl FormControl required error{error} componentfieldset sx{{ m: 3 }} variantstandard FormLabel componentlegendPick two/FormLabel FormGroup FormControlLabel control{ Checkbox checked{mathematics} onChange{handleChange} namemathematics / } labelmathematics / FormControlLabel control{ Checkbox checked{physics} onChange{handleChange} namephysics / } labelPhysics / FormControlLabel control{ Checkbox checked{chemistry} onChange{handleChange} namechemistry / } labelChemistry / /FormGroup FormHelperTextchoose correctly/FormHelperText /FormControl /Box /div ); }要点这里使用event.target.name作为状态 key 更新对应字段FormControl error{error}会把错误态红色文字透传给内部的FormHelperText与FormControlLabel。Indeterminate三态复选框一个复选框可以处于三种状态已勾选、未勾选、不确定indeterminate。indeterminateprop 决定组件是否处于“未知/半选”状态常用于“全选/子项”的树形结构父级勾选时同步所有子项子项部分勾选时父级显示不确定态。import * as React from react; import Box from mui/material/Box; import Checkbox from mui/material/Checkbox; import FormControlLabel from mui/material/FormControlLabel; export default function IndeterminateCheckbox() { const [checked, setChecked] React.useState([true, false]); const handleChange1 (event: React.ChangeEventHTMLInputElement) { setChecked([event.target.checked, event.target.checked]); }; const handleChange2 (event: React.ChangeEventHTMLInputElement) { setChecked([event.target.checked, checked[1]]); }; const handleChange3 (event: React.ChangeEventHTMLInputElement) { setChecked([checked[0], event.target.checked]); }; const children ( Box sx{{ display: flex, flexDirection: column, ml: 3 }} FormControlLabel labelFirst Child control{Checkbox checked{checked[0]} onChange{handleChange2} /} / FormControlLabel labelSecond Child control{Checkbox checked{checked[1]} onChange{handleChange3} /} / /Box ); return ( div FormControlLabel labelParent control{ Checkbox checked{checked[0] checked[1]} indeterminate{checked[0] ! checked[1]} onChange{handleChange1} / } / {children} /div ); }逻辑说明父级checked为两个子项做“与”运算全选才显示勾选父级indeterminate为两个子项做“异或”比较一个勾选一个未勾选时显示不确定态父级onChange把勾选状态同步给两个子项实现“全选/全不选”。表单错误处理与验证在表单中处理复选框错误至关重要。下面是最基础的“必须勾选才能提交”校验模式import * as React from react; import { Checkbox, FormControlLabel, FormHelperText, FormControl, } from mui/material; export default function ValidationExample() { const [checked, setChecked] React.useState(false); const [error, setError] React.useState(false); const handleSubmit (event) { event.preventDefault(); if (!checked) { setError(true); return; } setError(false); // Handle form submission }; return ( form onSubmit{handleSubmit} FormControl error{error} FormControlLabel control{ Checkbox checked{checked} onChange{(e) setChecked(e.target.checked)} / } labelI accept the terms and conditions / {error ( FormHelperTextYou must accept the terms to continue/FormHelperText )} /FormControl /form ); }常见校验场景还包括必填字段校验不勾选不允许提交如服务条款最小选择数量要求从分组中至少选择 N 项见上文 “Pick two” 示例分组校验规则对一组复选框整体做条件判断并展示错误信息。结合 react-hook-formrefine 中的 register 模式在 refine 生态中更常见的做法是让 Checkbox 与 refinedev/react-hook-form 的register配合实现无状态管理代码的表单绑定。refine 官方 Material UI 主题示例examples/theme-material-ui-demo中有一个独立的 “Remember me” 组件examples/theme-material-ui-demo/src/components/remember-me/index.tsximport Checkbox from mui/material/Checkbox; import FormControlLabel from mui/material/FormControlLabel; import { useFormContext } from react-hook-form; export const RememeberMe () { const { register } useFormContext(); return ( FormControlLabel sx{{ span: { fontSize: 12px, }, }} control{ Checkbox sizesmall idrememberMe {...register(rememberMe)} / } labelRemember me / ); };关键点useFormContext()来自 react-hook-form用于在子组件中访问表单实例{...register(rememberMe)}把字段名、onChange、onBlur、ref等自动绑定到 Checkbox 底层的input勾选状态直接进入表单状态sizesmall控制尺寸idrememberMe便于 label 关联。同样的模式也出现在 refine 的博客示例中例如 examples/blog-refine-mui/src/pages/categories/create.tsx 使用refinedev/react-hook-form的useFormregister构建创建表单对于需要显式受控的场景则配合 react-hook-form 的Controller使用。高级定制使用 styled API 定制样式通过mui/material/styles的styled可以创建专属样式的 Checkbox利用 CSS 选择器覆盖不同状态import { styled } from mui/material/styles; import Checkbox from mui/material/Checkbox; const CustomCheckbox styled(Checkbox) .MuiCheckbox-root { color: #666; } .Mui-checked { color: #2196f3; } ; export default function StyledExample() { return CustomCheckbox defaultChecked /; }.MuiCheckbox-root覆盖组件根元素默认/未勾选颜色.Mui-checked覆盖勾选态颜色。自定义图标组合在样式化基础上叠加自定义图标可以做出品牌化的勾选反馈import FavoriteIcon from mui/icons-material/Favorite; import FavoriteBorderIcon from mui/icons-material/FavoriteBorder; export default function CustomIconExample() { return ( Checkbox icon{FavoriteBorderIcon /} checkedIcon{FavoriteIcon /} sx{{ color: pink }} / ); }这些定制手段让你能够匹配应用的设计系统品牌色、圆角、字体创造独特的视觉元素心形、推荐、评分图标通过自定义交互提升用户体验。何时使用 Checkbox与 Radio、Switch 的取舍在应用开发中为“选项列表”选择正确的控件组件直接影响交互清晰度。Checkbox vs Radio单选按钮Radio 按钮适用于用户必须二选一、且选项不能同时为真的场景。点击一个未选中的单选按钮会取消同组中之前选中的其他按钮。Checkbox适用于用户可以选择两个或更多选项的场景。勾选其中一个复选框不会取消同组其他复选框。独立复选框表示用户可启用或禁用的单一选项如“订阅新闻邮件”。Checkbox vs Switch开关开关Switch是模拟物理开关如电灯开关的切换按钮用户点击开关即完成“选择 执行”两个动作而复选框只是选中一个选项通常还需要借助另一个控件来完成执行。选择时应基于使用语境而非功能本身场景推荐控件定义的设置需要确认动作后才显示结果Checkbox设置需要 on/off 或 show/hide 切换来直接显示结果Switch更改生效前需要用户执行额外步骤Checkbox需要用户立即执行、无需复查或确认的动作Switch用户需要从相关选项列表中选择一个或多个Checkbox用户在相互独立的特性或行为间切换Switch只有一个二元的是/否选项Checkbox需要单一选择并提供两个选项做开/关决策Switch实战用 Checkbox 构建联系表单 UI把前面学到的内容组合起来用 Checkbox 作为独立组件构建一个简单的联系表单姓名、邮箱、留言 订阅选项import * as React from react; import FormGroup from mui/material/FormGroup; import FormControlLabel from mui/material/FormControlLabel; import Checkbox from mui/material/Checkbox; export default function TransitionsTooltips() { return ( section classNamelogin div classNameloginContainer labelName/label input typetext autoFocus required / labelEmail/label input typetext required / labelComment or Message/label textarea placeholderEnter comment here/textarea h3 style{{ background: none }}Stay connected/h3 FormGroup style{{ background: none }} FormControlLabel control{Checkbox defaultChecked /} labelSign Up for our Newsletter / /FormGroup div classNamebtnContainer buttonSubmit/button /div /div /section ); }这里defaultChecked让“订阅新闻邮件”默认勾选用户可随时取消在真实业务中可以将该 Checkbox 接入register(subscribe)让勾选状态随表单一起提交。Material UI Checkbox 可访问性包括复选框、单选按钮、开关在内的所有表单控件通常都应该有标签。大多数情况下使用FormControlLabel内部渲染label即可。当无法使用可见标签时可以通过inputProps给底层输入元素补充无障碍属性例如aria-label、aria-labelledby和titleCheckbox valuecheckedA inputProps{{ aria-label: Checkbox A, }} /在 refine 生态中可访问性同样是内置组件的基本要求refine 的refinedev/mui登录页内置 “Remember me” Checkbox见 packages/mui/src/components/pages/auth/components/login/index.tsx它默认用FormControlLabel包裹、并支持 i18n 翻译pages.login.buttons.rememberMe同时该字段可通过rememberMeprop 完全自定义替换。更多细节可参考 Material UI Auth Page 文档。总结Material UI Checkbox 是一个“小身材、大能力”的表单组件通过size、color、icon/checkedIcon、labelPlacement等 props 可以快速适配界面风格FormGroup与indeterminate支撑复杂的分组与树形选择结合FormControl/FormHelperText可实现完整的错误态展示而在 refine 应用中与 react-hook-form 的register或Controller组合即可把复选框状态无缝纳入useForm的表单数据流。无论是 refine 内置登录页的“记住我”还是业务表单中的订阅、多选、全选场景掌握上述用法都能让你写出更清晰、更健壮、更无障碍的表单交互。【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考