Radio 单选框

单选框用于让用户在一组选项中选择一个选项。

使用方法

按需导入组件:

import 'mdui/components/radio-group.js';
import 'mdui/components/radio.js';

按需导入组件的 TypeScript 类型:

import type { RadioGroup } from 'mdui/components/radio-group.js';
import type { Radio } from 'mdui/components/radio.js';

使用示例:

Chinese English
<mdui-radio-group value="chinese">
  <mdui-radio value="chinese">Chinese</mdui-radio>
  <mdui-radio value="english">English</mdui-radio>
</mdui-radio-group>

示例

选中状态

<mdui-radio-group> 组件的 value 属性值即当前选中的 <mdui-radio> 组件的 value 属性值。您也可以通过更新 <mdui-radio-group> 组件的 value 属性值,来切换当前选中的单选框。

可以单独使用 <mdui-radio> 组件,此时可以通过 checked 属性来读取和修改选中状态。

禁用状态

通过在 <mdui-radio-group> 组件上添加 disabled 属性,可以禁用整个单选框组。

如果需要禁用特定的单选框,可以在 <mdui-radio> 组件上添加 disabled 属性。

图标

可以通过设置 unchecked-iconchecked-icon 属性,分别定义未选中和选中状态下的单选框的 Material Icons 图标。也可以通过 unchecked-iconchecked-icon slot 来设置。

mdui-radio-group API

属性

HTML 属性JavaScript 属性Reflect类型默认值
disableddisabledbooleanfalse

是否禁用此组件

formformstring-

关联的 <form> 元素。此属性值应为同一页面中的一个 <form> 元素的 id

如果未指定此属性,则该元素必须是 <form> 元素的子元素。通过此属性,你可以将元素放置在页面的任何位置,而不仅仅是 <form> 元素的子元素。

namenamestring''

单选框组的名称,将与表单数据一起提交

valuevaluestring''

单选框组的名称,将于表单数据一起提交

defaultValuestring''

默认选中的值。在重置表单时,将重置为该默认值。该属性只能通过 JavaScript 属性设置

requiredrequiredbooleanfalse

提交表单时,是否必须选中其中一个单选框

validityValidityState-

表单验证状态对象,具体参见 ValidityState

validationMessagestring-

如果表单验证未通过,此属性将包含提示信息。如果验证通过,此属性将为空字符串

方法

名称参数返回值
checkValidity
boolean

检查表单字段是否通过验证。如果未通过,返回 false 并触发 invalid 事件;如果通过,返回 true

reportValidity
boolean

检查表单字段是否通过验证。如果未通过,返回 false 并触发 invalid 事件;如果通过,返回 true

如果验证未通过,还会在组件上显示验证失败的提示。

setCustomValidity
  • message: string
void

设置自定义的错误提示文本。只要这个文本不为空,就表示字段未通过验证

事件

名称
change

选中值变化时触发

input

选中值变化时触发

invalid

表单字段验证未通过时触发

Slots

名称
默认

<mdui-radio> 元素

mdui-radio API

属性

HTML 属性JavaScript 属性Reflect类型默认值
valuevaluestring''

当前单选项的值

disableddisabledbooleanfalse

是否禁用当前单选项

checkedcheckedbooleanfalse

当前单选项是否已选中

unchecked-iconuncheckedIconstring-

未选中状态的 Material Icons 图标名。也可以通过 slot="unchecked-icon" 设置

checked-iconcheckedIconstring-

选中状态的 Material Icons 图标名。也可以通过 slot="checked-icon" 设置

autofocusautofocusbooleanfalse

是否在页面加载完成后自动获取焦点

tabindextabIndexnumber-

元素在使用 Tab 键切换焦点时的顺序

方法

名称参数返回值
click
void

模拟鼠标点击元素

focus
  • options: FocusOptions (可选)
void

将焦点设置到当前元素。

可以传入一个对象作为参数,该对象的属性包括:

  • preventScroll:默认情况下,元素获取焦点后,页面会滚动以将该元素滚动到视图中。如果不希望页面滚动,可以将此属性设置为 true
blur
void

移除当前元素的焦点

事件

名称
focus

获得焦点时触发

blur

失去焦点时触发

change

选中该单选项时触发

Slots

名称
默认

文本内容

unchecked-icon

未选中状态的图标

checked-icon

选中状态的图标

CSS Parts

名称
control

左侧图标容器

unchecked-icon

未选中状态的图标

checked-icon

选中状态的图标

label

文本内容

MDUI文档English简体中文亮色模式暗色模式跟随系统
预设颜色
自选颜色
从壁纸提取颜色
请选择一张壁纸
开发指南
概述 安装 快速入门 TypeScript 支持 IDE 支持 本地化 常见问题
样式
暗色模式 动态配色 文章排版 设计令牌
与框架集成
React Vue Angular
组件
Button 按钮ButtonIcon 图标按钮Fab 浮动操作按钮SegmentedButton 分段按钮Chip 纸片Card 卡片Checkbox 复选框Radio 单选框Switch 开关切换Slider 滑块RangeSlider 范围滑块List 列表Collapse 折叠面板Tabs 选项卡Dropdown 下拉组件Menu 菜单Select 选择框TextField 文本框LinearProgress 线性进度指示器CircularProgress 圆形进度指示器Dialog 对话框Divider 分割线Avatar 头像Badge 徽标Icon 图标Tooltip 工具提示Snackbar 消息条NavigationBar 底部导航栏NavigationDrawer 侧边抽屉栏NavigationRail 侧边导航栏BottomAppBar 底部应用栏TopAppBar 顶部应用栏Layout 布局
工具函数
jq 工具库 dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
独立包
@mdui/icons 图标组件库